css实现人走路效果,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

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

但是此方法不能用自适应

原文：https://www.cnblogs.com/newmiracle/p/11873015.html