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