CSS计数器的妙⽤：数字递增动效
CSS 计数器的妙⽤：数字递增动效
CSS 计数器是由 CSS 维护的变量，这些变量可根据 CSS 规则增加从⽽跟踪使⽤次数。我们可以利⽤这个特性，根据⽂档位置来调整内容表现，⽐如显⽰列表编号。
最近在公司官⽹就⽤到了这个特性：
image.png
image.png
因为这⾥的序号只是个装饰，并不强调先后顺序。⽐起使⽤真实 DOM 元素显⽰序号，CSS 计数器更加简洁灵活，万⼀内容顺序需要调整，序号也不受影响。
有时候我们会看到某些 Dashboard 界⾯有数字快速滚动的效果，⽐如招⾏ App 的账户余额。这种效果怎么实现呢？本⽂会介绍⼏种⽅法。
JavaScript ⽅案
最简单的莫过于⽤ setInterval定时器了，定期修改 DOM 内容就⾏。不过为了实现更平顺的动画效果，更推荐使⽤requestAnimationFrame:
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
}
};
}
const obj = ElementById(“value”);
animateValue(obj, 100, 0, 5000);
js.gif
js.gif
CSS @keyframes 结合 margin
这个思路⽐较有意思，原理是把数字排成⼀⾏，通过动画移动元素位置来显⽰不同位置的数字：
1
2
3
4
5
6
7
8
9
10
.counter { width: 100px; overflow: hidden; } .numbers { width: auto; display: flex; animation: countNumber 4s infinite alternate; animation-timing-function: steps(10); } .numbers div { text-align: center; flex: 0 0 100px; }
@keyframes countNumber {
0% {
margin-left: 0px;
}
100% {
margin-left: -1000px;
}
}
keyframe.gif
keyframe.gif
CSS 计数器⼊门版
CSS 计数器使⽤到以下⼏个属性：
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插⼊⽣成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
要使⽤ CSS 计数器，得先⽤ counter-reset 创建。结合 CSS 动画 @keyframes，在动画的不同阶段设置不同的递增值，就能实现这个效果：
div::after { content: counter(count); animation: counter 3s linear infinite alternate; counter-reset: count 0; }
@keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 1;
}
20% {
counter-increment: count 2;
}
30% {
counter-increment: count 3;
}
40% {
counter-increment: count 4;
}
50% {
counter-increment: count 5;
}
60% {
counter-increment: count 6;
}
70% {
counter-increment: count 7;
}
80% {
counter-increment: count 8;
}
90% {
counter-increment: count 9;
}
100% {
counter-increment: count 10;
}
css最新
}
CSS 计数器⾼配版
更进⼀步，如果敢⽤最新特性，其实有更秀的操作，那就是给 CSS 变量设置动画。这个技巧的核⼼就是设置 CSS ⾃定义属性为整数类型，这样就能像其他拥有整数类型值的 CSS 属性⼀样，可⽤于 transition中了。
@property --num {
syntax: ‘’;
initial-value: 0;
inherits: false;
}
div {
transition: --num 1s;
counter-reset: num var(–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: 800 40px monospace;
padding: 2rem;
transition: --percent 1s;
–temp: calc(var(–percent) * 100);
–v1: max(var(–temp) - 0.5, 0);
–v2: max((var(–temp) - var(–v1)) * 100 - 0.5, 0);
counter-reset: v1 var(–v1) v2 var(–v2);
}
div::before {
content: counter(v1) “.” counter(v2, decimal-leading-zero) “%”;
}
const genNumber = () => {
document.querySelector(“div”).style.setProperty("–percent", Math.random());
};
setInterval(genNumber, 2000);
setTimeout(genNumber);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。