CSS图书馆 » HTML & CSS » 利用CSS Sprite实现PNG图片动画

利用CSS Sprite实现PNG图片动画

发表于: HTML & CSS. 评论 (6)
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进度条等等,我想日后你会用得上这个方法。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论6 Responses to “利用CSS Sprite实现PNG图片动画”

  1. qingshanli1988 - 回复

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

  2. 小叉子 - 回复

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

  3. tenghuang - 回复

    [赞]

  4. 老赵 - 回复

    这个必需顶,太好玩了

  5. 鲁谷 - 回复

    这个好,很棒。


{ 发表评论 }