Odometer Effect（无需 JavaScript）

With CSS, we can fill numbers into HTML elements now, thanks to the attr() function and a bit of trickery. This allows design effects to be applied to those numbers. Today, we’ll look at an odometer effect, meaning numbers that “spin” vertically, like the mileage meter on a vehicle. This effect is useful for dynamically displaying numeric values and drawing the user’s attention when the values change, such as a rolling number of online users, a tracked price, or a timer.

使用 CSS，我们现在可以将数字填充到 HTML 元素中，多亏了 attr() 函数和一些小技巧。这允许将设计效果应用到这些数字上。今天，我们来看看一种 odometer 效果，即数字垂直“旋转”，就像车辆上的里程表一样。这种效果对于动态显示数值并在值变化时吸引用户的注意力非常有用，例如滚动显示的在线用户数、跟踪的价格或计时器。

The above example shows an amount upto the place value of millions. I’ll include more examples as we go.

上面的例子显示了一个到百万位值的金额。我会在继续中包含更多例子。

<data id="amount" value="3284915"> </data>Code language: HTML, XML (xml)

<data id="amount" value="3284915"> </data>代码语言：HTML, XML (xml)

The amount is in the value attribute of the <data> element. You can use any other suitable element and attribute combination, like <div data-price="60589">. I’ve not included the comma separator in the HTML now; we’ll get to that later.

金额位于 value 属性中，该属性属于 <data> 元素。您可以使用任何其他合适的元素和属性组合，例如 <div data-price="60589">。我现在没有在 HTML 中包含逗号分隔符；我们稍后会处理它。

Let’s first get the number from the HTML attribute into a CSS variable using the attr(<attr-name> <attr-type>) function.

让我们首先使用 attr(<attr-name> <attr-type>) 函数从 HTML 属性中获取数字到 CSS 变量中。

#amount { --amt: attr(value number); }Code language: CSS (css)

#amount { --amt: attr(value number); }代码语言：CSS (css)

We’ll also need each .digit’s position, for which we use sibling-index().

我们还需要每...