您是否曾經想過創造一個不僅僅是報時的時鐘？如果每一秒都會帶來一個全新的主題呢？借助 CSS @property 和 hsl() 顏色操作的強大功能，您可以！在本文中，我將引導您完成一個動態且具有視覺吸引力的「主題時鐘」的創建過程，該時鐘每秒都會改變其顏色（又稱其主題），為每個時刻帶來新的生命！ 。
「主題時鐘」背後的想法簡單而迷人：隨著時間的流逝，時鐘的外觀會改變。我們將利用 CSS 自訂屬性來動畫顏色的色調（嗯，這是以度為單位的角度）並每秒更新時鐘的主題（也每分鐘和每小時）。結果呢？一個無縫、不斷變化的時鐘，既迷人又實用。
嗯，這是「主題時鐘」的完整程式碼。我將對其進行分解，以了解每個部分如何對整體效果做出貢獻。
1.CSS自訂屬性和@property：這個主題變換時鐘背後的魔力在於CSS自訂屬性和@property規則的使用。我們定義一個自訂屬性 --angle，它使用 hsl() 函數來控制時鐘顏色的色調。透過使用 @keyframes 規則對該屬性進行 60 秒的動畫處理，我們實現了連續的顏色過渡。
2.動態主題切換：切換按鈕允許使用者在淺色和深色主題之間切換。單擊按鈕會在 html 元素上切換深色類，從而改變時鐘的外觀。
3.時鐘和時間更新：程式碼的 JavaScript 部分處理時鐘指標和數字時間顯示的更新。 setTime 函數每秒重新計算時針、分針和秒針的位置，同時更新時間和日期顯示。
透過結合 CSS 自訂屬性、hsl() 顏色操作和 @property 規則的強大功能，我們創建了一個時鐘，它不僅可以顯示時間，而且其外觀也會隨著每一秒的流逝而變化。這個專案是一個很好的例子，展示瞭如何使用 CSS 以最少的 JavaScript 創建互動式且具有視覺吸引力的 Web 元素。
按讚❤️，追蹤更多alishata128
以上是讓每一秒都有一個主題！ ⏰使用@property和hsl()的詳細內容。更多資訊請關注PHP中文網其他相關文章！
