释放双眼，带上耳机，听听看~！
“夜间模式”的功能。然而在进行日与夜之间切换时，总觉得有点突兀。于是参考某浏览器的做法，给加了个切换动画
具体效果，可以点击本站右下角的设置图标，切换到夜间模式进行体验！
实现原理
背景切换：一个白天的背景，再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时，黑色背景由透明逐渐转换为不透明，形成昼夜更替的效果。
日月变换：“太阳”和“月亮”其实是同一个元素，昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°，看上去就是太阳落下然后月亮升起来了……
* 该动效的实现方式及配色来自 codepen 上的一个示例，我将其进行了修改和精简。
动画演示
代码示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <meta name="author" content="mengkun"> <title>昼夜切换动画</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } /* 白天和黑夜的背景 */ .mk-dark-mode-sky, .mk-dark-mode-sky:before { content: ""; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999999999; transition: 2s ease all; } .mk-dark-mode-sky { background: linear-gradient(#feb8b0, #fef9db); } .mk-dark-mode-sky:before { opacity: 0; background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed); } .mk-dark-mode .mk-dark-mode-sky:before { opacity: 1; } /* 太阳和月亮 */ .mk-dark-mode-planet { z-index: 1999999999; position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; transform-origin: center bottom; transition: 2s cubic-bezier(.7, 0, 0, 1) all; } .mk-dark-mode-planet:after { position: absolute; left: 35%; top: 40%; width: 150px; height: 150px; border-radius: 50%; content: ""; background: linear-gradient(#fefefe, #fffbe8); } </style> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> </head> <body> <div class="mk-dark-mode-sky"> <div class="mk-dark-mode-planet"></div> </div> <script> /* 这里为了方便演示，点击页面中任意位置即可触发切换动画 */ $("body").click(function() { $("body").toggleClass("mk-dark-mode"); var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360; $('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)' }); $('.mk-dark-mode-planet').data('angle', angle); }); </script> </body> </html>
文章标题：HTML + CSS 实现一个酷炫的夜间模式切换动画
文章链接：https://www.qwbk.net/1115.html
文章版权：轻微博客 (WWW.QWBK.NET) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
本文最后更新于
文章链接：https://www.qwbk.net/1115.html
文章版权：轻微博客 (WWW.QWBK.NET) 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
本文最后更新于
2021-9-25 16:31:54 已超过 617 天没有更新，若有图片或者下载链接已失效，请在下方 留言 或联系
折腾猫。
