欢迎您来到用的多资源网,本站秉承互联网最初开放、共享、免费的精神持续为广大爱好学习的朋友提供免费帮助,请相互转告。

HTML + CSS 实现一个酷炫的夜间模式切换动画

在 mkBlog 主题的 2.0 版本中,有了“夜间模式”的功能。然而在进行日与夜之间切换时,总觉得有点突兀。于是参考某浏览器的做法,给加了个切换动画具体效果,可以点击本站右下角的设置图标,切换到夜间模式进行体验!

实现原理
背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。

日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°,看上去就是太阳落下然后月亮升起来了……

  • 该动效的实现方式及配色来自 codepen 上的一个示例,我将其进行了修改和精简。

动画演示

友情提示您:用的多资源网为您持续提供更多的免费合法资源,用的多资源网提供所有资源均来自互联网搜集,如果有不慎冒犯之处,请及时联系删除谢谢理解,我们非常尊重原创和技术缔造者,用的多资源网不能确保每一个资源都是安全有效的,毕竟互联网链接多变性和软件编写的复杂性,请用户注意甄别。如发现违规内容请及时向我们反馈,我们会及时处理。支持用的多资源网、希望用的多资源网走的更远更好,请在搜索引擎输入 用的多资源网 找到我们的网址yongdeduo点击一次就算支持了。不胜感激。
用的多资源网 » HTML + CSS 实现一个酷炫的夜间模式切换动画

发表评论