html 黑夜模式,HTML + CSS 实现一个酷炫的夜间模式切换动画 | 您所在的位置:网站首页 › 白天黑夜交替动画ae › html 黑夜模式,HTML + CSS 实现一个酷炫的夜间模式切换动画 |
在 mkBlog 主题的 2.0 版本中,有了“夜间模式”的功能。然而在进行日与夜之间切换时,总觉得有点突兀。于是参考某浏览器的做法,给加了个切换动画[aru_55]具体效果,可以点击本站右下角的设置图标,切换到夜间模式进行体验! 实现原理 背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。 日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°,看上去就是太阳落下然后月亮升起来了…… * 该动效的实现方式及配色来自 codepen 上的一个示例,我将其进行了修改和精简。 动画演示 昼夜切换动画 代码示例 昼夜切换动画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); } /* 这里为了方便演示,点击页面中任意位置即可触发切换动画 */ $("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); }); 参考资料 |
CopyRight 2018-2019 实验室设备网 版权所有 |