Skip to content

winglau14/CSS3-Adaptive-Sprite

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

CSS3技术-雪碧图自适应方案

精灵动画实现的手段太多了,比如定时器的帧动画,CSS3的animation动画,canvas动画
经过我大量实践,我项目使用中最为理想的方式:通过CSS3关键帧运行动画

但是不管如何实现,都需要解决雪碧图的自适应分辨问题
目前来说,雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸

如果只采用一套图如何做自适应处理?
经过研究在移动端可以采用background-size的处理达到这个目的

如何做大量的关键帧动画?靠写死
通过动态脚本生成
如果动画多写一堆的样式就是一个蛋疼的事
所以这里我建议可以采用脚本生成关键帧
通过内联style加载,这样的处理是极好的。

###blogs: http://www.cnblogs.com/aaronjs/p/4744014.html


About

CSS3技术:雪碧图自适应缩放与精灵动画方案

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 55.5%
  • HTML 44.5%