H5纯CSS3逼真的卡通大象走路动画特效
这是一款使用纯CSS3制作的非常逼真的卡通大象走路动画特效的代码。该卡通大象的所有元素都是使用CSS来生成，大象行走动画使用CSS animation来制作，整体效果非常协调。
本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗. 不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。希望大家可以喜欢！
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是大象身体的动画。
阅读原文-演示/下载源码，还有更多更好玩的开源代码等你哦！
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读