标签搜索

目 录CONTENT

文章目录

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

沙漠渔溏 / 2024-02-04 20:55:18 / 共计4,145 字
温馨提示:
本文最后更新于 2024-02-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

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

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

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

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

实现过程

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

界面布局

首先对于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/>
<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/>

CSS样式

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

<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>

动画实现

这一块是最复杂的实现,如何让单词自动变化且不使用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 / 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;
}

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

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

最后

本文解析了通过纯 CSS 实现一个文本时钟的效果,这是一个展示前端开发技能和创造性的例子。通过巧妙地使用CSS动画和Sass,可以实现复杂的视觉效果,并提供一种新颖的方式来显示时间。

到此这篇关于纯CSS实现炫酷文本时钟特效的文章就介绍到这了,更多相关CSS时钟内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章,希望大家以后多多支持 『沙漠渔溏』 !