css - 有没有办法使用 CSS3 增加一个数字？

Question

我对 JavaScript 非常熟悉，我意识到我可以用 JS 做到这一点，但我不想——我宁愿能够在 CSS 中做到这一点，或者根本不这样做，因为我坚持CSS 用于展示的规则。

不过，我想知道是否有办法逐步增加 DIV 中的数字。因此，如果我将 DIV 的整数值从例如 1 更新为 5，那么它将在最终停止在 5 之前显示 2、3 和 4。

在伪代码中，我想它会类似于以下内容：

div.number
{
    // Increment by 1 step every 0.1 seconds.
    transition: increment(1) 0.1s
}

我认为在 CSS3 中没有办法做到这一点，但我很好奇 CSS 到底有多强大。

score 1 · Accepted Answer

制作一个包含大量display:none项目的有序列表，后跟一个可见项目（将编号为 1）

要增加数字，请将 1 更改<li>为display: block，但使用position: absolute使其不可见。这将增加显示项目的数量。

score 0 · Accepted Answer

这可能正在走向解决方案。

将其与伪选择器配对，例如

div:clicked {
   webkit-var-transformlen: 1
}

它的工作方式可能与您想要的方式相似。

2 回答 2