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

文章
519

浏览量
53897
CSS

CSS

+关注

关注
0

文章
109

浏览量
14391
DOM

DOM

+关注

关注
0

文章
18

浏览量
9591

雷击计数器的概述与应用分析

雷击计数器 是一种用于监测和记录电力系统、通信系统、建筑物等关键设施遭受雷击次数的设备。它能够有效地帮助管理人员掌握雷电活动的情况，以便进行预防性维护和风险评估。雷击计数器根据工作原理可以分为无源

发表于 10-21 10:31 •333次阅读

频率计数器的技术原理和应用场景

频率计数器，又称频率计，是一种专门用于测量信号频率的电子测量仪器。以下是对其技术原理和应用场景的详细分析：一、技术原理频率计数器的技术原理基

发表于 10-18 14:03

计数器的特点和参数

计数器作为一种常用的电子元件，在电子设备和系统中扮演着至关重要的角色。它们不仅用于存储和增减数字值，还广泛应用于时序和频率测量、事件计数、控制步进电机和伺服系统、错误检测和纠正以及计算机数据存储和操作等领域。以下将详细阐述

发表于 08-29 14:54 •1247次阅读

计数器同步和异步怎么判断

计数器同步和异步是数字电路设计中的一个重要概念，它们在很多应用场景中都扮演着关键角色。一、计数器概述 计数器是一种常见的数字电路，它可以对

发表于 07-23 11:14 •1628次阅读

SN74HC193-Q1 4位同步递增/递减计数器数据表

电子发烧友网站提供《SN74HC193-Q1 4位同步递增/递减计数器数据表.pdf》资料免费下载

发表于 06-04 10:46 •0次下载

SN74HC193-Q1 4位同步<b class='flag-5'>递增</b>/递减<b class='flag-5'>计数器</b>数据表

二进制串行计数器工作原理是什么？

的工作原理进行深入解析，帮助你更好地理解这一数字电路的核心组件。一、二进制串行计数器的基本概念二进制串行计数器是一种基于二进制数制的计数器

发表于 05-28 15:52 •914次阅读

同步计数器和异步计数器的区别

在数字电子领域中，计数器是一种用于统计脉冲信号数量的重要设备。其中，同步计数器和异步计数器是两种不同类型的计数器，它们在工作原理、特性以及应

发表于 05-24 14:36 •4626次阅读

同步计数器的主要类型和工作原理

在数字电子领域，计数器是一种用于统计脉冲信号数量的设备，广泛应用于各种数字系统和电路中。其中，同步计数器作为计数器的一种重要类型，具有其独特

发表于 05-24 14:34 •1496次阅读

计数器的结构和工作原理

计数器，作为一种基础的电子设备，广泛应用于数字电路、计算机系统以及工业自动化等多个领域。它通过对输入信号进行计数和状态转换，实现对事件发生次数的统计和显示。本文将深入探讨计数器的定义、

发表于 05-23 15:34 •5148次阅读

脉冲计数器的分类和作用

在电子技术和数字系统中，脉冲计数器作为一种基本而重要的逻辑器件，其应用广泛且功能多样。脉冲计数器不仅能够实现基本的计数操作，还具备多种输出功

发表于 05-15 17:11 •1298次阅读

简单认识脉冲计数器

在数字电路和电子测量领域中，脉冲计数器作为一种基本而重要的工具，其应用十分广泛。脉冲计数器，也被称为脉冲频率计或脉冲数计，主要用于统计和测量输入脉冲信号的频率或数量。本文将详细阐述脉冲计数器

发表于 05-15 17:08 •1871次阅读

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

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

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

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

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

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

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

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

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

搜索历史

CSS 计数器的数字递增动效技术解析

评论

雷击计数器的概述与应用分析

频率计数器的技术原理和应用场景

正交解码计数器卡

计数器的特点和参数

计数器同步和异步怎么判断

SN74HC193-Q1 4位同步递增/递减计数器数据表

二进制串行计数器工作原理是什么？

同步计数器和异步计数器的区别

同步计数器的主要类型和工作原理

计数器的结构和工作原理

脉冲计数器的分类和作用

简单认识脉冲计数器

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

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

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