首頁 > web前端 > css教學 > 主體

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

PHPz
發布: 2024-08-29 06:32:31
原創
578 人瀏覽過

Make Every Second have a Theme! ⏰ using @property and 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板