让每一秒都有一个主题！ ⏰ 使用 @property 和 hsl()
发布于2024-11-04
浏览：130
？介绍
您是否曾经想过创建一个不仅仅是报时的时钟？如果每一秒都会带来一个全新的主题怎么办？借助 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]删除
最新教程
更多>
-
为什么尽管有效代码，为什么在PHP中捕获输入？在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是，输出...编程 发布于2025-06-23 -
解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...编程 发布于2025-06-23
-
如何在Java字符串中有效替换多个子字符串？在java 中有效地替换多个substring，需要在需要替换一个字符串中的多个substring的情况下，很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...编程 发布于2025-06-23
-
如何为PostgreSQL中的每个唯一标识符有效地检索最后一行？postgresql：为每个唯一标识符提取最后一行，在Postgresql中，您可能需要遇到与在数据库中的每个不同标识相关的信息中提取信息的情况。考虑以下数据：[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息，您可以在操作员上使用Postgres的有效效率： ...编程 发布于2025-06-23
-
图片在Chrome中为何仍有边框？`border: none;`无效解决方案在chrome 在使用Chrome and IE9中的图像时遇到的一个频繁的问题是围绕图像的持续薄薄边框，尽管指定了图像，尽管指定了;和“边境：无；”在CSS中。要解决此问题，请考虑以下方法： Chrome具有忽略“ border：none; none;”的已知错误，风格。要解决此问题，请使用以下...编程 发布于2025-06-23
-
您可以使用CSS在Chrome和Firefox中染色控制台输出吗？在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本，例如红色的redors，for for for for错误消息？回答是的，可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息（版本31或更高版本）中。要实现这一目标，请使用以下模...编程 发布于2025-06-23
-
Spark DataFrame添加常量列的妙招在Spark Dataframe ，将常数列添加到Spark DataFrame，该列具有适用于所有行的任意值的Spark DataFrame，可以通过多种方式实现。使用文字值（SPARK 1.3）在尝试提供直接值时，用于此问题时，旨在为此目的的column方法可能会导致错误。 df.withCo...编程 发布于2025-06-23
-
您如何在Laravel Blade模板中定义变量？在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时，它可能并不总是最优雅的解决方案。幸运的是，Blade通过@php Directive提供了更优雅的方法： $ old_section =“...编程 发布于2025-06-23
-
如何使用组在MySQL中旋转数据？在关系数据库中使用mySQL组使用mySQL组进行查询结果，在关系数据库中使用MySQL组，转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里，我们面对一个共同的挑战：使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...编程 发布于2025-06-23
-
在Python中如何创建动态变量？在Python 中，动态创建变量的功能可以是一种强大的工具，尤其是在使用复杂的数据结构或算法时，Dynamic Variable Creation的动态变量创建。 Python提供了几种创造性的方法来实现这一目标。利用dictionaries 一种有效的方法是利用字典。字典允许您动态创建密钥并分...编程 发布于2025-06-23
-
在Ubuntu/linux上安装mysql-python时，如何修复\“ mysql_config \”错误？mysql-python安装错误：“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题，建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB： sudo apt-get安装python-mysqldb sudo pip in...编程 发布于2025-06-23
-
如何在鼠标单击时编程选择DIV中的所有文本？在鼠标上选择div文本单击带有文本内容，用户如何使用单个鼠标单击单击div中的整个文本？这允许用户轻松拖放所选的文本或直接复制它。 在单个鼠标上单击的div元素中选择文本，您可以使用以下Javascript函数： function selecttext（canduterid）{ if（do...编程 发布于2025-06-23
-
-
如何将PANDAS DataFrame列转换为DateTime格式并按日期过滤？Transform Pandas DataFrame Column to DateTime FormatScenario:Data within a Pandas DataFrame often exists in various formats, including strings.使用时间数据时...编程 发布于2025-06-23
-
如何将多种用户类型（学生，老师和管理员）重定向到Firebase应用中的各自活动？Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...编程 发布于2025-06-23
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
