让每一秒都有一个主题！ ⏰ 使用 @property 和 hsl()
发布于2024-11-04
浏览：908
？介绍
您是否曾经想过创建一个不仅仅是报时的时钟？如果每一秒都会带来一个全新的主题怎么办？借助 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]删除
最新教程
更多>
-
PowerPC 错误安装后如何在 Mac OS X 上完全卸载 MySQL？从 Mac OS X 卸载 MySQL：解决不正确的 PowerPC 安装试图纠正 Intel- 上 MySQL PowerPC 版本的错误安装一位用户在运行 Snow Leopard 的 Mac 上尝试安装正确的 x86 版本时遇到了安装冲突。尽管按照说明进行了手动卸载，但问题仍然存在，无法成功安...编程 发布于2024-11-15 -
Bootstrap 4 Beta 中的列偏移发生了什么？Bootstrap 4 Beta：列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而，随着 Beta 2 的后续发布，这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...编程 发布于2024-11-15
-
如何在 PHP 中组合两个关联数组，同时保留唯一 ID 并处理重复名称？在 PHP 中组合关联数组在 PHP 中，将两个关联数组组合成一个数组是一项常见任务。考虑以下请求：问题描述：提供的代码定义了两个关联数组，$array1和$array2。目标是创建一个新数组 $array3，它合并两个数组中的所有键值对。 此外，提供的数组具有唯一的 ID，而名称可能重合。要求是构...编程 发布于2024-11-15
-
如何修复 macOS 上 Django 中的“配置不正确：加载 MySQLdb 模块时出错”？MySQL配置不正确：相对路径的问题在Django中运行python manage.py runserver时，可能会遇到以下错误：ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...编程 发布于2024-11-15
-
除了“if”语句之外：还有什么地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型？无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换，使您能够在条件语句中直接使用其实例“t”。然而，这种显式转换提出了一个问题：“t”在哪里可以在不进行强制转换的情况下用作 bool？上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句：if、whi...编程 发布于2024-11-15
-
为什么 MySQL 查询结果在 PHP 中以字符串形式返回？如何以原生数据类型检索它们？Retriving MySQL Query Results in Native Data Types这个问题围绕着使用时获取本地数据类型的 MySQL 查询结果的问题PHP。具体来说，尽管使用 mysql_fetch_row() 和 mysql_result()，开发人员仍会遇到以字符串形式返回数值...编程 发布于2024-11-15
-
如何在 JavaScript 中高效检查素数？如何在 JavaScript 中确定素数在 JavaScript 中，识别素数是一项常见的编程任务。素数是大于 1 的正整数，除了 1 和它本身之外，不能被任何其他正整数整除。解决方案 1：Naive Approach提供的代码代码片段提供了一种检查数字是否为素数的简单方法：let inputVal...编程 发布于2024-11-15
-
如何在Go中解析具有特定时区的时间字符串？解析特定时区的时间您可以使用 time.ParseTime() 从字符串中获取时间结构。它采用布局字符串作为参数，指定输入字符串的格式。布局字符串必须与输入字符串的格式完全匹配。如果需要解析包含时区的时间字符串，可以使用 time.ParseInLocation()。该函数采用布局字符串和位置作为参...编程 发布于2024-11-15
-
执行 Python 脚本时如何处理 Windows 中的命令行参数？Windows 中的 Python 脚本执行：了解参数处理在 Windows 中，执行 Python 脚本而不在命令中指定“python”可能会导致意外的行为。此问题源于 Windows 将文件类型与可执行文件关联的方式。当不使用“python”执行脚本时，Windows 会根据文件扩展名调用关联的...编程 发布于2024-11-15
-
使用“justify-content: space-around”时，为什么 Flex 容器项目居中对齐而不是左对齐？Flex 容器项目左对齐在移动菜单中，使用 Flexbox 排列社交媒体图标列表。为了确保相等的间距，使用 justify-content: space-around 。但是，当行包含三个以上的项目时，它们会居中对齐而不是左对齐。困境出现问题的原因是 justify-content: space- ...编程 发布于2024-11-15
-
如何正确使用 canvas.toDataURL() 将 Canvas 输出捕获为图像？捕获画布输出为图像：使用 canvas.toDataURL() 解决挑战开发 HTML5 应用程序时，捕获画布的内容作为图像可能是一项重要任务。 canvas.toDataURL() 方法提供了实现此目的的方法，但有时其实现可能会遇到障碍。常见陷阱canvas 遇到的一个常见问题。 toDataUR...编程 发布于2024-11-15
-
在 Go 中使用 WebSocket 进行实时通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...编程 发布于2024-11-15
-
我可以在 Chrome 和 Firefox 中使用 CSS 设置 JavaScript 控制台消息的样式吗？在 Chrome 和 Firefox 中设计 JavaScript 控制台的样式在当今的 Web 开发领域，JavaScript 控制台已成为调试错误不可或缺的工具并显示信息。然而，当尝试区分不同类型的消息时，标准单色输出可能会受到限制。这个问题解决了一个常见问题：JavaScript 控制台能否显...编程 发布于2024-11-15
-
如何使用 MySQL 查找今天生日的用户？如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现，该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户： FROM USERS ...编程 发布于2024-11-15
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
