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

PetitQ 图片/图形 2019-1-27 2.29K 3 0

这是一款使用纯 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 是大象身体的动画。

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

已有 573 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

七里茶坊发布于： 2020年1月7日下午3:59

登录以回复

请问transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);这个为什么要将两个translate3d分开写两遍？
- PetitQ发布于： 2020年1月7日下午4:04
  
  登录以回复
  
  感谢您关注本站，年底订单量比较大无法解答您的问题，抱歉了。
七里茶坊发布于： 2020年1月7日下午4:03

登录以回复

transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);这样写前面定义的属性不会被覆盖吗？