纯CSS实现炫酷文本时钟

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

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

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

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

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

实现过程

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

界面布局

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

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

<span class="hour h4">F O U R</span> Y <span class="hour h5">F I V E</span> <span class="hour h2">T W O</span><br/>