利用CSS Sprite实现PNG图片动画

Sponsor

如题，今天将会和大家讲解如何利用CSS Sprite（CSS雪碧）来实现PNG图片动画，就像GIF一样，也许你会问为什么不直接用GIF来制作，哪是因为GIF制作出来的色彩实际太低，为了得到更好的颜色，所以使用PNG是最好不过了。

1.HTML代码：

<img src="图片地址" />
<div></div>

2.CSS代码：

div {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");
    animation: play 1s steps(10) infinite;
}
@keyframes play {
      0% { background-position:    0px 0; }
    100% { background-position: -500px 0; }
}

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

演试地址：DEMO

总结

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

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。