css实现特殊字符表情动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现特殊字符表情动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh">

<head>
   
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,*:before,*:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --dur: 1s;
    --color1: #17181c;
    --color2: #e3e4e8
}

body {
    background: var(--color2);
    color: var(--color1);
    font: 1em/1 "Helvetica Neue",Helvetica,sans-serif
}

main {
    margin: 3em auto 0;
    width: 20.5em;
    font-size: calc(12px+(36 - 12) *(100vw - 320px) /(1280 - 320))
}

div {
    margin-bottom: 2em
}

span {
    display: inline-block
}

.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 .25em,currentColor .25em,currentColor 3.3em) 0 0 / 100% .1em repeat-x
}

.b-belt {
    animation: b-beltL var(--dur) linear infinite;
    position: relative;
    width: 13.2em;
    height: .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
}

@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% {
        opa.........完整代码请登录后点击上方下载按钮下载查看