您现在的位置是：首页 > 随笔小记 > 小项目

纯CSS3实现大象走路动画

  • 小项目
  • 2018-08-24
  • 人已阅读
css   css3
简介这一次要给大家介绍的是一款纯CSS3实现的大象走路动画，大象走路时的形态表现的十分逼真，你可能不会想到，这么给力的动画居然是用纯CSS3实现的.

这一次要给大家介绍的是一款纯CSS3实现的大象走路动画，大象走路时的形态表现的十分逼真，你可能不会想到，这么给力的动画居然是用纯CSS3实现的,很可爱的大象，让我们一起研究一下吧。
效果展示：



因为是纯css3编写而成所以什么都不引入，纯网页编辑而成。废话不说了直接上代码。
body主体代码


<div class="ele-container">
  <div class="ele-wrapper">
    <div class="ele-tail"></div>
    <div class="ele-body">
      <div class="ele-head">
        <div class="ele-eyebrows"></div>
        <div class="ele-eyes"></div>
        <div class="ele-mouth"></div>
        <div class="ele-fang-front"></div>
        <div class="ele-fang-back"></div>
        <div class="ele-ear"></div>
      </div>
    </div>
    <div class="ele-leg-1 ele-leg-back">
      <div class="ele-foot"></div>
    </div>
    <div class="ele-leg-2 ele-leg-front">
      <div class="ele-foot"></div>
    </div>
    <div class="ele-leg-3 ele-leg-back">
      <div class="ele-foot"></div>
    </div>
    <div class="ele-leg-4 ele-leg-front">
      <div class="ele-foot"></div>
    </div>
  </div>
</div>

css3样式
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/***********VARIABLES***********/
/*Movement*/
/*Colors*/
/***********STYLES***********/
body {
  background-color: #d4e7ba;
}

/*.ele-container {
  background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
  background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%);
  height: 500px;
  overflow: hidden;
  position: relative;
  width: 100%;
}*/

.ele-wrapper {
  -webkit-animation: ele-movement 1s infinite linear;
          animation: ele-movement 1s infinite linear;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate3D(-50%, -75%, 0);
      -ms-transform: translate3D(-50%, -75%, 0);
          transform: translate3D(-50%, -75%, 0);
  width: 200px;
}

.ele-body {
  -webkit-animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
          animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
  background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%);
  background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%);
  border: 1px solid #808080;
  border-radius: 100px 50px 70px 60px;
  height: 165px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.ele-tail {
  -webkit-animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
          animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
  border-top: 7px solid #808080;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
          transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
  width: 64px;
}
.ele-tail:before {
  border-top: 5px solid #C2C2C2;
  border-radius: 50%;
  content: '';
  height: 50px;
  position: absolute;
  width: 64px;
  top: -6px;
}

.ele-head {
  -webkit-animation: head-movement 2s infinite linear;
          animation: head-movement 2s infinite linear;
  background: #C2C2C2;
  border-radius: 50%;
  border-top: 1px solid #808080;
  box-shadow: -1px 1px 2px #808080;
  height: 150px;
  position: absolute;
  -webkit-transform: translate3d(80%, -25%, 0);
          transform: translate3d(80%, -25%, 0);
  width: 155px;
}

.ele-eyes:before, .ele-eyes:after {
  -webkit-animation: eyes-blink 3.5s infinite linear;
          animation: eyes-blink 3.5s infinite linear;
  background-color: #FDFDFD;
  border-radius: 50%;
  bottom: -48px;
  content: '';
  height: 10px;
  position: absolute;
  width: 10px;
}

.ele-eyebrows {
  -webkit-animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
          animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93);
  background: -webkit-linear-gradient(bottom, #C2C2C2 20%, #9c9c9c 100%);
  background: linear-gradient(to top, #C2C2C2 20%, #9c9c9c 100%);
  border-radius: 10px;
  border-top: 1px solid #808080;
  bottom: 88px;
  height: 20px;
  left: 92px;
  position: absolute;
  width: 60px;
}

.ele-eyes {
  left: 60%;
  position: absolute;
  top: 6%;
}
.ele-eyes:before {
  left: 41px;
}
.ele-eyes:after {
  left: 10px;
}

.ele-ear {
  -webkit-animation: ear-movement 1s infinite linear;
          animation: ear-movement 1s infinite linear;
  background: -webkit-linear-gradient(right, #C2C2C2 10%, darkgray 100%);
  background: linear-gradient(to left, #C2C2C2 10%, darkgray 100%);
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
  border-top: 1px solid #808080;
  border-radius: 60px 0 0 50%;
  height: 110px;
  left: -22px;
  position: absolute;
  top: 25px;
  -webkit-transform: rotateZ(-10deg);
          transform: rotateZ(-10deg);
  width: 60px;
}

.ele-mouth {
  -webkit-animation: mouth-movement 1s infinite linear;
          animation: mouth-movement 1s infinite linear;
  background: -webkit-linear-gradient(top, #C2C2C2 50%, darkgray 100%);
  background: linear-gradient(to bottom, #C2C2C2 50%, darkgray 100%);
  border-radius: 0px 100% 0px 0px;
  border-top: 2px solid #808080;
  height: 160px;
  left: 83%;
  position: absolute;
  top: 35%;
  width: 30px;
}
.ele-mouth:before {
  -webkit-animation: mouth-after-movement 1s infinite linear;
          animation: mouth-after-movement 1s infinite linear;
  background-color: darkgray;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
  border-radius: 8px;
  bottom: 0;
  content: '';
  height: 15px;
  left: -5px;
  position: absolute;
  width: 40px;
}

.ele-fang-front, .ele-fang-back {
  border-bottom: 12px solid #FFF;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  -webkit-transform: rotateZ(20deg);
          transform: rotateZ(20deg);
  width: 50px;
}

.ele-fang-front {
  box-shadow: 0px 1px 0px #808080;
  left: 100px;
  top: 100px;
}
.ele-fang-front:before {
  background-color: #C2C2C2;
  bottom: -10px;
  content: '';
  height: 45px;
  left: -5px;
  position: absolute;
  width: 15px;
}
.ele-fang-front:after {
  background-color: #C2C2C2;
  border-radius: 0 50% 50% 0;
  bottom: -14px;
  box-shadow: 1px 1px 0px #808080;
  content: '';
  height: 21px;
  left: 6px;
  position: absolute;
  -webkit-transform: rotateZ(20deg);
          transform: rotateZ(20deg);
  width: 15px;
}

.ele-fang-back {
  border-bottom-color: #e6e6e6;
  left: 115px;
  top: 95px;
  z-index: -1;
}
.ele-fang-back:before {
  background-color: #C2C2C2;
  bottom: -10px;
  content: '';
  height: 25px;
  position: absolute;
  width: 30px;
}

div[class^="ele-leg-"] {
  border-left: 1px solid #808080;
  height: 88px;
  position: absolute;
  width: 50px;
}
div[class^="ele-leg-"]:before {
  background-color: rgba(74, 74, 74, 0.53);
  border-radius: 50%;
  bottom: -30px;
  box-shadow: 0 0 2px rgba(74, 74, 74, 0.53);
  content: '';
  height: 10px;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) rotateZ(0deg);
          transform: translateX(-50%) rotateZ(0deg);
  width: 50px;
}

.ele-leg-front {
  background-color: #9c9c9c;
  top: 100%;
  z-index: 1;
}
.ele-leg-front .ele-foot {
  background-color: #9c9c9c;
}

.ele-leg-back {
  background-color: #828282;
  top: 95%;
}
.ele-leg-back .ele-foot {
  background-color: #828282;
}
.ele-leg-back .ele-foot:before, .ele-leg-back .ele-foot:after {
  background-color: #bababa;
}

.ele-leg-1 {
  -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
  right: 57.5%;
}
.ele-leg-1:before {
  -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
}
.ele-leg-1 .ele-foot {
  -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
}

.ele-leg-2 {
  -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
  right: 67.5%;
}
.ele-leg-2:before {
  -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
}
.ele-leg-2 .ele-foot {
  -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
}

.ele-leg-3 {
  -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
  right: 5%;
}
.ele-leg-3:before {
  -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
}
.ele-leg-3 .ele-foot {
  -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
          animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;
}

.ele-leg-4 {
  -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
  right: 15%;
}
.ele-leg-4:before {
  -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
}
.ele-leg-4 .ele-foot {
  -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
          animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;
}

.ele-foot:before, .ele-foot:after {
  background-color: #E0E0E0;
  border-radius: 10px 10px 0 0;
  bottom: 0;
  content: '';
  height: 15px;
  position: absolute;
  width: 11px;
}

.ele-foot {
  border-radius: 25px 25px 35% 40%;
  bottom: -17.5px;
  box-shadow: -1px 1px 0px #808080;
  height: 35px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-49%) rotateZ(0deg);
          transform: translateX(-49%) rotateZ(0deg);
  width: 55px;
}
.ele-foot:before {
  right: -7.5px;
}
.ele-foot:after {
  bottom: -3px;
  right: 5px;
}

@-webkit-keyframes leg-animation {
  0% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  }
  25% {
    height: 40px;
  }
  50% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
  }
  75% {
    height: 65px;
  }
  100% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  }
}

@keyframes leg-animation {
  0% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  }
  25% {
    height: 40px;
  }
  50% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
  }
  75% {
    height: 65px;
  }
  100% {
    height: 65px;
    -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
            transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  }
}
@-webkit-keyframes foot-animation {
  0% {
    -webkit-transform: translateX(-49%) rotateZ(-10deg);
            transform: translateX(-49%) rotateZ(-10deg);
  }
  15% {
    -webkit-transform: translateX(-49%) rotateZ(5deg);
            transform: translateX(-49%) rotateZ(5deg);
  }
  40% {
    -webkit-transform: translateX(-49%) rotateZ(0deg);
            transform: translateX(-49%) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateX(-49%) rotateZ(15deg);
            transform: translateX(-49%) rotateZ(15deg);
  }
  100% {
    -webkit-transform: translateX(-49%) rotateZ(-10deg);
            transform: translateX(-49%) rotateZ(-10deg);
  }
}
@keyframes foot-animation {
  0% {
    -webkit-transform: translateX(-49%) rotateZ(-10deg);
            transform: translateX(-49%) rotateZ(-10deg);
  }
  15% {
    -webkit-transform: translateX(-49%) rotateZ(5deg);
            transform: translateX(-49%) rotateZ(5deg);
  }
  40% {
    -webkit-transform: translateX(-49%) rotateZ(0deg);
            transform: translateX(-49%) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translateX(-49%) rotateZ(15deg);
            transform: translateX(-49%) rotateZ(15deg);
  }
  100% {
    -webkit-transform: translateX(-49%) rotateZ(-10deg);
            transform: translateX(-49%) rotateZ(-10deg);
  }
}
@-webkit-keyframes foot-shadow-animation {
  0% {
    -webkit-transform: translateX(-50%) rotateZ(-8deg);
            transform: translateX(-50%) rotateZ(-8deg);
    bottom: -20px;
    width: 50px;
  }
  25% {
    bottom: -30px;
    width: 40px;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateZ(13deg);
            transform: translateX(-50%) rotateZ(13deg);
    bottom: -20px;
    width: 50px;
  }
  100% {
    -webkit-transform: translateX(-50%) rotateZ(-8deg);
            transform: translateX(-50%) rotateZ(-8deg);
    bottom: -20px;
    width: 50px;
  }
}
@keyframes foot-shadow-animation {
  0% {
    -webkit-transform: translateX(-50%) rotateZ(-8deg);
            transform: translateX(-50%) rotateZ(-8deg);
    bottom: -20px;
    width: 50px;
  }
  25% {
    bottom: -30px;
    width: 40px;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateZ(13deg);
            transform: translateX(-50%) rotateZ(13deg);
    bottom: -20px;
    width: 50px;
  }
  100% {
    -webkit-transform: translateX(-50%) rotateZ(-8deg);
            transform: translateX(-50%) rotateZ(-8deg);
    bottom: -20px;
    width: 50px;
  }
}
@-webkit-keyframes eyes-blink {
  0% {
    height: 10px;
  }
  3% {
    height: 1px;
  }
  5% {
    height: 10px;
  }
  100% {
    height: 10px;
  }
}
@keyframes eyes-blink {
  0% {
    height: 10px;
  }
  3% {
    height: 1px;
  }
  5% {
    height: 10px;
  }
  100% {
    height: 10px;
  }
}
@-webkit-keyframes ele-movement {
  0% {
    -webkit-transform: translate3D(-50%, -54%, 0);
            transform: translate3D(-50%, -54%, 0);
  }
  50% {
    -webkit-transform: translate3D(-50%, -57%, 0);
            transform: translate3D(-50%, -57%, 0);
  }
  100% {
    -webkit-transform: translate3D(-50%, -54%, 0);
            transform: translate3D(-50%, -54%, 0);
  }
}
@keyframes ele-movement {
  0% {
    -webkit-transform: translate3D(-50%, -54%, 0);
            transform: translate3D(-50%, -54%, 0);
  }
  50% {
    -webkit-transform: translate3D(-50%, -57%, 0);
            transform: translate3D(-50%, -57%, 0);
  }
  100% {
    -webkit-transform: translate3D(-50%, -54%, 0);
            transform: translate3D(-50%, -54%, 0);
  }
}
@-webkit-keyframes mouth-movement {
  0% {
    height: 160px;
    width: 28px;
  }
  50% {
    height: 150px;
    width: 30px;
  }
  100% {
    height: 160px;
    width: 28px;
  }
}
@keyframes mouth-movement {
  0% {
    height: 160px;
    width: 28px;
  }
  50% {
    height: 150px;
    width: 30px;
  }
  100% {
    height: 160px;
    width: 28px;
  }
}
@-webkit-keyframes mouth-after-movement {
  0% {
    width: 37px;
  }
  50% {
    width: 40px;
  }
  100% {
    width: 37px;
  }
}
@keyframes mouth-after-movement {
  0% {
    width: 37px;
  }
  50% {
    width: 40px;
  }
  100% {
    width: 37px;
  }
}
@-webkit-keyframes tail-movement {
  0% {
    -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
            transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
  }
  50% {
    -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
            transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
  }
  100% {
    -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
            transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
  }
}
@keyframes tail-movement {
  0% {
    -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
            transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
  }
  50% {
    -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
            transform: translate3d(-5%, 65%, 0) rotateZ(-18deg);
  }
  100% {
    -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
            transform: translate3d(-3%, 69%, 0) rotateZ(-20deg);
  }
}
@-webkit-keyframes head-movement {
  0% {
    -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
            transform: translate3d(80%, -22%, 0) rotateZ(3deg);
  }
  25% {
    -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
            transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
            transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
  }
  75% {
    -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
            transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
            transform: translate3d(80%, -22%, 0) rotateZ(3deg);
  }
}
@keyframes head-movement {
  0% {
    -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
            transform: translate3d(80%, -22%, 0) rotateZ(3deg);
  }
  25% {
    -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
            transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
  }
  50% {
    -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
            transform: translate3d(80%, -23%, 0) rotateZ(-3deg);
  }
  75% {
    -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
            transform: translate3d(80%, -22.5%, 0) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg);
            transform: translate3d(80%, -22%, 0) rotateZ(3deg);
  }
}
@-webkit-keyframes body-movement {
  0% {
    height: 160px;
    margin-top: 5px;
  }
  50% {
    height: 162.5px;
    margin-top: 2.5px;
  }
  100% {
    height: 160px;
    margin-top: 5px;
  }
}
@keyframes body-movement {
  0% {
    height: 160px;
    margin-top: 5px;
  }
  50% {
    height: 162.5px;
    margin-top: 2.5px;
  }
  100% {
    height: 160px;
    margin-top: 5px;
  }
}
@-webkit-keyframes ear-movement {
  0% {
    height: 115px;
  }
  50% {
    height: 110px;
  }
  100% {
    height: 115px;
  }
}
@keyframes ear-movement {
  0% {
    height: 115px;
  }
  50% {
    height: 110px;
  }
  100% {
    height: 115px;
  }
}
@-webkit-keyframes eyebrows-movement {
  0% {
    height: 18px;
  }
  50% {
    height: 20px;
  }
  100% {
    height: 18px;
  }
}
@keyframes eyebrows-movement {
  0% {
    height: 18px;
  }
  50% {
    height: 20px;
  }
  100% {
    height: 18px;
  }
}




著作权归作者所有。 
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：付博瀚
来源：付博瀚个人博客
链接: https://www.fubohan.com/

上一篇：多个运动的小球

下一篇：canvas butterfly蝴蝶纷飞

相关文章

    无相关信息

文章评论

Top