纯CSS实现炫酷文本时钟特效
<p>如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。</p><p>在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。</p>
<p>实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。</p>
<p>以下是本次实现的主要几点：</p>
<ul><li>整体文本布局呈正方形，包含需要高量的英文单词，但也包含一些不需要高亮的字母，仅是为了组合整个正方形布局</li><li>时间的跳动不是以一分钟级别的进行，而是以英文5分钟级别跳动</li><li>当前时间所需单词需要高亮</li><li>不需要使用JS定时器，仅做初始化时间获取</li></ul>
<h2>实现过程</h2>
<p>这个时钟的核心设计理念是利用英文文本显示时间，时钟面上的每个字母都对应一个特定的时间点，例如，<code>TEN</code>、<code>FIVE</code>、<code>QUARTER</code>、<code>HALF</code>等，用于表示分钟，而下方的<code>ONE</code>、<code>TWO</code>、<code>THREE</code>等则表示小时。这种设计使得时钟在视觉上独特且富有创意。</p>
<h3>界面布局</h3>
<p>首先对于HTML中的单词布局，主要目标是将每行的单词排列成相同的长度。如果某些单词长度不足，可以使用其他不需要的字符进行填充，像如下没有高亮的字符都是为了填充长度而增加的字符。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/20231121103905784.gif" /></p>
<p>摘取部分代码示例，只有在<code>span</code>标签内的才是真正有用会高亮的词：</p>
<div class="jb51code"><pre class="brush:xhtml;"><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/>
<span class="hour h8">E I G H T</span> C <span class="hour h11">E L E V E N</span><br/>
<span class="hour h7">S E V E N</span> D <span class="hour h0">T W E L V E</span><br/></pre></div>
<h3>CSS样式</h3>
<p>通过上面的html可以发现<code>span</code>标签的class代码所对应的小时和分钟，<code>hour</code>代码小时，<code>h0 - h11</code> 代表对应的12个小时。分钟则是以<code>min</code>表示，因为分钟都是以5分钟为单位显示，所以会有这些calss <code>m5 m10 m15 m20 m25 m35 m40</code>，除此之外，还会有以下关系：</p>
<div class="jb51code"><pre class="brush:xhtml;"><span class="min m15">Q U A R T E R</span>
<span class="min m30">H A L F</span>
<span class="before">T O</span>
<span class="after">P A S T</span></pre></div>
<h3>动画实现</h3>
<p>这一块是最复杂的实现，如何让单词自动变化且不使用JS。核心的动画和颜色变化是通过CSS实现的，这里使用了Sass来简化和优化代码。</p>
<p>使用Sass定义是否需要高亮的变量和一小时的秒数用于后面动画的计算，也可以通过重置此变量为更小的值看到文本时钟更快速的变化：</p>
<div class="jb51code"><pre class="brush:css;">$current: #dddd55;
$disable: rgba(0,0,0,0.5);
$time: 3600s;</pre></div>
<p>然后通过<code>@keyframes</code>定义动画，这些动画控制文本颜色的变化，从而突出显示当前时间。例如：</p>
<div class="jb51code"><pre class="brush:css;">@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;
}</pre></div>
<p>把显示相同语法的时间点放置在一个<code>@keyframes</code>中，再关联到对应的元素中进行高亮显示。什么时候高亮取决于一个很重要的属性，<code>animation-delay</code>，这里原作者用了一段循环代码进行处理，给每个时间段设置不同的动画延迟执行时间，代码如下：</p>
<div class="jb51code"><pre class="brush:css;">$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;
}</pre></div>
<p>在这个内部循环中，定义了一个类名为<code>.m#{$l}</code>的选择器，其中<code>#{$l}</code>会被替换为当前的<code>$l</code>值。然后，设置了<code>animation-delay</code>属性，其值为<code>-$time * $k / 60</code>。这样可以根据时间的变化来控制动画的延迟。小时方面生成了一个<code>.h#{$j}</code>的类名选择器，同样设置了<code>animation-delay</code>属性，其值为<code>(-$time*5/12 + $time*($j - $i)) - ($time * $k / 60)</code>。这样可以根据小时和分钟的变化来控制时钟的动画延迟。</p>
<p>通过变量的循环和选择器的嵌套，实现了不同元素动画延迟的控制，从而呈现出一个特殊的时钟效果。</p>
<h2>最后</h2>
<p>本文解析了通过纯 CSS 实现一个文本时钟的效果，这是一个展示前端开发技能和创造性的例子。通过巧妙地使用CSS动画和Sass，可以实现复杂的视觉效果，并提供一种新颖的方式来显示时间。</p>
頁:
[1]