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

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

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