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

通常要做一个时钟，还使肯定离不开 JS 定时器。用定有点今天换一种思路，时器用 CSS 来实现一个时钟，离谱如下：

你也可以访问这个CSS time (codepen.io)[1]查看实际效果。还使

当然借用了一点点 JS 用于初始化时间，用定有点整个时钟的时器运行都是由 CSS 完成的，有很多你可能不知道的离谱小技巧，一起看看吧。还使

一、用定有点数字的时器变换

先看看数字是如何变换的。

在以前，离谱如果要实现数字的还使递增变化，可能需要提前准备好这些数字，用定有点例如像这样。时器

然后通过改变位移来实现。

但是，现在有更简洁的方式可以实现了，那就是 CSS @property[2]，不了解这个的可以参考这篇文章：CSS @property，源码库让不可能变可能[3]。这是干什么的呢？简单来讲，可以自定义属性，在这个例子中，可以让数字像颜色一样进行过渡和动画，可能不太懂，直接看例子吧。

假设 HTML 是这样的。

我们让这个自定义变量在页面中展示出来，单纯的 content无法直接显示自定义变量，需要借助定时器，有兴趣的可以参考这篇文章：小tips: 如何借助content属性显示CSS var变量值[4]。

span::after{

counter-reset: num var(--num);

content: counter(num);

}

然后，可以通过:hover改变这个数字。

span:hover::after{

--num: 59

}

很生硬的从 0 变成 59 了，非常符合常规。如果利用 CSS property，情况就不一样了，需要改造的地方很少，先定义一下--h，然后给这个变量一个过渡时间，如下：

@property --h {

syntax: ;

inherits: false;

initial-value: 0;

}

span::after{

transition: 1s --num;

}

神奇的一幕发生了

看着好像不可思议？可以这么理解，云服务器提供商通过@property定义后，这个变量本身可以单独设置过渡了，而不再取决于一些仅支持过渡的属性（color、width等）。甚至还能加上动画，需要用到steps方法，设置动画周期为无限，如下：

@keyframes num {

to {

--num: 10

}

}

span{

animation: num 1s infinite steps(10);

}

时钟的基本运行原理就是这样了，一个无限循环的 CSS 动画！

二、时、分、秒

下面来看具体时、分、秒的实现，HTML 如下：

:

:

给时、分、秒附上初始值。

@property --h {

syntax: ;

inherits: false;

initial-value: 0;

}

@property --m {

syntax: ;

inherits: false;

initial-value: 0;

}

@property --s {

syntax: ;

inherits: false;

initial-value: 0;

}

.hour::after{

counter-reset: hour var(--h);

content: counter(hour);

}

.minitus::after{

counter-reset: minitus var(--m);

content: counter(minitus);

}

.seconds::after{

counter-reset: seconds var(--s);

content: counter(seconds);

}

这里的时、分、秒并没有联动关系，所以各自都需要单独的动画。下面就需要思考一下

很赞哦!（4）