让每一秒都有一个主题！ ⏰ 使用 @property 和 hsl()
发布于2024-11-04
浏览：949
？介绍
您是否曾经想过创建一个不仅仅是报时的时钟？如果每一秒都会带来一个全新的主题怎么办？借助 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
版本声明
本文转载于：https://dev.to/alishata128/make-every-second-have-a-theme-using-property-and-hsl-4n55?1如有侵犯，请联系[email protected]删除
最新教程
更多>
-
为什么PYTZ最初显示出意外的时区偏移？与pytz 最初从pytz获得特定的偏移。例如，亚洲/hong_kong最初显示一个七个小时37分钟的偏移： 差异源利用本地化将时区分配给日期，使用了适当的时区名称和偏移量。但是，直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone（...编程 发布于2025-05-18 -
在细胞编辑后，如何维护自定义的JTable细胞渲染？在JTable中维护jtable单元格渲染后，在JTable中，在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是，至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列，用户遇到的数字格式丢失的“价格”列的“价格”之后，问题在设置自定义单元格...编程 发布于2025-05-18
-
如何有效地选择熊猫数据框中的列？在处理数据操作任务时，在Pandas DataFrames 中选择列时，选择特定列的必要条件是必要的。在Pandas中，选择列的各种选项。选项1：使用列名 如果已知列索引，请使用ILOC函数选择它们。请注意，python索引基于零。 df1 = df.iloc [：，0：2]＃使用索引0和1 c...编程 发布于2025-05-18
-
PHP阵列键值异常：了解07和08的好奇情况PHP数组键值问题，使用07&08 在给定数月的数组中，键值07和08呈现令人困惑的行为时，就会出现一个不寻常的问题。运行print_r（$月）返回意外结果：键“ 07”丢失，而键“ 08”分配给了9月的值。此问题源于PHP对领先零的解释。当一个数字带有0（例如07或08）的前缀时，PHP将其...编程 发布于2025-05-18
-
如何使用Depimal.parse（）中的指数表示法中的数字？在尝试使用Decimal.parse（“ 1.2345e-02”中的指数符号表示法表示的字符串时，您可能会遇到错误。这是因为默认解析方法无法识别指数符号。 成功解析这样的字符串，您需要明确指定它代表浮点数。您可以使用numbersTyles.Float样式进行此操作，如下所示：[&& && && ...编程 发布于2025-05-18
-
在程序退出之前，我需要在C ++中明确删除堆的堆分配吗？在C中的显式删除 在C中的动态内存分配时，开发人员通常会想知道是否有必要在heap-procal extrable exit exit上进行手动调用“ delete”操作员，但开发人员通常会想知道是否需要手动调用“ delete”操作员。本文深入研究了这个主题。 在C主函数中，使用了动态分配变量（H...编程 发布于2025-05-18
-
如何在Java字符串中有效替换多个子字符串？在java 中有效地替换多个substring，需要在需要替换一个字符串中的多个substring的情况下，很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...编程 发布于2025-05-18
-
Python高效去除文本中HTML标签方法在Python中剥离HTML标签，以获取原始的文本表示 仅通过Python的MlStripper 来简化剥离过程，Python Standard库提供了一个专门的功能，MLSTREPERE，MLSTREPERIPLE，MLSTREPERE，MLSTREPERIPE，MLSTREPERCE，MLST...编程 发布于2025-05-18
-
如何干净地删除匿名JavaScript事件处理程序？删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性，但是当要删除它们时，可以构成挑战，而无需替换元素本身就可以替换一个问题。 element？ element.addeventlistener（event，function（）{/在这里工作/}，false）; 要解决此问题，请考虑...编程 发布于2025-05-18
-
为什么我会收到MySQL错误＃1089：错误的前缀密钥？mySQL错误＃1089：错误的前缀键错误descript [＃1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度，可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...编程 发布于2025-05-18
-
Java为何无法创建泛型数组？通用阵列创建错误 arrayList [2]; JAVA报告了“通用数组创建”错误。为什么不允许这样做？答案：Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<myO...编程 发布于2025-05-18
-
Python环境变量的访问与管理方法Accessing Environment Variables in PythonTo access environment variables in Python, utilize the os.environ object, which represents a mapping of envir...编程 发布于2025-05-18
-
为什么不````''{margin：0; }`始终删除CSS中的最高边距？在CSS 问题：不正确的代码： 全球范围将所有余量重置为零，如提供的代码所建议的，可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如，在提供的示例中，将以下代码添加到CSS中，将解决余量问题： body H1 { 保证金顶：-40px; } 此方法更精确，避免了由全局保证金重置引...编程 发布于2025-05-18
-
如何使用组在MySQL中旋转数据？在关系数据库中使用mySQL组使用mySQL组进行查询结果，在关系数据库中使用MySQL组，转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里，我们面对一个共同的挑战：使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...编程 发布于2025-05-18
-
哪种方法更有效地用于点 - 填点检测：射线跟踪或matplotlib \的路径contains_points？在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...编程 发布于2025-05-18
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
