HTML + CSS 实现一个酷炫的夜间模式切换动画

mengkun 48.4K 56

在 mkBlog 主题的 2.0 版本中，有了“夜间模式”的功能。然而在进行日与夜之间切换时，总觉得有点突兀。于是参考某浏览器的做法，给加了个切换动画[aru_55]具体效果，可以点击本站右下角的设置图标，切换到夜间模式进行体验！

实现原理

背景切换：一个白天的背景，再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时，黑色背景由透明逐渐转换为不透明，形成昼夜更替的效果。

日月变换：“太阳”和“月亮”其实是同一个元素，昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°，看上去就是太阳落下然后月亮升起来了……

* 该动效的实现方式及配色来自 codepen 上的一个示例，我将其进行了修改和精简。

动画演示

HTML + CSS 实现一个酷炫的夜间模式切换动画

昼夜切换动画

代码示例

<!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/[email protected]/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].卡通日出日落CSS3动画特效.站长素材.http://demo.sc.chinaz.net/Files/DownLoad/webjs1/202004/jiaoben7518/

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 菜鸟
    菜鸟 Lv 1

    WordPress 考古

    #30 2020-09-24 14:51 回复
  2. 【表情】
    【表情】 Lv 1

    前来考古

    #29 2020-09-02 11:20 回复
  3. easonlee
    easonlee Lv 1

    催更走起来

    #28 2020-08-12 09:06 回复
  4. 四眼六角拖更
    四眼六角拖更 Lv 1

    还不更新

    #27 2020-08-10 03:45 回复
  5. 一位WordPress评论者
    一位WordPress评论者 Lv 1

    前来考古

    #26 2020-08-06 18:53 回复
  6. Flower Sea
    Flower Sea Lv 1

    大佬终于水博客了哇

    #25 2020-07-29 19:14 回复
  7. jayce
    jayce Lv 1

    老哥博客做的真棒[aru_8] 请问有没有开源呀 非常想学习一下

    #24 2020-07-22 14:14 回复
  8. 影翼
    影翼 Lv 1

    终于更新了[aru_12]

    #23 2020-07-08 20:34 回复
  9. 　
    　 Lv 2

    你这就有点慢了。
    一天催更一点点
    结果垃圾一大堆

    #22 2020-07-08 15:22 回复
  10. 差异
    差异 Lv 1

    孟坤大大，你用的什么服务器哇，我阿里云买的香港服务器，太慢了，推荐个，谢谢了

    #21 2020-07-06 00:00 回复
    • Cai
      Cai Lv 2

      @差异记得有说过, 是阿里云还是腾讯, 是国内的服务器.

      2020-07-25 23:44 回复
  11. 小星云
    小星云 Lv 3

    已经一个月没有更新了[aru_60]，催更继续走起来[aru_55]

    #20 2020-06-26 09:31 回复
  12. 修君
    修君 Lv 1

    好看好看[aru_13]

    #19 2020-06-25 15:39 回复
  13. 阿珏
    阿珏 Lv 3

    好多人[wb_doge]

    #18 2020-06-20 22:34 回复
  14. 彼岸临窗
    彼岸临窗 Lv 1

    花里胡哨的[wb_doge]

    #17 2020-06-16 16:51 回复
  15. 飞猫
    飞猫 Lv 1

    大佬好，求你这个aru贴纸[aru_77]

    #16 2020-06-11 17:00 回复
  16. ych-template
    ych-template Lv 3

    欸我头像呢

    #15 2020-06-11 00:37 回复
  17. 凉风小筑
    凉风小筑 Lv 2

    要是切换成夜间模式那个是月亮就更好了[doge]

    #14 2020-06-01 10:38 回复
  18. Tokin
    Tokin Lv 1

    不过进场没有动画感觉还是有些突兀，可以加个进场渐显的动画。。[aru_13]

    #13 2020-06-01 09:31 回复
    • mengkun
      mengkun 站长

      @Tokin加进场渐显的话，动画又会显得太长了，略拖沓 [喷血]

      2020-06-01 20:23 回复
    • Mr.Wu
      Mr.Wu Lv 1

      @Tokin活捉跑骚大佬一枚[aru_13]

      2020-12-16 03:18 回复
  19. CCC
    CCC Lv 1

    太棒了，这一年终于更新了

    #12 2020-05-30 17:26 回复
  20. 疯兒不懂
    疯兒不懂 Lv 1

    牛逼啊

    #11 2020-05-28 14:36 回复
  21. 子成
    子成 Lv 1

    [aru_12]一年更新一点点被我赶上了

    #10 2020-05-27 11:43 回复
  22. 　
    　 Lv 1

    某浏览器[aru_3]

    #9 2020-05-27 09:03 回复
  23. Ocean
    Ocean Lv 1

    来晚了...膜拜大佬

    #8 2020-05-26 20:21 回复
  24. Veen Zhao
    Veen Zhao Lv 1

    [aru_12]太棒了

    #7 2020-05-26 14:16 回复
  25. 甜力怕
    甜力怕 Lv 1

    卧槽，更新了！

    #6 2020-05-26 14:12 回复
  26. 　
    　 Lv 1

    更新好啊！等了快4个月可算等来了[斜眼笑]

    #5 2020-05-26 13:32 回复
  27. 小星云
    小星云 Lv 3

    感谢大佬的更新[aru_7]

    #4 2020-05-26 05:53 回复
  28. 完美者
    完美者 Lv 5

    我就想知道咋用

    地板 2020-05-26 00:45 回复
  29. Aunger
    Aunger Lv 1

    一年难得见一次大佬发博客

    板凳 2020-05-25 23:19 回复
  30. ych-template
    ych-template Lv 3

    呦，更新啦！[aru_1]

    沙发 2020-05-25 22:41 回复
分享