CSS3做动物走路效果详解编程语言

CSS3做动物走路效果

采用的CSS3切换序列帧做

核心代码如下

.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
 }
}

365px就是序列帧图片的宽度
序列帧图(

../images/role5.png

<img class=”alignnone size-medium wp-image-692″ src=”http://newmiracle.cn/wp-content/uploads/2016/12/role5-300×71.png” alt=”role5″ width=”300″ height=”71″ />

&nbsp;

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

但是此方法不能用自适应