动画编号计数器

CSS数字动画，例如，想象一个数字从1变到2，然后从2变到3，然后从3变到4等等，持续指定时间。就像一个计数器，只不过由我们用于网页上其他设计动画的同一种动画控制。这在设计仪表盘等内容时可能很有用，可以为数字增添一些活力。令人惊奇的是，现在可以在CSS中完成这项工作，无需太多技巧。如果您愿意，可以直接跳到新的解决方案，但首先让我们看看我们过去是如何做的。

一种相当合乎逻辑的数字动画方法是通过JavaScript更改数字。我们可以做一个相当简单的setInterval，但这里有一个更高级的答案，它使用一个接受开始值、结束值和持续时间的函数，因此您可以将其更像动画一样对待：

如果只使用CSS，我们可以使用CSS计数器通过在不同的关键帧调整计数来动画化数字：

另一种方法是将所有数字排成一行，并动画化它们的位置，一次只显示一个数字：

这些示例中一些重复的代码可以使用像Pug（用于HTML）或SCSS（用于CSS）这样的预处理器，它们提供循环以使它们更容易管理，但出于目的故意使用原生代码，以便您可以看到基本思想。

新的CSS解决方案

随着对CSS.registerProperty和@property的最新支持，我们可以动画化CSS变量。诀窍是将CSS自定义属性声明为整数；这样就可以像其他任何整数一样对其进行插值（例如在转换中）。

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

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}</integer>

重要说明：在撰写本文时，此@property语法仅受Chrome（以及其他Chromium内核浏览器，如Edge和Opera）支持，因此它并非跨浏览器兼容。如果您正在构建仅限Chrome的应用程序（例如Electron应用程序），则可以立即使用它，否则请等待。上面提到的演示具有更广泛的支持。

CSS content属性可用于显示数字，但我们仍然需要使用counter将数字转换为字符串，因为content只能输出<string></string>值。

看看我们可以像任何其他动画一样缓动动画吗？超级酷！

类型化的CSS变量也可以在@keyframes中使用：

一个缺点？计数器只支持整数。这意味着小数和分数不在考虑范围内。我们必须以某种方式分别显示整数部分和小数部分。

我们能动画化小数吗？

可以将小数（例如--number）转换为整数。以下是它的工作原理：

1. 注册一个<integer></integer> CSS变量（例如--integer），并指定initial-value。
2. 然后使用calc()进行四舍五入：--integer: calc(var(--number))

在这种情况下，--number将四舍五入到最接近的整数，并将结果存储到--integer中。

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

有时我们只需要整数部分。有一种巧妙的方法可以做到这一点：--integer: max(var(--number) - 0.5, 0)。这适用于正数。这种方法甚至不需要calc()。

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

我们可以以类似的方式提取小数部分，然后使用计数器将其转换为字符串（但请记住，content值必须是字符串）。要显示连接的字符串，请使用以下语法：

content: "string1" var(--string2) counter(--integer) ...

这是一个动画化带小数百分比的完整示例：

其他技巧

因为我们使用的是CSS计数器，所以这些计数器的格式可以是数字以外的其他格式。这是一个将字母“CSS”动画化为“YES”的示例！

哦，还有一个技巧：我们可以通过JavaScript获取自定义属性的计算值来调试值：

getComputedStyle(element).getPropertyValue('--variable')

就是这样！如今CSS的功能令人惊叹。

以上是动画编号计数器的详细内容。更多信息请关注PHP中文网其他相关文章！