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

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

實(shí)際上這是一個(gè)實(shí)現(xiàn)很復(fù)雜的時(shí)鐘，因?yàn)橹皇褂肅SS實(shí)現(xiàn)，JS只需要獲取初始化的時(shí)間，如果頁(yè)面是使用服務(wù)端選擇則不需要這個(gè)初始化的JS。

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

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

實(shí)現(xiàn)過程

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

界面布局

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

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

<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標(biāo)簽的class代碼所對(duì)應(yīng)的小時(shí)和分鐘，hour代碼小時(shí)，h0 - h11 代表對(duì)應(yīng)的12個(gè)小時(shí)。分鐘則是以min表示，因?yàn)榉昼姸际且?分鐘為單位顯示，所以會(huì)有這些calss m5 m10 m15 m20 m25 m35 m40，除此之外，還會(huì)有以下關(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>

動(dòng)畫實(shí)現(xiàn)

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

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

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

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

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

把顯示相同語(yǔ)法的時(shí)間點(diǎn)放置在一個(gè)@keyframes中，再關(guān)聯(lián)到對(duì)應(yīng)的元素中進(jìn)行高亮顯示。什么時(shí)候高亮取決于一個(gè)很重要的屬性，animation-delay，這里原作者用了一段循環(huán)代碼進(jìn)行處理，給每個(gè)時(shí)間段設(shè)置不同的動(dòng)畫延遲執(zhí)行時(shí)間，代碼如下：

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

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

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

最后

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

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

最新評(píng)論