图片/图形

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

创客主机

纯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织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

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