纯CSS3的毫秒倒计时

发布于 6 年前作者 sxie3782 次浏览最后编辑 6 年前来自 share

1. 使用场景:

很多小程序需要使用倒计时功能,可以使用js做秒级倒计,但往往需要到达毫秒级,才能让用户有种紧迫感气氛,如果使用100毫秒setData一次,会是性能大幅度下降,导致页面卡顿。使用gif动图也是一种实现方式,但由于很多地方使用不同的样式倒计时,使用gif维护比较困难。

2. 技术核心:

CSS3帧动画功能,动画的steps()功能

3. 效果演示:

4.代码片段:

https://developers.weixin.qq.com/s/umMJwtmu7vga

5.温馨提示:

来个关注,不定期更新技术文章。

4 回复
leiluo
leiluo1 楼6 年前

点个赞,思路不错

xueli
xueli2 楼6 年前

原理解析:

fang98
fang983 楼6 年前

👍

zzou
zzou4 楼4 年前

文章里把原理介绍完会更好~