Loading... ##实现原理 背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。 日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°,看上去就是太阳落下然后月亮升起来了…… ##动画演示 ![][1] ##代码示例 ```html <!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> ``` ##参考资料 1.Good Morning, Goodnight.Nanou.[https://codepen.io/jackiezen/pen/WMavEV][2] 2.卡通日出日落CSS3动画特效.站长素材.[http://demo.sc.chinaz.net/Files/DownLoad/webjs1/202004/jiaoben7518/][3] [1]: https://tva4.sinaimg.cn/large/da6ac54fgy1glt3ez2rcpg20je0cxwx1.gif [2]: https://codepen.io/jackiezen/pen/WMavEV [3]: http://demo.sc.chinaz.net/Files/DownLoad/webjs1/202004/jiaoben7518/ 最后修改:2022 年 07 月 09 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏