是否有使用CSS3递增数字的方法？

Question

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

但是，我想知道是否有一种方法可以逐步增加DIV中的数字。因此，如果我将DIV的整数值从例如1更新为5，则它将显示2、3和4，然后最终停止在5上。

用伪代码，我想它会像下面这样：

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

我认为CSS3中没有办法做到这一点，但我对CSS的强大功能感到好奇。

Answer 1

创建一个包含大量display:none项目的排序列表，然后是一个可见项目（将被编号为一个）

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

Answer 2

这可能正在寻求解决方案。

与伪选择器配对

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

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

Answer 3