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