前端倒计时取巧的做法

前端倒计时取巧的做法

今天研究公众号里面有些文章内部的组件,发现有这样一个组件
图片

一开始以为是用 js 来做的,通过查看代码来看并不是

他用了一种比较取巧的方式,用四张 Gif 图,没有用 js 代码就实现了这个效果

用四个 span 标签,背景图是四张固定的 gif,依靠每张 gif 的帧率不同。

比如第四张 gif 是一秒动一帧,第三张是十秒钟动一帧,第二张图片 60 秒动一帧,

以此类推,然后 gif 都是无限循环的。

第四张 gif 从 0 到 9 无限循环,第三张从 0 到 5 无限循环

属于在 gif 层面做了这个逻辑

对这个只给用户看着玩的东西。可以节约很多性能