逐帧动画 两种实现方式 css和js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了逐帧动画 两种实现方式 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 });
这是图片
以上是关于逐帧动画 两种实现方式 css和js的主要内容，如果未能解决你的问题，请参考以下文章