请选择 进入手机版 | 继续访问电脑版
查看: 6638|回复: 236

[新手教程] H5纯CSS3逼真的卡通大象走路动画特效

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-4-11 15:22:10 | 显示全部楼层 |阅读模式

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

本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗. 不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。希望大家可以喜欢!

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 
zaqxswcde 发表于 2017-4-11 17:02:00 | 显示全部楼层
666666666666
最佳答案
0 
375742482@qq.co 发表于 2017-4-11 17:10:39 | 显示全部楼层
神啊,终于让我找到了!
最佳答案
0 
zsefvhu 发表于 2017-4-11 17:13:02 | 显示全部楼层
谢谢分享,太感谢啦
最佳答案
0 
hsha 发表于 2017-4-12 11:22:22 | 显示全部楼层
谢谢分享,太感谢啦
最佳答案
0 
ytmaomao 发表于 2017-4-12 14:22:50 | 显示全部楼层
神啊,终于让我找到了!
最佳答案
0 
ym2657480 发表于 2017-4-12 14:33:14 | 显示全部楼层
来学习学习
最佳答案
0 
爱剧社哈哈哈哈 发表于 2017-4-13 00:19:53 | 显示全部楼层
作的非常逼真的卡通大象走
最佳答案
0 
安开图 发表于 2017-4-13 09:05:47 | 显示全部楼层
RE: H5纯CSS3逼真的卡通大象走路动画特效 [修改]
最佳答案
0 
sword2009 发表于 2017-4-13 12:20:27 | 显示全部楼层
价值上万的siki所有视频,以及收费视频,你值得拥有。学完你就是大神!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表