让每一秒都有一个主题！ ⏰ 使用 @property 和 hsl()
发布于2024-11-04
浏览：283
？介绍
您是否曾经想过创建一个不仅仅是报时的时钟？如果每一秒都会带来一个全新的主题怎么办？借助 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]删除
最新教程
更多>
-
如何使用Python的请求和假用户代理绕过网站块？如何使用Python的请求模拟浏览器行为，以及伪造的用户代理提供了一个用户 - 代理标头一个有效方法是提供有效的用户式header，以提供有效的用户 - 设置，该标题可以通过browser和Acterner Systems the equestersystermery和操作系统。通过模仿像Chro...编程 发布于2025-04-13 -
为什么Microsoft Visual C ++无法正确实现两台模板的实例？在Microsoft Visual C 中，Microsoft consions用户strate strate strate strate strate strate strate strate strate strate strate strate strate strate strate st...编程 发布于2025-04-13
-
C++中如何实现自动"self"关键字？self在C中：自主实现自php中广泛使用的php挑战在C中构成挑战，这是由于缺乏等效机制，因此在C中构成了挑战。虽然使用嵌套Typedefs的特定于类的实现很简单，但它需要重复和风险引入微妙的错误。本文使用dectType和模板探索了一种优雅的解决方案，以实现自主的自我实现。 使用decttyp...编程 发布于2025-04-13
-
JavaScript事件处理的新趋势[2 最近几个月见证了有关最佳JavaScript事件处理的重大讨论。 Google的JSACTION库和即将推出的Ecmascript 7 Object.Observe（）方法（在Chrome 36和Node.js Harmony中已经支持）为这场辩论加剧了这一辩论。 本文探讨了各种事件处理模...编程 发布于2025-04-13
-
超大整数常量为何不默认用`int`类型？integer文字：默认情况下并非总是int 溢出和促销当整数超过int范围（通常为32位）（通常为32位），毫无疑问的行为（UB）。但是，在某些情况下，编译器可能会自动将字面升级为较大的类型，例如长INT（通常为64位）。示例考虑Integer文字10000000000。在C环境中，这将被解释...编程 发布于2025-04-13
-
如何使用Regex在PHP中有效地提取括号内的文本php：在括号内提取文本在处理括号内的文本时，找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数，如下所示： 作为替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式来搜索特...编程 发布于2025-04-13
-
Android如何向PHP服务器发送POST数据？在android apache httpclient（已弃用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...编程 发布于2025-04-13
-
如何有效地选择熊猫数据框中的列？在处理数据操作任务时，在Pandas DataFrames 中选择列时，选择特定列的必要条件是必要的。在Pandas中，选择列的各种选项。选项1：使用列名 如果已知列索引，请使用ILOC函数选择它们。请注意，python索引基于零。 df1 = df.iloc [：，0：2]＃使用索引0和1 c...编程 发布于2025-04-13
-
为什么我的CSS背景图像出现？故障排除：CSS背景图像未出现 ，您的背景图像尽管遵循教程说明，但您的背景图像仍未加载。图像和样式表位于相同的目录中，但背景仍然是空白的白色帆布。而不是不弃用的，您已经使用了CSS样式： bockent {背景：封闭图像文件名：背景图：url（nickcage.jpg）; 如果您的html，css...编程 发布于2025-04-13
-
如何从PHP中的Unicode字符串中有效地产生对URL友好的sl。为有效的slug生成首先，该函数用指定的分隔符替换所有非字母或数字字符。此步骤可确保slug遵守URL惯例。随后，它采用ICONV函数将文本简化为us-ascii兼容格式，从而允许更广泛的字符集合兼容性。接下来，该函数使用正则表达式删除了不需要的字符，例如特殊字符和空格。此步骤可确保slug仅包含...编程 发布于2025-04-13
-
为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误？查询模式实现缺失：解决“无法找到”错误在银光应用程序中，尝试使用LINQ建立错误的数据库连接的尝试，无法找到以查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时，通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中，tblpersoon可能需...编程 发布于2025-04-13
-
如何在Java中正确显示“ DD/MM/YYYY HH：MM：SS.SS”格式的当前日期和时间？如何在“ dd/mm/yyyy hh：mm：mm：ss.ss”格式“ gormat 解决方案： args）抛出异常{ 日历cal = calendar.getInstance（）; SimpleDateFormat SDF =新的SimpleDateFormat（“...编程 发布于2025-04-13
-
如何在无序集合中为元组实现通用哈希功能？在未订购的集合中的元素要纠正此问题，一种方法是手动为特定元组类型定义哈希函数，例如： template template template 。 struct std :: hash { size_t operator（）（std :: tuple const&tuple）const {...编程 发布于2025-04-13
-
如何修复\“常规错误：2006 MySQL Server在插入数据时已经消失\”？How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...编程 发布于2025-04-13
-
在Ubuntu/linux上安装mysql-python时，如何修复\“ mysql_config \”错误？mysql-python安装错误：“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题，建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB： sudo apt-get安装python-mysqldb sudo pip in...编程 发布于2025-04-13
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
