纯CSS3逼真的卡通大象走路动画特效

这是一款使用纯CSS3制作的非常逼真的卡通大象走路动画特效。该卡通大象的所有元素都是使用CSS来生成，大象行走动画使用CSS animation来制作，整体效果非常协调。

使用方法

HTML结构

大象身体的各个部分由各种嵌套div元素组成，每一个div元素的class都代表了这个div代表的是大象身体的那个部分。

<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>              
              

CSS样式

大象的行走动画主要在其脚部，大象的每一条腿由两个部分组成：一个是整条腿div.ele-leg-n，另一部分第它里面的div.ele-foot，这是大象的脚掌。大象的腿部会执行leg-animation CSS3 animation动画，而脚掌部分则会执行foot-animation CSS3 animation动画。另外脚部的阴影则是执行foot-shadow-animation动画。

@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 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-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;
  }
}               
              

其它的CSS animation动画还有eyes-blink，这是大象眨眼的动画；mouth-movement和mouth-after-movement是大象鼻子的动画；tail-movement是大象尾巴的动画；head-movement是大象整个头部的动画；body-movement是大象身体的动画。