Emoji 表情动画

下载代码

html

css

分享到微信朋友圈

html

<div class="wrapper">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;"
    xml:space="preserve" version="1.1" id="svg2">
    
    <metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,38 38,38 38,0 0,0 0,38 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g10"><g id="head_5"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(36,19)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-9.389 -7.611,-17 -17,-17 -9.388,0 -17,7.611 -17,17 0,9.388 7.612,17 17,17 C -7.611,17 0,9.388 0,0"/></g><g transform="translate(29.457,19.2031)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.059,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.175,-0.142 0.426,-0.147 0.611,-0.014 0.012,0.009 1.262,0.902 3.702,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.032,-0.452 0.093,-0.208 0,0"/></g><g transform="translate(17.457,19.2031)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.06,0.135 -1.499,3.297 -4.457,3.297 -2.957,0 -4.397,-3.162 -4.457,-3.297 -0.092,-0.207 -0.032,-0.449 0.144,-0.591 0.176,-0.142 0.427,-0.147 0.61,-0.014 0.013,0.009 1.262,0.902 3.703,0.902 2.426,0 3.674,-0.881 3.702,-0.901 0.088,-0.066 0.194,-0.099 0.298,-0.099 0.11,0 0.221,0.037 0.312,0.109 C 0.033,-0.452 0.092,-0.208 0,0"/></g><g transform="translate(32,20.9995)" id="g32"><path id="brow_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.396,0 -0.772,0.238 -0.929,0.629 -2.707,5.074 -7.151,6.01 -7.196,6.02 -7.737,6.128 -8.089,6.655 -7.98,7.196 -7.872,7.738 -7.346,8.087 -6.804,7.98 -6.578,7.936 -1.248,6.812 0.929,1.372 1.134,0.859 0.884,0.277 0.371,0.072 0.25,0.023 0.124,0 0,0"/></g><g transform="translate(5.9995,20.9995)" id="g36"><path id="brow_6" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.124,0 -0.249,0.023 -0.371,0.072 -0.884,0.277 -1.133,0.859 -0.928,1.372 1.248,6.812 6.579,7.936 6.804,7.98 7.348,8.087 7.873,7.738 7.981,7.196 8.089,6.656 7.739,6.13 7.2,6.02 7.015,5.982 2.693,5.04 0.929,0.629 0.772,0.238 0.397,0.001 0,0"/></g><g transform="translate(19,15)" id="g40"><path id="mouth_5" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -3.623,0 -6.027,0.422 -9,1 -0.679,0.131 -2,0 -2,-2 0,-4 4.595,-9 11,-9 6.404,0 11,5 11,9 C 11,1 9.679,1.132 9,1 6.027,0.422 3.623,0 0,0"/></g><g transform="translate(10,14)" id="g44"><path id="mouth_6" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 3,-1 9,-1 6,0 9,1 9,1 0,0 -2,-4 -9,-4 -7,0 -9,4 -9,4"/></g><g transform="translate(11.8472,8.7705)" id="g48"><path id="tear_5" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c -0.68,-2.677 -3.4,-4.295 -6.077,-3.615 -2.676,0.678 -4.295,3.399 -3.615,6.076 0.679,2.677 6.337,8.708 7.307,8.462 C -1.417,10.677 0.679,2.677 0,0"/></g><g transform="translate(26.1328,8.7705)" id="g52"><path id="tear_6" style="fill:#5dadec;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0.68,-2.677 3.4,-4.295 6.077,-3.615 2.677,0.678 4.296,3.399 3.616,6.076 C 9.014,5.138 3.355,11.169 2.386,10.923 1.417,10.677 -0.679,2.677 0,0"/></g></g></g></g></svg>

css

body {
  background-color: white;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  display: flex;
}
.wrapper .linkDiv{
  position: absolute;
  bottom: 10px;
  font-size: 1em;
  font-family: sans-serif;
}
.wrapper .linkDiv a{
  color: #5dadec;
  text-decoration: none;
}
.wrapper .linkDiv a::after{
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #5dadec;
  transition: width 300ms ease-out 0s;
}
.wrapper .linkDiv a:hover::after{
  width: 7.6em;
  transition: width 300ms ease-out 0s;
}
svg {
  position: relative;
  width: 10em;
  transition: width 200ms ease-in-out 0s;
}
svg:hover {
  width: 14em;
  transition: width 200ms ease-in-out 0s;
}
#eye_1,
#eye_2 {
  -webkit-animation: animEyes_1 1000ms infinite;
          animation: animEyes_1 1000ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#mouth_1 {
  -webkit-animation: animMouth_1 1000ms infinite;
          animation: animMouth_1 1000ms infinite;
}
#head_1 {
  -webkit-animation: animHead_1 1000ms infinite;
          animation: animHead_1 1000ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
@-webkit-keyframes animEyes_1 {
  0% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
  40% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(0) scale(0.5);
            transform: rotate(0) scale(0.5);
  }
  58% {
    -webkit-transform: rotate(3deg) scale(1);
            transform: rotate(3deg) scale(1);
  }
  67% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  75% {
    -webkit-transform: rotate(7deg) scale(1);
            transform: rotate(7deg) scale(1);
  }
  87% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  94% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
}
@keyframes animEyes_1 {
  0% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
  40% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
  50% {
    -webkit-transform: rotate(0) scale(0.5);
            transform: rotate(0) scale(0.5);
  }
  58% {
    -webkit-transform: rotate(3deg) scale(1);
            transform: rotate(3deg) scale(1);
  }
  67% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  75% {
    -webkit-transform: rotate(7deg) scale(1);
            transform: rotate(7deg) scale(1);
  }
  87% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  94% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(0) scale(0.8);
            transform: rotate(0) scale(0.8);
  }
}
@-webkit-keyframes animMouth_1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-3%) scale(1.1, 1);
            transform: translateY(-3%) scale(1.1, 1);
  }
  62% {
    -webkit-transform: translateY(8%) scale(0.8, 1);
            transform: translateY(8%) scale(0.8, 1);
  }
  84% {
    -webkit-transform: translateY(8%) scale(1, 0.8);
            transform: translateY(8%) scale(1, 0.8);
  }
  92% {
    -webkit-transform: translateY(-2%) scale(0.8, 1);
            transform: translateY(-2%) scale(0.8, 1);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes animMouth_1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-3%) scale(1.1, 1);
            transform: translateY(-3%) scale(1.1, 1);
  }
  62% {
    -webkit-transform: translateY(8%) scale(0.8, 1);
            transform: translateY(8%) scale(0.8, 1);
  }
  84% {
    -webkit-transform: translateY(8%) scale(1, 0.8);
            transform: translateY(8%) scale(1, 0.8);
  }
  92% {
    -webkit-transform: translateY(-2%) scale(0.8, 1);
            transform: translateY(-2%) scale(0.8, 1);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes animHead_1 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  30% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
  60% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes animHead_1 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  30% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
  60% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#tear_5,
#tear_6 {
  -webkit-animation: tearAnim_5 1000ms infinite;
          animation: tearAnim_5 1000ms infinite;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  transform-box: fill-box;
}
#tear_6 {
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-animation-name: tearAnim_6;
          animation-name: tearAnim_6;
}
#head_5 {
  -webkit-animation: animHead_5 300ms infinite;
          animation: animHead_5 300ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#brow_5,
#brow_6 {
  -webkit-animation: browAnim_5 500ms infinite;
          animation: browAnim_5 500ms infinite;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  transform-box: fill-box;
}
#brow_6 {
  -webkit-animation-name: browAnim_6;
          animation-name: browAnim_6;
}
#mouth_5,
#mouth_6 {
  -webkit-animation: mouthAnim_5 1000ms infinite;
          animation: mouthAnim_5 1000ms infinite;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  transform-box: fill-box;
}
@-webkit-keyframes tearAnim_5 {
  0% {
    -webkit-transform: scale(0) rotate(-45deg) translate(0, 0);
            transform: scale(0) rotate(-45deg) translate(0, 0);
  }
  50% {
    -webkit-transform: scale(1) rotate(0) translate(0, 0);
            transform: scale(1) rotate(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0) translate(0, -100%);
            transform: scale(1) rotate(0) translate(0, -100%);
    opacity: 0;
  }
}
@keyframes tearAnim_5 {
  0% {
    -webkit-transform: scale(0) rotate(-45deg) translate(0, 0);
            transform: scale(0) rotate(-45deg) translate(0, 0);
  }
  50% {
    -webkit-transform: scale(1) rotate(0) translate(0, 0);
            transform: scale(1) rotate(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0) translate(0, -100%);
            transform: scale(1) rotate(0) translate(0, -100%);
    opacity: 0;
  }
}
@-webkit-keyframes tearAnim_6 {
  0% {
    -webkit-transform: scale(0) rotate(45deg) translate(0, 0);
            transform: scale(0) rotate(45deg) translate(0, 0);
  }
  50% {
    -webkit-transform: scale(1) rotate(0) translate(0, 0);
            transform: scale(1) rotate(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0) translate(0, -100%);
            transform: scale(1) rotate(0) translate(0, -100%);
    opacity: 0;
  }
}
@keyframes tearAnim_6 {
  0% {
    -webkit-transform: scale(0) rotate(45deg) translate(0, 0);
            transform: scale(0) rotate(45deg) translate(0, 0);
  }
  50% {
    -webkit-transform: scale(1) rotate(0) translate(0, 0);
            transform: scale(1) rotate(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0) translate(0, -100%);
            transform: scale(1) rotate(0) translate(0, -100%);
    opacity: 0;
  }
}
@-webkit-keyframes animHead_5 {
  0% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
  100% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
}
@keyframes animHead_5 {
  0% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05);
            transform: scale(0.95, 1.05);
  }
  100% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
}
@-webkit-keyframes browAnim_5 {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  50% {
    -webkit-transform: translate(0, 40%) rotate(8deg);
            transform: translate(0, 40%) rotate(8deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@keyframes browAnim_5 {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  50% {
    -webkit-transform: translate(0, 40%) rotate(8deg);
            transform: translate(0, 40%) rotate(8deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@-webkit-keyframes browAnim_6 {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  50% {
    -webkit-transform: translate(0, 30%) rotate(-6deg);
            transform: translate(0, 30%) rotate(-6deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@keyframes browAnim_6 {
  0% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
  50% {
    -webkit-transform: translate(0, 30%) rotate(-6deg);
            transform: translate(0, 30%) rotate(-6deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@-webkit-keyframes mouthAnim_5 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  16% {
    -webkit-transform: scale(0.8, 1.2) translateY(0);
            transform: scale(0.8, 1.2) translateY(0);
  }
  33% {
    -webkit-transform: scale(1, 1) translateY(0.1em);
            transform: scale(1, 1) translateY(0.1em);
  }

49% {
    -webkit-transform: scale(0.8, 1.2) translateY(0.1em);
            transform: scale(0.8, 1.2) translateY(0.1em);
  }
  66% {
    -webkit-transform: scale(1, 1) translateY(0.1em);
            transform: scale(1, 1) translateY(0.1em);
  }

82% {
    -webkit-transform: scale(0.8, 1.2) translateY(0);
            transform: scale(0.8, 1.2) translateY(0);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes mouthAnim_5 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  16% {
    -webkit-transform: scale(0.8, 1.2) translateY(0);
            transform: scale(0.8, 1.2) translateY(0);
  }
  33% {
    -webkit-transform: scale(1, 1) translateY(0.1em);
            transform: scale(1, 1) translateY(0.1em);
  }

#eye_3,
#eye_4 {
  -webkit-animation: eyeAnim_3 1500ms infinite;
          animation: eyeAnim_3 1500ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#tounge_3 {
  -webkit-animation: toungeAnim_3 1500ms infinite;
          animation: toungeAnim_3 1500ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#mouth_3 {
  -webkit-animation: mouthAnim_3 1500ms infinite;
          animation: mouthAnim_3 1500ms infinite;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  transform-box: fill-box;
}
#head_3 {
  -webkit-animation: animHead_3 1500ms infinite;
          animation: animHead_3 1500ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
@-webkit-keyframes eyeAnim_3 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  15% {
    -webkit-transform: scale(1.2, 0.1);
            transform: scale(1.2, 0.1);
  }
  20% {
    -webkit-transform: scale(1.2, 0.1);
            transform: scale(1.2, 0.1);
  }
  35% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  40% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }

45% {
    -webkit-transform: scale(1.2, 0.1);
            transform: scale(1.2, 0.1);
  }
  50% {
    -webkit-transform: scale(1.2, 0.1);
            transform: scale(1.2, 0.1);
  }
  65% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@-webkit-keyframes toungeAnim_3 {
  0% {
    -webkit-transform: translateY(50%) scale(1, 0.6);
            transform: translateY(50%) scale(1, 0.6);
  }
  50% {
    -webkit-transform: translateY(2%) scale(0.9, 1.2);
            transform: translateY(2%) scale(0.9, 1.2);
  }
  100% {
    -webkit-transform: translateY(50%) scale(1, 0.6);
            transform: translateY(50%) scale(1, 0.6);
  }
}
@keyframes toungeAnim_3 {
  0% {
    -webkit-transform: translateY(50%) scale(1, 0.6);
            transform: translateY(50%) scale(1, 0.6);
  }
  50% {
    -webkit-transform: translateY(2%) scale(0.9, 1.2);
            transform: translateY(2%) scale(0.9, 1.2);
  }
  100% {
    -webkit-transform: translateY(50%) scale(1, 0.6);
            transform: translateY(50%) scale(1, 0.6);
  }
}
@-webkit-keyframes mouthAnim_3 {
  0% {
    -webkit-transform: scale(1, 1) translateY(20%);
            transform: scale(1, 1) translateY(20%);
  }
  50% {
    -webkit-transform: scale(1.1, 0.8) translateY(40%);
            transform: scale(1.1, 0.8) translateY(40%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(20%);
            transform: scale(1, 1) translateY(20%);
  }
}
@keyframes mouthAnim_3 {
  0% {
    -webkit-transform: scale(1, 1) translateY(20%);
            transform: scale(1, 1) translateY(20%);
  }
  50% {
    -webkit-transform: scale(1.1, 0.8) translateY(40%);
            transform: scale(1.1, 0.8) translateY(40%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(20%);
            transform: scale(1, 1) translateY(20%);
  }
}
@-webkit-keyframes animHead_3 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.05, 0.95) translateY(10%);
            transform: scale(1.05, 0.95) translateY(10%);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
@keyframes animHead_3 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.05, 0.95) translateY(10%);
            transform: scale(1.05, 0.95) translateY(10%);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
#eye_7,
#eye_8 {
  -webkit-animation: animEyes_7 1500ms infinite;
          animation: animEyes_7 1500ms infinite;
}
#mouth_7 {
  -webkit-animation: animMouth_7 1500ms infinite;
          animation: animMouth_7 1500ms infinite;
}
#head_7 {
  -webkit-animation: animHead_7 1500ms infinite;
          animation: animHead_7 1500ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
@-webkit-keyframes animEyes_7 {
  0% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
  16% {
    -webkit-transform: translate(3%, 0);
            transform: translate(3%, 0);
  }
  33% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
  49% {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
  66% {
    -webkit-transform: translate(-5%, -5%);
            transform: translate(-5%, -5%);
  }
  82% {
    -webkit-transform: translate(3%, 0);
            transform: translate(3%, 0);
  }
  100% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
}
@keyframes animEyes_7 {
  0% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
  16% {
    -webkit-transform: translate(3%, 0);
            transform: translate(3%, 0);
  }
  33% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
  49% {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
  66% {
    -webkit-transform: translate(-5%, -5%);
            transform: translate(-5%, -5%);
  }
  82% {
    -webkit-transform: translate(3%, 0);
            transform: translate(3%, 0);
  }
  100% {
    -webkit-transform: translate(-3%, 0);
            transform: translate(-3%, 0);
  }
}

@-webkit-keyframes animMouth_7 {
  0% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  16% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  33% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  49% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  66% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  82% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
}

@keyframes animMouth_7 {
  0% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  16% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  33% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
  49% {
    -webkit-transform: translateX(3%);
            transform: translateX(3%);
  }
  66% {
    -webkit-transform: translateX(-3%);
            transform: translateX(-3%);
  }
  82% {
    -webkit-transform: translateX(2%);
            transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(-2%);
            transform: translateX(-2%);
  }
}

@-webkit-keyframes animHead_7 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  33% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  66% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes animHead_7 {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  33% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  66% {
    -webkit-transform: scale(1.05, 0.95);
            transform: scale(1.05, 0.95);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#mouth_9,
#mouth_0 {
  -webkit-animation: mouthAnim_9 1200ms infinite;
          animation: mouthAnim_9 1200ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#mouth_0 {
  -webkit-animation-name: mouthAnim_0;
          animation-name: mouthAnim_0;
}
#brow_9,
#brow_0 {
  -webkit-animation: browAnim_9 1200ms infinite;
          animation: browAnim_9 1200ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#brow_0 {
  -webkit-animation-name: browAnim_0;
          animation-name: browAnim_0;
}
#eye_9,
#eye_0 {
  -webkit-animation: eyeAnim_9 1200ms infinite;
          animation: eyeAnim_9 1200ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
#head_9 {
  -webkit-animation: animHead_9 300ms infinite;
          animation: animHead_9 300ms infinite;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  transform-box: fill-box;
}
@-webkit-keyframes mouthAnim_9 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.2, 0.8) translateY(10%);
            transform: scale(1.2, 0.8) translateY(10%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes mouthAnim_9 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.2, 0.8) translateY(10%);
            transform: scale(1.2, 0.8) translateY(10%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@-webkit-keyframes mouthAnim_0 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.2, 0.8) translateY(-20%);
            transform: scale(1.2, 0.8) translateY(-20%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@keyframes mouthAnim_0 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.2, 0.8) translateY(-20%);
            transform: scale(1.2, 0.8) translateY(-20%);
  }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
}
@-webkit-keyframes browAnim_9 {
  0% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  50% {
    -webkit-transform: rotate(8deg) translateY(-40%);
            transform: rotate(8deg) translateY(-40%);
  }
  100% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
}
@keyframes browAnim_9 {
  0% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  50% {
    -webkit-transform: rotate(8deg) translateY(-40%);
            transform: rotate(8deg) translateY(-40%);
  }
  100% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
}
@-webkit-keyframes browAnim_0 {
  0% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  50% {
    -webkit-transform: rotate(-8deg) translateY(-40%);
            transform: rotate(-8deg) translateY(-40%);
  }
  100% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
}
@keyframes browAnim_0 {
  0% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
  50% {
    -webkit-transform: rotate(-8deg) translateY(-40%);
            transform: rotate(-8deg) translateY(-40%);
  }
  100% {
    -webkit-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
}
@-webkit-keyframes eyeAnim_9 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes eyeAnim_9 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes animHead_9 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.05, 0.95) translateY(4%);
            transform: scale(1.05, 0.95) translateY(4%);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}
@keyframes animHead_9 {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0);
  }
  50% {
    -webkit-transform: scale(1.05, 0.95) translateY(4%);
            transform: scale(1.05, 0.95) translateY(4%);
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg