|
在 mkBlog 主题的 2.0 版本中，有了“夜间形式”的功用。但是在企业停止日与夜之间经过切换时，总感觉有点高耸。因而我们参考某阅读器的做法，给加了个切换动画设想具体讲授结果，可以间接点击本站右下角的设备一个图标，切换到夜间治理形式成长停止进修体验！ 实现道理 布景切换: 白天布景，加上夜间布景。黑色布景依照比红色布景更高的顺序堆叠。就地景从白天到黑夜变化时，黑色布景逐步由通明变成不通明，构成白天和黑夜的结果。
日月变更：“太阳”和“月亮”实在是同一个元素，昼夜更替时将它所处的 div 盒子利用 transform 扭转 360°，看上去就是太阳落下然后月亮升起来了…… * 该动效的实现方式及配色来自 codepen 上的一个示例，我将其停止了点窜和精简。 动画演示
代码示例HTML;toolbar:false layui-box layui-code-view" style="margin-top: 10px; margin-bottom: 10px; padding: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; position: relative; font-size: 12px; border-width: 1px 1px 1px 6px; border-style: solid; border-color: rgb(226, 226, 226); border-image: initial; background-color: rgb(242, 242, 242); color: rgb(51, 51, 51); font-family: "Courier New";">code- <!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>
|
