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

首页

前端开发

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

热心网友

转载

2026-04-28

纯CSS文本时钟：一场关于时间的视觉艺术

眼前这个效果，可不是你熟悉的那种带有时针分针的圆盘时钟。它没有表盘，也没有密密麻麻的分钟刻度。时间，在这里被“读”了出来。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

它的原理是让当前时间以高亮文本的形式呈现，显示精度在5分钟左右，误差大约正负4分钟。界面上所有字母构成了一个正方形矩阵，其中该高亮的单词鲜艳夺目，其余字母则色调偏暗，共同营造出一种独特的科技美学。

最有趣的地方在于，这个看似动态变化的时钟，其核心驱动几乎完全由CSS完成。Ja vaScript只在一开始负责获取一个初始时间（如果页面由服务端渲染，这一步甚至可以省略），之后的所有“跳动”都交给了样式表。整个实现主要围绕以下几个亮点展开：

整体布局：所有英文单词被精心排列成一个正方形。有些字母本身并不表示时间，它们存在的意义只是为了“撑起”这个完美的方形布局。
时间粒度：时间的更新并非每分钟一次，而是以5分钟为基本单位进行“跳跃”，用“FIVE”、“TEN”、“QUARTER”这样的单词来表征分钟。
视觉焦点：通过颜色对比，瞬间突出当前时刻需要亮起的单词。
零定时器：完全不需要Ja vaScript设置定时器来推动时间变化，仅靠CSS动画就能实现永不停歇的运转。

实现过程

这个时钟的设计哲学很明确：用文字本身来诉说时间。钟面上的每个字母都对应着一个特定的时间节点。比如，“TEN”、“QUARTER”、“HALF”用来指示分钟数，而下方排列的“ONE”、“TWO”、“THREE”等则代表小时。这种设计巧妙地避开了数字的冰冷，赋予时间一种叙事般的创意表达。

界面布局

首先来看看HTML结构。布局的首要目标是让每一行的文本长度保持一致。因此，当表示时间的单词长度不够时，就需要加入一些“填充字符”——那些永远不会被高亮的字母。它们就像是舞台的背景板，只为衬托主角而存在。

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

可以从下面这段部分代码中窥见一斑。只有被p标签包裹的才是真正会参与高亮变化的时间单词：

F O U R

F I V E

T W O

E I G H T

E L E V E N

S E V E N

T W E L V E

CSS样式

观察上面的HTML代码，你会发现p标签的class名称很有规律。hour代表小时，后面的h0到h11分别对应12个钟点。分钟则由min表示，并且因为以5分钟为间隔，所以会出现m5、m15、m25这样的类名。此外，为了表达“几点过几分”或“差几分到几点”的概念，还定义了类似下面这样的关键元素：

Q U A R T E R

H A L F

T O

P A S T

动画实现

这一部分是整个项目的精髓所在：如何在不使用Ja vaScript的情况下，让单词自动且准确地变化？答案全在CSS动画里。为了更高效地管理复杂的样式逻辑，这里借助了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;}

那么，如何确定每个单词在何时高亮呢？这就依赖一个至关重要的CSS属性：animation-delay（动画延迟）。原作者使用了一段巧妙的Sass循环，为每个可能的时间点（以5分钟为步长）计算出精确的延迟值：

$k: 0;@while $k < 60 {  .minute#{$k} {    $l: 0;    @while $l < 60 {      .m#{$l} {        animation-delay: - $time * $k / 60;      }      $l: $l + 5;    }    .before,    .after { animation-delay: -$time * $k / 60; }    .m30 { animation-delay: $time/2 - $time * $k / 60; }    @for $i from 0 through 11 {      &.hour#{$i} {        @for $j from 0 through 11 {          .h#{$j} { animation-delay: (-$time*5/12 + $time*($j - $i)) -  ($time * $k / 60); }        }      }    }  }  $k: $k + 5;}

简单来说，这段代码通过嵌套循环，动态生成了对应不同分钟（$k）和小时（$i, $j）场景下的CSS类，并为每个类设置了经过精密计算的animation-delay。正是这些差异化的延迟时间，像一组编好程序的齿轮，驱动着整个文本矩阵在正确的时间点亮正确的单词，从而模拟出时钟的运转。

最后

以上便是利用纯CSS打造一个文本时钟的全过程解析。这个项目远不止是一个计时工具，它更像是一个展示前端开发者如何用代码进行创意表达的绝佳案例。通过深度挖掘CSS动画的潜力，并借助Sass进行逻辑抽象，我们完全可以在不依赖脚本的情况下，实现如此复杂且富有美感的动态视觉效果。这无疑为前端技术的创造性应用，打开了又一扇想象之门。

来源:https://www.jb51.net/css/912600.html

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：html中script的defer属性_html脚本延迟执行机制下一篇：HTML行内元素和块级元素区别_html行内元素块级元素总结【手册】