html用css完成动画效果图,利用CSS Sprite实现PNG图片动画

利用CSS Sprite实现PNG图片动画

12月 6, 2012

评论 (6)

Sponsor

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

1.HTML代码：

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进度条等等，我想日后你会用得上这个方法。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

qingshanli1988 -

2014 年 07 月 24 日 下午 9:49

误导人啊,没法用,也不写清楚….

小叉子 -

2013 年 03 月 18 日 下午 3:54

我想知道你的多说评论框的代码

小叉子 -

2013 年 03 月 18 日 下午 4:05

谢谢

tenghuang -

2013 年 02 月 04 日 下午 12:50

老赵 -

2012 年 12 月 10 日 下午 8:59

这个必需顶，太好玩了

鲁谷 -

2012 年 12 月 06 日 下午 3:38

这个好，很棒。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站