有没有办法使用CSS3增加数字？

Question

我对JavaScript非常熟悉，并且我意识到我可以用JS做到这一点，但我不想 - 我宁愿能够在CSS中完成它，或者根本不能这样做，因为我坚持使用CSS进行演示的规则。

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

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

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

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

Answer 1

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

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

Answer 2

Webkit最近添加了对CSS变量的支持： http://dev.w3.org/csswg/css-variables/ 和 http://www.webmonkey.com/2012/06/css-variables-webkit-brings-the-css-jackalope-to-life/

这可能正朝着解决方案的方向发展。

将它与

之类的伪选择器配对

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

它可能与你想要的方式类似。