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

role5

 

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

但是此方法不能用自适应

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=691

发表评论

电子邮件地址不会被公开。 必填项已用*标注