CSS 计数器的数字递增动效技术解析-电子发烧友网

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=timestamp;
constprogress=Math.min((timestamp-startTimestamp)/duration,1);
obj.innerHTML=Math.floor(progress*(end-start)+start);
if(progress< 1) {
      window.requestAnimationFrame(step);
    }
  };
  window.requestAnimationFrame(step);
}

const obj = document.getElementById("value");
animateValue(obj, 100, 0, 5000);

js.gif

CSS @keyframes 结合 margin

这个思路比较有意思，原理是把数字排成一行，通过动画移动元素位置来显示不同位置的数字：

.counter{
width:100px;
overflow:hidden;
}
.numbers{
width:auto;
display:flex;
animation:countNumber4sinfinitealternate;
animation-timing-function:steps(10);
}
.numbersdiv{
text-align:center;
flex:00100px;
}

@keyframescountNumber{
0%{
margin-left:0px;
}
100%{
margin-left:-1000px;
}
}

keyframe.gif

CSS 计数器入门版

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器

counter-increment - 递增变量

content - 插入生成的内容

counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建。结合 CSS 动画@keyframes，在动画的不同阶段设置不同的递增值，就能实现这个效果：

div::after{
content:counter(count);
animation:counter3slinearinfinitealternate;
counter-reset:count0;
}

@keyframescounter{
0%{
counter-increment:count0;
}
10%{
counter-increment:count1;
}
20%{
counter-increment:count2;
}
30%{
counter-increment:count3;
}
40%{
counter-increment:count4;
}
50%{
counter-increment:count5;
}
60%{
counter-increment:count6;
}
70%{
counter-increment:count7;
}
80%{
counter-increment:count8;
}
90%{
counter-increment:count9;
}
100%{
counter-increment:count10;
}
}

CSS 计数器高配版

更进一步，如果敢用最新特性，其实有更秀的操作，那就是给 CSS 变量设置动画。这个技巧的核心就是设置 CSS 自定义属性为整数类型，这样就能像其他拥有整数类型值的 CSS 属性一样，可用于transition中了。

@property--num{
syntax:'';
initial-value:0;
inherits:false;
}

div{
transition:--num1s;
counter-reset:numvar(--num);
}
div:hover{
--num:10000;
}
div::after{
content:counter(num);
}

不过需要注意的是，目前只有 Chrome （或者 Chromium 内核的浏览器比如 Edge 和 Opera）支持@property语法，因此兼容性是个问题。如果你的页面只针对 Chrome（比如 Electron 应用），那就可以放心使用。否则还是用前面的保守方案吧。

小数也能玩动画

前面说的变量都要求是整数，那能不能让小数也支持这种动画呢？答案是可以的。

可以把小数转成整数。步骤原理是：

注册一个整型的 CSS 变量（即--number），指定初始值initial-value。

用calc将值取整：--integer: calc(var(--number))

@property--integer{
syntax:"";
initial-value:0;
inherits:false;
}
--number:1234.5678;
--integer:calc(var(--number));/*1235*/

如果只需要提取整数部分，可以这样：--integer: max(var(--number) - 0.5, 0)，连calc()都不需要了。类似方法可以提取小数部分。

/*@property--integer*/
--number:1234.5678;
--integer:max(var(--number)-0.5,0);/*1234*/

完整代码：

@property--percent{
syntax:"";
initial-value:0;
inherits:false;
}
@property--temp{
syntax:"";
initial-value:0;
inherits:false;
}
@property--v1{
syntax:"";
initial-value:0;
inherits:false;
}
@property--v2{
syntax:"";
initial-value:0;
inherits:false;
}

div{
font:80040pxmonospace;
padding:2rem;
transition:--percent1s;
--temp:calc(var(--percent)*100);
--v1:max(var(--temp)-0.5,0);
--v2:max((var(--temp)-var(--v1))*100-0.5,0);
counter-reset:v1var(--v1)v2var(--v2);
}
div::before{
content:counter(v1)"."counter(v2,decimal-leading-zero)"%";
}

constgenNumber=()=>{
document.querySelector("div").style.setProperty("--percent",Math.random());
};

setInterval(genNumber,2000);
setTimeout(genNumber);

编辑：hfy

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

javascript

javascript

+关注

关注
0

文章
511

浏览量
53402
CSS

CSS

+关注

关注
0

文章
104

浏览量
14182
DOM

DOM

+关注

关注
0

文章
16

浏览量
9519

计数器怎么判断同步和异步计数器异步和同步的区别

计数器是计算机领域中常用的一种数据结构，用于记录和控制程序执行中的指令或事件发生的次数。计数器可以根据同步机制或异步机制进行操作。本文将详细讨论计数器的同步性和异步性，深入探讨两者的区别及其在实际

发表于 02-22 15:14 •476次阅读

计数器怎么用计数器的作用有哪些

计数器是一种被广泛应用于各个领域的实用工具，在我们的日常生活中随处可见。无论是进行时间统计，协助工作任务的完成，还是用于科学研究和编程技术，在各个领域都起到了重要的作用。本文将详细介绍计数器

发表于 02-03 10:04 •1196次阅读

雷击计数器综合选型应用方案

雷击计数器的基本原理是利用雷电流通过导线时产生的感应电压或电流来驱动计数器的计数。根据计数器的类型，可以分为机械式雷击计数器和电子式雷击

发表于 01-31 09:50 •154次阅读

同步计数器和异步计数器各有什么特点

同步计数器和异步计数器是两种常见的数据结构，它们都用于控制对共享资源的访问。它们的主要作用是实现多个线程之间的同步和并发控制。尽管它们都被用于同步的目的，但它们有很多不同的特点和用例。同步计数器

发表于 12-15 10:49 •639次阅读

4017计数器的工作原理

4017计数器是一种广泛应用于数字电路中的集成电路，它可以用来计数和控制电子设备。4017计数器有10个输出引脚，可以依次输出从0到9的十个数字

发表于 12-15 09:24 •1207次阅读

同步计数器和异步计数器的区别主要在哪里

同步计数器和异步计数器的区别详解同步计数器和异步计数器是数字电路中两种常见的计数器类型，它们在

发表于 12-13 14:54 •2437次阅读

PLC计数器应用简介

基本指令里面找到计数器操作，点击加计数

发表于 11-08 17:22 •1101次阅读

数字电路中的计数器详解

数字电路中一个非常重要的器件就是计数器，即统计脉冲个数。

发表于 10-17 12:46 •2366次阅读

基于Verilog的经典数字电路设计—计数器

在数字系统中，使用得最多的时序电路差不多就是计数器了。计数器不仅能够用于对时钟脉冲计数，还可以用于分频、定时、产生节拍脉冲、产生脉冲序列以及进行数字

发表于 10-09 17:48 •629次阅读

计数器电路原理解析

在学习嵌入式系统的过程中，定时器有关内容的学习是必不可少的一个环节。定时器定时功能的实现，最主要的还是靠其内部的计数器。那么，计数器是如何实现计数功能的呢？接下来就来简单介绍一下计数器

发表于 09-25 14:18 •1519次阅读

数字7段脉冲计数器电路分享

可以使用 7490 解码计数器和 7557A 构建脉冲计数器。该电路可以从9计数到3。所有 2 的引脚 7490 必须连接在一起。

发表于 07-27 15:59 •582次阅读

计数器在程序中有什么作用

PLC程序除了梯形图之外，还有FBD功能块作为指令，这种指令一般都有背景DB。　　PLC计数器指令可使其对内部程序事件和外部过程事件进行计数。这样就可以节约外部计数器的使用。　　每个

发表于 07-04 15:57 •1000次阅读

扭环形计数器与环形计数器的随机序列

扭环形计数器，每次状态变化时仅有一个触发器发生翻转，译码不存在竞争冒险，在n（n≥3）位计数器中，使用2n个状态，有2^n-2n个状态未使用；

发表于 06-27 10:18 •1466次阅读

5位频率计数器电路分享

该数字频率计数器将通过 5 位共阴极显示模块直接读取施加在其输入端的频率。

发表于 04-29 17:36 •1887次阅读

SIMATIC S7-1500 PLC SIMATIC计数器-加计数器

加计数器(S_CU)在计数初始值预置输入端S上有上升沿时，PV装入预置值，输入端CU每检测到一次上升沿，当前计数值CV加1(前提是CV 小于999)；当前计数值大于0时，Q输出为高电平

发表于 04-27 15:38 •1674次阅读