纯CSS实现炫酷文本时钟特效

这篇文章主要为大家详细介绍了如何通过纯CSS实现炫酷的文本时钟特效，文中的示例代码讲解详细，对我们掌握CSS有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。

在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。

实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。

以下是本次实现的主要几点：

整体文本布局呈正方形，包含需要高量的英文单词，但也包含一些不需要高亮的字母，仅是为了组合整个正方形布局
时间的跳动不是以一分钟级别的进行，而是以英文5分钟级别跳动
当前时间所需单词需要高亮
不需要使用JS定时器，仅做初始化时间获取

实现过程

这个时钟的核心设计理念是利用英文文本显示时间，时钟面上的每个字母都对应一个特定的时间点，例如，TEN、FIVE、QUARTER、HALF等，用于表示分钟，而下方的ONE、TWO、THREE等则表示小时。这种设计使得时钟在视觉上独特且富有创意。

界面布局

首先对于HTML中的单词布局，主要目标是将每行的单词排列成相同的长度。如果某些单词长度不足，可以使用其他不需要的字符进行填充，像如下没有高亮的字符都是为了填充长度而增加的字符。

摘取部分代码示例，只有在span标签内的才是真正有用会高亮的词：

F O U R Y F I V ET W O
E I G H T C E L E V E N
S E V E N D T W E L V E

CSS样式

通过上面的html可以发现span标签的class代码所对应的小时和分钟，hour代码小时，h0 - h11 代表对应的12个小时。分钟则是以min表示，因为分钟都是以5分钟为单位显示，所以会有这些calss m5 m10 m15 m20 m25 m35 m40，除此之外，还会有以下关系：

Q U A R T E RH A L FT OP A S T

动画实现

这一块是最复杂的实现，如何让单词自动变化且不使用JS。核心的动画和颜色变化是通过CSS实现的，这里使用了Sass来简化和优化代码。

使用Sass定义是否需要高亮的变量和一小时的秒数用于后面动画的计算，也可以通过重置此变量为更小的值看到文本时钟更快速的变化：

$current: #dddd55; $disable: rgba(0,0,0,0.5); $time: 3600s;

然后通过@keyframes定义动画，这些动画控制文本颜色的变化，从而突出显示当前时间。例如：

@keyframes m0m30 {} @keyframes m5m25m35m55 {} @keyframes m10m50 {} @keyframes m20m25m35m40 {} @keyframes m15m45 {} .m0, .m30 { animation: infinite m0m30 step-end $time; } .m5 { animation: infinite m5m25m35m55 step-end $time; } .m15, .m45 { animation: infinite m15m45 step-end $time; }

把显示相同语法的时间点放置在一个@keyframes中，再关联到对应的元素中进行高亮显示。什么时候高亮取决于一个很重要的属性，animation-delay，这里原作者用了一段循环代码进行处理，给每个时间段设置不同的动画延迟执行时间，代码如下：

$k: 0; @while $k <60 { .minute#{$k} $l: 0; @while $l < 60 .m#{$l} animation-delay: - $time * $k>

在这个内部循环中，定义了一个类名为.m#{$l}的选择器，其中#{$l}会被替换为当前的$l值。然后，设置了animation-delay属性，其值为-$time * $k / 60。这样可以根据时间的变化来控制动画的延迟。小时方面生成了一个.h#{$j}的类名选择器，同样设置了animation-delay属性，其值为(-$time*5/12 + $time*($j - $i)) - ($time * $k / 60)。这样可以根据小时和分钟的变化来控制时钟的动画延迟。

通过变量的循环和选择器的嵌套，实现了不同元素动画延迟的控制，从而呈现出一个特殊的时钟效果。