欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > css3库 > CSS3 animation > 纯CSS3逼真的卡通大象走路动画特效

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

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

关键词:纯css3,css动画,走路动画,css大象,阴影动画,css3大象行走动画,css3库,css3animation

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

简要教程

这是一款使用纯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-movementmouth-after-movement是大象鼻子的动画;tail-movement是大象尾巴的动画;head-movement是大象整个头部的动画;body-movement是大象身体的动画。

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/css3_css3animation/7909.html

 在线演示  免费下载
编号:201802080000007909
大小:0.01MB
上传时间:2018-02-12 11:02
素材由用户"q18763534680"上传分享。

标签

最新推荐素材

与纯CSS3逼真的卡通大象走路动画特效相关的素材

.