利用CSS Sprite实现PNG图片动画

CSS_Sprite

利用css sprite来实现PNG图片动画,就像GIF一样,也许你会问为什么不直接用GIF来制作,哪是因为GIF制作出来的色彩实际太低,为了得到更好的颜色,所以使用PNG是最好不过了。
HTML部分:
[cce_html]
<img src=”图片地址” />
<div></div>
[/cce_html]

 

CSS部分:
[cce_css]
div {
width: 50px;
height: 72px;
background-image: url(“图片地址”);
animation: play 1s steps(10) infinite;
}
@keyframes play {
0% { background-position: 0px 0; }
100% { background-position: -500px 0; }
}
[/cce_css]

 

演示地址:DEMO
这个动画一共有10帧,每帧50px,然后我们用CSS3的animation来实现这个动画,如果你想修改动画播放速度,哪么你修改1s这个时间即可。

这是一个很好代替GIF动画的方案,我们可以利用这个方案画制作高色彩的图片动画或是制作一些Loadding进度条等等,我想日后你会用得上这个方法。