图片/图形

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

也想出现在这里?联系我们
创客主机


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

HTML 结构

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

  1. <div class="ele-container">
  2.  <div class="ele-wrapper">
  3.  <div class="ele-tail"></div>
  4.  <div class="ele-body">
  5.  <div class="ele-head">
  6.  <div class="ele-eyebrows"></div>
  7.  <div class="ele-eyes"></div>
  8.  <div class="ele-mouth"></div>
  9.  <div class="ele-fang-front"></div>
  10.  <div class="ele-fang-back"></div>
  11.  <div class="ele-ear"></div>
  12.  </div>
  13.  </div>
  14.  <div class="ele-leg-1 ele-leg-back">
  15.  <div class="ele-foot"></div>
  16.  </div>
  17.  <div class="ele-leg-2 ele-leg-front">
  18.  <div class="ele-foot"></div>
  19.  </div>
  20.  <div class="ele-leg-3 ele-leg-back">
  21.  <div class="ele-foot"></div>
  22.  </div>
  23.  <div class="ele-leg-4 ele-leg-front">
  24.  <div class="ele-foot"></div>
  25.  </div>
  26.  </div>
  27. </div>

CSS 样式

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

  1. @keyframes leg-animation {
  2.  0% {
  3.  height: 65px;
  4.  -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  5.  transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  6.  }
  7.  25% {
  8.  height: 40px;
  9.  }
  10.  50% {
  11.  height: 65px;
  12.  -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
  13.  transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0);
  14.  }
  15.  75% {
  16.  height: 65px;
  17.  }
  18.  100% {
  19.  height: 65px;
  20.  -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  21.  transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0);
  22.  }
  23. }
  24. @keyframes foot-animation {
  25.  0% {
  26.  -webkit-transform: translateX(-49%) rotateZ(-10deg);
  27.  transform: translateX(-49%) rotateZ(-10deg);
  28.  }
  29.  15% {
  30.  -webkit-transform: translateX(-49%) rotateZ(5deg);
  31.  transform: translateX(-49%) rotateZ(5deg);
  32.  }
  33.  40% {
  34.  -webkit-transform: translateX(-49%) rotateZ(0deg);
  35.  transform: translateX(-49%) rotateZ(0deg);
  36.  }
  37.  50% {
  38.  -webkit-transform: translateX(-49%) rotateZ(15deg);
  39.  transform: translateX(-49%) rotateZ(15deg);
  40.  }
  41.  100% {
  42.  -webkit-transform: translateX(-49%) rotateZ(-10deg);
  43.  transform: translateX(-49%) rotateZ(-10deg);
  44.  }
  45. } 
  46. @keyframes foot-shadow-animation {
  47.  0% {
  48.  -webkit-transform: translateX(-50%) rotateZ(-8deg);
  49.  transform: translateX(-50%) rotateZ(-8deg);
  50.  bottom: -20px;
  51.  width: 50px;
  52.  }
  53.  25% {
  54.  bottom: -30px;
  55.  width: 40px;
  56.  }
  57.  50% {
  58.  -webkit-transform: translateX(-50%) rotateZ(13deg);
  59.  transform: translateX(-50%) rotateZ(13deg);
  60.  bottom: -20px;
  61.  width: 50px;
  62.  }
  63.  100% {
  64.  -webkit-transform: translateX(-50%) rotateZ(-8deg);
  65.  transform: translateX(-50%) rotateZ(-8deg);
  66.  bottom: -20px;
  67.  width: 50px;
  68.  }
  69. }

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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!