css精灵图写序列帧动画

本文介绍了如何利用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文件夹下生成对应的样式文件。

2.写序列帧动画

这里运用到的最重要的就是animation中的steps

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值