HTML + CSS 实现一个酷炫的夜间模式切换动画
实现原理
背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。
日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 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> /* 白天和黑夜的背景 */ .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: 1s 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); } .mk-dark-mode .mk-dark-mode-planet:after{ box-shadow: 40px 15px 0 0 #fffbe8; background: none; transition: 1s cubic-bezier(.7, 0, 0, 1) all; } </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() { //这里可以让动画结束后隐藏,默认不开启 //$(".mk-dark-mode-sky").show(); //setTimeout(function(){ // $(".mk-dark-mode-sky").hide(); //},1500); $("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>
原作者:mengkun
我只是优化部分视觉效果,太阳和月亮转换完成后显示对应的天体
版权声明:本文由 LzxBlog 发布,如需转载请注明出处。