讓每一秒都有一個主題！ ⏰ 使用 @property 和 hsl()

？介紹

您是否曾經想過創造一個不僅僅是報時的時鐘？如果每一秒都會帶來一個全新的主題呢？借助 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

以上是讓每一秒都有一個主題！ ⏰ 使用 @property 和 hsl()的詳細內容。更多資訊請關注PHP中文網其他相關文章！