CSS3做动物走路效果

CSS3做动物走路效果

采用的CSS3切换序列帧做

核心代码如下
<pre>.game .role {
width: 60px;
height: 86px;
position: absolute;
top: -83px;
background-image: url(../images/role5.png);
background-repeat: no-repeat
}

.roleRunAm {
-webkit-animation-name: roleRunAm;
-webkit-animation-duration: 0.9s;
-webkit-animation-timing-function: steps(6);
-webkit-animation-iteration-count: infinite;
animation-name: roleRunAm;
animation-duration: 0.9s;
animation-timing-function: steps(6);
animation-iteration-count: infinite
}

@-webkit-keyframes roleRunAm {
0% {
background-position: 0 0
}
100% {
background-position: -365px 0
}
}

@keyframes roleRunAm {
0% {
background-position: 0 0
}
100% {
background-position: -365px 0
}
}
</pre>
365px就是序列帧图片的宽度
序列帧图(
<pre>../images/role5.png</pre>
<img class="alignnone size-medium wp-image-692" src="http://newmiracle.cn/wp-content/uploads/2016/12/role5-300x71.png" alt="role5" width="300" height="71" />

&nbsp;

播放动画直接addclass roleRunAm 停止就removeclass 这个可以结合位移做 而且不会卡出现闪烁的现象 如果用其他setTimeout 递归切换图片肯定卡

但是此方法不能用自适应