点击查看html编辑器说明文档

(/¯◡ ‿ ◡)/¯颜文字动画edit icon

|
|
Fork(复制)
|
|
作者:
lynn-ssk
提交反馈
嵌入
设置
下载
HTML
格式化
支持Emmet,输入 p 后按 Tab键试试吧!
<head> ...
展开
</head>
<body>
            
            <main>
    <div class="a">
        (<span class="a-arm">╯</span>°□°)<span class="a-arm">╯</span><span class="a-trajectory">︵</span> <span class="a-table">┻━┻</span>
    </div>
    <div class="b">
        (<span class="b-arm">╯</span>°□°)<span class="b-arm">╯</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span> <span class="b-table">┻━┻</span>
        <br>
        ┳━┳ &nbsp;&nbsp;&nbsp;&lt;<span class="b-wheel">⊗</span><span class="b-belt"><span class="b-realbelt">===============</span></span><span class="b-wheel">⊗</span>&gt;
    </div>
    <div class="c">
        <span class="c-person">(/‵Д′)/</span>~ <span class="c-table">╧╧</span>
    </div>
    <div class="d">
        <span class="d-table">┬─┬</span><span class="d-arm">ノ</span>(<span class="d-face">ಠ_ಠ</span><span class="d-arm">ノ</span>)
    </div>
    <div class="e">
        (<span class="e-arm">ノ</span>○Д○)<span class="e-arm">ノ</span><span class="e-trajectory1">=</span><span class="e-trajectory2">=</span><span class="e-trajectory3">=</span><span class="e-table">┠</span>
    </div>
    <div class="f">
        <span class="f-r_table">┻━┻</span> <span class="f-trajectory">︵</span> <span class="f-arm">¯\</span>_༼ᴼل͜ᴼ༽_<span class="f-arm">/¯</span> <span class="f-trajectory">︵</span> <span class="f-l_table">┻━┻</span>
    </div>
    <div class="g">
        (<span class="g-arm">/¯</span>◡ ‿ ◡)<span class="g-arm">/¯</span> <span class="g-trajectory">~</span> <span class="g-table">┻━┻</span>
    </div>
    <div class="h">
        <span class="h-person">(</span><span class="h-arm">ノ</span><span class="h-person"><span class="h-face">#--</span>)</span><span class="h-arm">ノ</span><span class="h-board">\</span><span class="h-marble1">。</span><span class="h-marble2">゜</span><span class="h-marble3">。</span>
    </div>
    <div class="i">
        <span class="i-t_arm">ノ</span>┬─┬<span class="i-t_arm">ノ</span> <span class="i-trajectory">︵</span> <span class="i-person">( <span class="i-arm">\</span><span class="i-face">o°o</span>)<span class="i-arm">\</span></span>
    </div>
</main>
        
</body>
CSS
格式化
            
            *, *:before, *:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --dur: 1s;
    --color1: #17181c;
    --color2: #e3e4e8;
    font-size: calc(12px + (36 - 12) * (100vw - 320px) / (1280 - 320));
}
body {
    background: var(--color2);
    color: var(--color1);
    font: 1em/1 "Helvetica Neue", Helvetica, sans-serif;
}
main {
    margin: 3em auto 0;
    width: 20.5em;
}
div, span {
/*  outline: 1px solid red; */
}
div {
    margin-bottom: 2em;
}
span {
    display: inline-block;
}

/* Emoticon parts */
.a-arm {
    animation: a-armMove var(--dur) linear infinite;
    transform-origin: 25% 25%;
}
.a-trajectory {
    animation: a-trajectory var(--dur) linear infinite;
}
.a-table {
    animation: a-tableFlip var(--dur) linear infinite;
    transform-origin: -33% 50%;
}
.b-arm {
    animation: b-armMove var(--dur) linear infinite;
    transform-origin: 25% 25%;
}
.b-belt, .b-belt:before {
    background: repeating-linear-gradient(90deg,transparent,transparent 0.25em,currentColor 0.25em,currentColor 3.3em) 0 0 / 100% 0.1em repeat-x;
}
.b-belt {
    animation: b-beltL var(--dur) linear infinite;
    position: relative;
    width: 13.2em;
    height: 0.8em;
    vertical-align: middle;
}
.b-realbelt {
    color: transparent;
}
.b-belt:before {
    animation: b-beltR var(--dur) linear infinite;
    background-position: 0 100%;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.b-table:nth-of-type(3) {
    animation: b-tableFlip var(--dur) linear infinite;
}
.b-table:nth-of-type(n + 4) {
    animation: b-tableMove var(--dur) linear infinite;
}
.b-wheel {
    animation: b-rotate var(--dur) linear infinite;
    transform-origin: 50% 60%;
}
.c-person {
    animation: c-rage var(--dur) linear infinite
}
.c-table {
    animation: c-tableSpin var(--dur) linear infinite;
    transform-origin: 50% 33%;
}
.d-arm {
    animation: d-armMove var(--dur) linear infinite;
    transform-origin: 100% 50%;
}
.d-face {
    animation: d-faceMove var(--dur) linear infinite;
}
.d-table {
    animation: d-putTableBack var(--dur) linear infinite;
}
.e-arm {
    animation: e-armMove var(--dur) linear infinite;
    transform-origin: 25% 75%;
}
.e-trajectory1 {
    animation: e-traj1FadeIn var(--dur) linear infinite;
}
.e-trajectory2 {
    animation: e-traj2FadeIn var(--dur) linear infinite;
}
.e-trajectory3 {
    animation: e-traj3FadeIn var(--dur) linear infinite;
}
.e-table {
    animation: e-tableFly var(--dur) linear infinite;
}
.f-r_table {
    animation: f-tableFlipRight var(--dur) linear infinite;
    transform-origin: 125% 50%;
}
.f-l_table {
    animation: f-tableFlipLeft var(--dur) linear infinite;
    transform-origin: -25% 50%;
}
.f-trajectory {
    animation: f-trajectory var(--dur) linear infinite;
}
.f-arm {
    animation: f-armMove var(--dur) linear infinite;
    transform-origin: 50% 100%;
}
.g-arm {
    animation: g-armMove var(--dur) linear infinite;
    transform-origin: 0% 100%;
}
.g-trajectory {
    animation: g-trajectory var(--dur) linear infinite;
}
.g-table {
    animation: g-tableFloatFlip var(--dur) linear infinite;
}
.h-arm {
    animation: h-armMove var(--dur) ease-out infinite;
    transform-origin: 0% 100%;
}
.h-person, .h-face {
    animation: h-crouch var(--dur) ease-out infinite;
}
.h-board {
    animation: h-boardFlip var(--dur) linear infinite;
    transform-origin: 100% 100%;
}
.h-marble1 {
    animation: h-marble1Fly var(--dur) linear infinite;
}
.h-marble2 {
    animation: h-marble2Roll var(--dur) linear infinite;
}
.h-marble3 {
    animation: h-marble3Roll var(--dur) linear infinite;
}
.i-t_arm {
    animation: i-tableArmMove var(--dur) linear infinite;
    transform-origin: 0% 100%;
}
.i-trajectory {
    animation: i-trajectory var(--dur) linear infinite;
}
.i-person {
    animation: i-personFlip var(--dur) linear infinite;
    transform-origin: -25% 50%;
}
.i-face {
    animation: i-faceJerk var(--dur) linear infinite;
}
.i-arm {
    animation: i-armMove var(--dur) linear infinite;
    transform-origin: 0% 0%;
}

/* Animations */
@keyframes a-armMove {
    from {transform: rotate(90deg)}
    12.5%, to {transform: rotate(0deg)}
}
@keyframes a-trajectory {
    from {opacity: 0}
    37.5%, to {opacity: 1}
}
@keyframes a-tableFlip {
    from {transform: rotate(-180deg)}
    37.5%, to {transform: rotate(0)}
}
@keyframes b-armMove {
    from, to {transform: rotate(90deg)}
    10%, 80% {transform: rotate(0deg)}
}
@keyframes b-beltL {
    from {background-position: 0 0}
    to {background-position: -3.3em 0}
}
@keyframes b-beltR {
    from {background-position: 0 100%}
    to {background-position: 3.3em 100%}
}
@keyframes b-rotate {
    from {transform: rotate(0)}
    to {transform: rotate(-1turn)}
}
@keyframes b-tableFlip {
    from {transform: translate(0) rotate(0)}
    12.5% {transform: translate(0.5em,-2em) rotate(45deg)}
    25% {transform: translate(2em,-3.5em) rotate(90deg)}
    37.5% {transform: translate(3.25em,-4em) rotate(135deg)}
    50% {transform: translate(4.5em,-4em) rotate(180deg)}
    62.5% {transform: translate(5.75em,-4em) rotate(225deg)}
    87.5% {transform: translate(8.75em,-2em) rotate(315deg)}
    to {transform: translate(9.85em,0) rotate(360deg)}
}
@keyframes b-tableMove {
    from {transform: translateX(0)}
    to {transform: translateX(-3.3em)}
}
@keyframes c-rage {
    from,10%,20%,30%,40%,50%,60%,70%,80%,90%,to{transform: translateX(0)}
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{transform: translateX(-5%)}
}
@keyframes c-tableSpin {
    from {transform: rotate(0)}
    to {transform: rotate(2turn)}
}
@keyframes d-armMove {
    from {transform: scaleX(-1)}
    50%, to {transform: scaleX(1)}
}
@keyframes d-faceMove {
    from {transform: translateX(1em)}
    50%, to {transform: translateX(0)}
}
@keyframes d-putTableBack {
    from {transform: translateX(7.5em) rotate(180deg)}
    50%, to {transform: translateX(0) rotate(0)}
}
@keyframes e-armMove {
    from {transform: rotate(90deg)}
    10%, to {transform: rotate(0deg)}
}
@keyframes e-traj1FadeIn {
    from, 60% {opacity: 0}
    70%, to {opacity: 1}
}
@keyframes e-traj2FadeIn {
    from, 70% {opacity: 0}
    80%, to {opacity: 1}
}
@keyframes e-traj3FadeIn {
    from, 80% {opacity: 0}
    90%, to {opacity: 1}
}
@keyframes e-tableFly {
    from, 6% {transform: translateX(-5em) rotate(-2.75turn)}
    to {transform: translateX(0) rotate(0)}
}
@keyframes f-tableFlipRight {
    from, 23% {transform: rotate(180deg)}
    80%, to {transform: rotate(0)}
}
@keyframes f-tableFlipLeft {
    from, 23% {transform: rotate(-180deg)}
    80%, to {transform: rotate(0)}
}
@keyframes f-trajectory {
    from, 33% {opacity: 0}
    80%, to {opacity: 1}
}
@keyframes f-armMove {
    from {transform: scaleY(-1)}
    33%, to {transform: scaleY(1)}
}
@keyframes g-armMove {
    from {transform: scaleY(0.1)}
    33%, 50% {transform: scaleY(1)}
    57% {transform: scaleY(1.3)}
    65%, to {transform: scaleY(1)}
}
@keyframes g-trajectory {
    from, 33% {opacity: 0}
    50%, to {opacity: 1}
}
@keyframes g-tableFloatFlip {
    from {transform: translate(-4.5em,0.2em) rotate(180deg)}
    33%, 50% {transform: translate(0) rotate(180deg)}
    65% {transform: rotate(-20deg)}
    75% {transform: rotate(10deg)}
    80%, to {transform: rotate(0)}
}
@keyframes h-armMove {
    from {transform: translateY(0) rotate(45deg)}
    35%, 45% {transform: translateY(0.2em) rotate(90deg)}
    55%, to {transform: translateY(0) rotate(0)}
}
@keyframes h-crouch {
    from {transform: translateY(0)}
    35%, 45% {transform: translateY(0.2em)}
    55%, to {transform: translateY(0)}
}
@keyframes h-boardFlip {
    from, 48% {transform: translateX(-2em) rotate(-50deg)}
    to {transform: translateX(0) rotate(0)}
}
@keyframes h-marble1Fly {
    from, 48% {transform: translate(-2.8em,0.1em)}
    to {transform: translate(0)}
}
@keyframes h-marble2Roll {
    from, 48% {transform: translate(-4em,0.8em)}
    to {transform: translate(0)}
}
@keyframes h-marble3Roll {
    from, 48% {transform: translate(-4.5em,0.1em)}
    to {transform: translate(0)}
}
@keyframes i-tableArmMove {
    from {opacity: 0; transform: rotate(75deg)}
    25%, to {opacity: 1; transform: rotate(0)}
}
@keyframes i-trajectory {
    from, 33% {opacity: 0}
    80%, to {opacity: 1}
}
@keyframes i-armMove {
    from {transform: rotate(-75deg)}
    50%, 70% {transform: rotate(0)}
    75% {transform: rotate(15deg)}
    80% {transform: rotate(-7deg)}
    85%, to {transform: rotate(0)}
}
@keyframes i-personFlip {
    from {transform: rotate(-180deg)}
    70%, to {transform: rotate(0)}
}
@keyframes i-faceJerk {
    from, 70% {transform: translateY(0)}
    75% {transform: translateY(0.1em)}
    80%, to {transform: translateY(0)}
}

@media screen and (prefers-color-scheme: dark) {
    body {
        background: var(--color1);
        color: var(--color2);
    }
}
        
JS
格式化
            
            
        
预览
控制台