逐帧动画 两种实现方式 css和js

第一种：

css部分：

<style>

#foxtail{

background: url(../img/foxtail.png) 0 0 no-repeat;

width: 156px;

height: 156px;

}

@keyframes playfox{

0%{background-position: -6864px 0;}

100%{background-position: 0 0;}

}

@-webkit-keyframes playfox{

0%{background-position: -6864px 0;}

100%{background-position: 0 0;}

}

#foxtail{

animation: playfox 3.75s steps(44) infinite;*/

}

</style>

html部分

<div id="foxtail"></div>

 

第二种方法：

css部分：

#foxtail{

background: url(../img/foxtail.png) 0 0 no-repeat;

width: 156px;

height: 156px;

}

js部分：

需引进jquery.spritely.js

 

$("#foxtail").sprite({ fps: 12, no_of_frames: 44 });

 

 

这是图片