最近写一个H5要求序列帧动画比较哆但是却仅仅是作为装饰，而不对其进行操作为了减小内存以及更好的性能选择了css动画+css精灵图的方式。

1.找工具制作css精灵图

    听说Win系统嘚css sprite很好用，可惜mac系统不行所以先安利大家一个插件：gulp.spritesmith，用gulp作为构建工具可以获得css样式文件，css generator也行但个人感觉这个更快，并且生成css文件直接引用会特别方便以下是代码：

 

 
 

 运行gulp sprite后会在images文件夹下生成一张精灵图，在css文件夹下生成对应的样式文件
 
 

 

 这里运用到的最重要的就昰animation中的steps函数。
 
 

 先说下steps函数： steps 函数指定了一个阶跃函数第一个参数指定了时间函数中的间隔数量（必须是正整数）；第二个参数可选，接受 start 和 end 两个值指定在每个间隔的起点或是终点发生阶跃变化，默认为 end
 
 

 假如你合成的图片尺寸是100x4000，帧数是10那么你就可以这样定义一个动畫：
 
 

 

 动画就动起来了，可以节省很多空间及性能
 
 

 
 

发布了29 篇原创文章 · 获赞 35 · 访问量 1万+