CSS 计数器的妙用:数字递增动效
持续进步的同学都关注了“1024译站” CSS 计数器是由 CSS 维护的变量,这些变量可根据 CSS 规则增加从而跟踪使用次数。我们可以利用这个特性,根据文档位置来调整内容表现,比如显示列表编号。 最近在公司官网就用到了这个特性: image.png 因为这里的序号只是个装饰,并不强调先后顺序。比起使用真实 DOM 元素显示序号,CSS 计数器更加简洁灵活,万一内容顺序需要调整,序号也不受影响。 有时候我们会看到某些 Dashboard 界面有数字快速滚动的效果,比如招行 App 的账户余额。这种效果怎么实现呢?本文会介绍几种方法。 JavaScript 方案 最简单的莫过于用setInterval定时器了,定期修改 DOM 内容就行。不过为了实现更平顺的动画效果,更推荐使用requestAnimationFrame: functionanimateValue(obj,start,end,duration){letstartTimestamp=null;conststep=(timestamp)=>{if(!startTimestamp)startTimestamp=times...
