如圖所示這是一個純本文時鐘效果，和傳統(tǒng)的時鐘不一樣，沒有表盤，也沒有完整到每一分鐘的數(shù)字表示當(dāng)前時刻。

在這個時鐘中，當(dāng)前時間通過文本顯示，顯示的文本時間誤差為+/- 4分鐘，以明亮的顏色突出顯示當(dāng)前時間，而其余字母則較暗。

實際上這是一個實現(xiàn)很復(fù)雜的時鐘，因為只使用CSS實現(xiàn)，JS只需要獲取初始化的時間，如果頁面是使用服務(wù)端選擇則不需要這個初始化的JS。

以下是本次實現(xiàn)的主要幾點：

• 整體文本布局呈正方形，包含需要高量的英文單詞，但也包含一些不需要高亮的字母，僅是為了組合整個正方形布局
• 時間的跳動不是以一分鐘級別的進行，而是以英文5分鐘級別跳動
• 當(dāng)前時間所需單詞需要高亮
• 不需要使用JS定時器，僅做初始化時間獲取

實現(xiàn)過程

這個時鐘的核心設(shè)計理念是利用英文文本顯示時間，時鐘面上的每個字母都對應(yīng)一個特定的時間點，例如，TEN、FIVE、QUARTER、HALF等，用于表示分鐘，而下方的ONE、TWO、THREE等則表示小時。這種設(shè)計使得時鐘在視覺上獨特且富有創(chuàng)意。

界面布局

首先對于HTML中的單詞布局，主要目標是將每行的單詞排列成相同的長度。如果某些單詞長度不足，可以使用其他不需要的字符進行填充，像如下沒有高亮的字符都是為了填充長度而增加的字符。

摘取部分代碼示例，只有在span標簽內(nèi)的才是真正有用會高亮的詞：

<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可以發(fā)現(xiàn)span標簽的class代碼所對應(yīng)的小時和分鐘，hour代碼小時，h0 - h11 代表對應(yīng)的12個小時。分鐘則是以min表示，因為分鐘都是以5分鐘為單位顯示，所以會有這些calss m5 m10 m15 m20 m25 m35 m40，除此之外，還會有以下關(guān)系：

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

動畫實現(xiàn)

這一塊是最復(fù)雜的實現(xiàn)，如何讓單詞自動變化且不使用JS。核心的動畫和顏色變化是通過CSS實現(xiàn)的，這里使用了Sass來簡化和優(yōu)化代碼。

使用Sass定義是否需要高亮的變量和一小時的秒數(shù)用于后面動畫的計算，也可以通過重置此變量為更小的值看到文本時鐘更快速的變化：

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

然后通過@keyframes定義動畫，這些動畫控制文本顏色的變化，從而突出顯示當(dāng)前時間。例如：

@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中，再關(guān)聯(lián)到對應(yīng)的元素中進行高亮顯示。什么時候高亮取決于一個很重要的屬性，animation-delay，這里原作者用了一段循環(huán)代碼進行處理，給每個時間段設(shè)置不同的動畫延遲執(zhí)行時間，代碼如下：

$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;
}

在這個內(nèi)部循環(huán)中，定義了一個類名為.m#{$l}的選擇器，其中#{$l}會被替換為當(dāng)前的$l值。然后，設(shè)置了animation-delay屬性，其值為-$time * $k / 60。這樣可以根據(jù)時間的變化來控制動畫的延遲。小時方面生成了一個.h#{$j}的類名選擇器，同樣設(shè)置了animation-delay屬性，其值為(-$time*5/12 + $time*($j - $i)) - ($time * $k / 60)。這樣可以根據(jù)小時和分鐘的變化來控制時鐘的動畫延遲。

通過變量的循環(huán)和選擇器的嵌套，實現(xiàn)了不同元素動畫延遲的控制，從而呈現(xiàn)出一個特殊的時鐘效果。

最后

本文解析了通過純 CSS 實現(xiàn)一個文本時鐘的效果，這是一個展示前端開發(fā)技能和創(chuàng)造性的例子。通過巧妙地使用CSS動畫和Sass，可以實現(xiàn)復(fù)雜的視覺效果，并提供一種新穎的方式來顯示時間。

到此這篇關(guān)于純CSS實現(xiàn)炫酷文本時鐘特效的文章就介紹到這了,更多相關(guān)CSS時鐘內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論