？介紹

您是否曾經想過創建一個不僅僅是報時的時鐘？如果每一秒都會帶來一個全新的主題呢？借助 CSS @property 和 hsl() 顏色操作的強大功能，您可以！在本文中，我將引導您完成一個動態且具有視覺吸引力的「主題時鐘」的創建過程，該時鐘每秒都會改變其顏色（又稱其主題），為每個時刻帶來新的生命！ .

?️ 概念

「主題時鐘」背後的想法簡單而迷人：隨著時間的流逝，時鐘的外觀會改變。我們將利用 CSS 自訂屬性來動畫顏色的色調（嗯，這是以度為單位的角度）並每秒更新時鐘的主題（也每分鐘和每小時）。結果呢？一個無縫、不斷變化的時鐘，既迷人又實用。

？演示和程式碼

嗯，這是「主題時鐘」的完整代碼。我將對其進行分解，以了解每個部分如何對整體效果做出貢獻。

？分解代碼

1.CSS自訂屬性與@property：這個主題變換時鐘背後的魔力在於CSS自訂屬性和@property規則的使用。我們定義一個自訂屬性 --angle，它使用 hsl() 函數來控制時鐘顏色的色調。透過使用 @keyframes 規則對該屬性進行 60 秒的動畫處理，我們實現了連續的顏色過渡。

• 自訂屬性--angle：控制hsl()顏色的色調，動態改變主題。並且還使自訂屬性可設定動畫，從而實現平滑過渡。
• CSS @keyframes anim：此動畫在 60 秒內將色調值從 0 旋轉到 360，循環遍歷整個色譜。

2.動態主題切換：切換按鈕可讓使用者在淺色和深色主題之間切換。點擊按鈕會在 html 元素上切換深色類，從而改變時鐘的外觀。

• 亮/暗模式切換：可以使用動態更新時鐘外觀的按鈕切換主題。
• 容器旋轉動畫：主題變化時時鐘容器旋轉，加入微妙的過渡效果。

3.時鐘與時間更新：程式碼的 JavaScript 部分處理時鐘指標和數位時間顯示的更新。 setTime 函數每秒重新計算時針、分針和秒針的位置，同時也更新時間和日期顯示。

• "scale" 功能：將目前時間轉換為對應鐘針旋轉的度數。

- 即時更新：時鐘指針和數位時間每秒更新以匹配當前時間。

？將所有部分組合在一起

透過結合 CSS 自訂屬性、hsl() 色彩操作和 @property 規則的強大功能，我們創建了一個時鐘，它不僅可以顯示時間，而且其外觀也會隨著每一秒的流逝而變化。這個專案就是一個很好的例子，說明如何使用 CSS 以最少的 JavaScript 建立互動式且具有視覺吸引力的 Web 元素。

按讚❤️，關注更多alishata128