css精灵图写序列帧动画

最新推荐文章于 2023-08-10 22:58:18 发布

linxner

最新推荐文章于 2023-08-10 22:58:18 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端

本文链接：https://blog.youkuaiyun.com/linxner/article/details/86468913

本文介绍了如何利用css精灵图和序列帧动画来创建H5装饰性动画，以减少内存占用并提升性能。首先推荐了gulp.spritesmith插件来制作精灵图，然后详细讲解了如何使用animation的steps函数来定义序列帧动画，从而实现图片的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.找工具制作css精灵图。

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

var gulp = require('gulp')
var spritesmith = require('gulp.spritesmith')

gulp.task('sprite', function () {
  gulp.src('./images/*.png').pipe(spritesmith({
    imgName: 'images/main.png', //合成后的图片命名
    cssName: 'css/main.css', //合成后的图标样式
    padding: 0, //雪碧图中两图片的间距
    algorithm: 'binary-tree' //分为top-down、left-right、diagonal、alt-diagonal、binary-tree（可实际操作查看区别）
  })).pipe(gulp.dest('assets')) //图片、样式输出到该文件夹
});

记得安装依赖。

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