让每一秒都有一个主题！ ⏰ 使用 @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中文网其他相关文章！