第一种:
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 });
这是图片