你还在用定时器吗？有点离谱的CSS电子钟

通常做一个时钟，肯定离不开JS定时器。今天我们换个思路，用CSS实现一个时钟，如下：也可以访问这个CSS时间（codepen.io）[1]看看实际效果。当然，用了一点JS来初始化时间。整个时钟操作由CSS完成。还有很多你可能不知道的技巧，一起来看看吧。1.数字的变换我们先来看看数字是如何进行变换的。以前如果要实现数字的增量变化，可能需要提前准备好这些数字，比如像这样。然后通过改变位移来做到这一点。不过，现在有一种更简洁的实现方式，那就是CSS@property[2]。不知道的可以参考这篇文章：CSS@property，化不可能为可能[3]。这个是来做什么的？简单来说，就是可以自定义属性。在此示例中，数字可以像颜色一样进行转换和动画处理。可能大家看不懂，还是看例子吧。假设HTML是这样的。我们让这个自定义变量显示在页面上。简单内容不能直接显示自定义变量，需要定时器。有兴趣的可以参考这篇文章：小技巧：如何使用content属性显示CSSvar变量值[4]。span::after{计数器重置：numvar(--num);content:counter(num);}然后，可以通过:hover更改数字。span:hover::after{--num:59}从0变到59很突兀，很常规。如果使用CSS属性，情况就不同了。需要修改的地方很少。先定义--h，然后给这个变量一个过渡时间，如下：@property--h{syntax:'';继承：假；initial-value:0;}span::after{transition:1s--num;}神奇的一幕发生了似乎不可思议？可以这样理解，被@property定义后，变量本身可以独立设置transition，而不是依赖于一些只支持transition的属性（color，width等）。甚至可以添加动画，需要使用steps方法，设置动画循环为无限，如下：@keyframesnum{to{--num:10}}span{animation:num1sinfinitesteps(10);时钟的基础这就是它的工作原理，一个无限循环的CSS动画！2、时、分、秒我们来看具体的时、分、秒的实现。HTML如下：::