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

mengkun 52.1K 56

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

实现原理

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

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

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

动画演示

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

昼夜切换动画

代码示例

HTML
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  7.     <meta name="author" content="mengkun">
  8.  
  9.     <title>昼夜切换动画</title>
  10.     <style>
  11.     html, body {
  12.         margin: 0;
  13.         padding: 0;
  14.         width: 100%;
  15.         height: 100%;
  16.     }
  17.  
  18.     /* 白天和黑夜的背景 */
  19.     .mk-dark-mode-sky, 
  20.     .mk-dark-mode-sky:before {
  21.         content: "";
  22.         position: fixed;
  23.         left: 0;
  24.         right: 0;
  25.         top: 0;
  26.         bottom: 0;
  27.         z-index: 999999999;
  28.         transition: 2s ease all;
  29.     }
  30.     .mk-dark-mode-sky {
  31.         background: linear-gradient(#feb8b0, #fef9db);
  32.     }
  33.     .mk-dark-mode-sky:before {
  34.         opacity: 0;
  35.         background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
  36.     }
  37.     .mk-dark-mode .mk-dark-mode-sky:before {
  38.         opacity: 1;
  39.     }
  40.  
  41.     /* 太阳和月亮 */
  42.     .mk-dark-mode-planet {
  43.         z-index: 1999999999;
  44.         position: fixed;
  45.         left: -50%;
  46.         top: -50%;
  47.         width: 200%;
  48.         height: 200%;
  49.         transform-origin: center bottom;
  50.         transition: 2s cubic-bezier(.7, 0, 0, 1) all;
  51.     }
  52.     .mk-dark-mode-planet:after {
  53.         position: absolute;
  54.         left: 35%;
  55.         top: 40%;
  56.         width: 150px;
  57.         height: 150px;
  58.         border-radius: 50%;
  59.         content: "";
  60.         background: linear-gradient(#fefefe, #fffbe8);
  61.     }
  62.     </style>
  63.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  64. </head>
  65. <body>
  66.     <div class="mk-dark-mode-sky">
  67.         <div class="mk-dark-mode-planet"></div>
  68.     </div>
  69.     <script>
  70.     /* 这里为了方便演示，点击页面中任意位置即可触发切换动画 */
  71.     $("body").click(function() {
  72.         $("body").toggleClass("mk-dark-mode");
  73.         
  74.         var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360;
  75.         $('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)' });
  76.         $('.mk-dark-mode-planet').data('angle', angle);
  77.     });
  78.     </script>
  79. </body>
  80. </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

    看看大佬

    #43 2024-07-18 18:30 回复
  2. 小熊
    小熊 Lv 2

    强的,大佬,没事看看大佬

    #42 2023-01-06 13:11 回复
  3. lzonel
    lzonel Lv 1

    鼠标疯狂连点,你会发现新大陆

    #41 2022-09-25 13:24 回复
    • 马云
      马云 Lv 1

      @lzonel配合节流函数使用解决

      2022-10-10 09:33 回复
  4. 依然
    依然 Lv 1

    我的个人博客站能用你的主题吗？https://www.yrwb.cn

    #40 2022-09-08 21:14 回复
  5. admin
    admin Lv 1

    博主，交换友情链接吗？

    #39 2022-09-07 23:34 回复
  6. 辰旭
    辰旭 Lv 1

    怎么把他加到按钮里面形成一个事件

    #38 2021-08-26 01:59 回复
  7. heson
    heson Lv 1

    能画个月亮吗

    #37 2020-12-16 21:49 回复
    • Meteor
      Meteor Lv 2

      @heson捉

      2021-02-20 23:38 回复
    • 哥哥
      哥哥 Lv 1

      @heson哈哈哈，这要求。。

      2022-04-24 11:22 回复
    • 小沫
      小沫 Lv 1

      @heson是这种效果吗：https://www.liuzhixi.cn/html/192.html

      2022-08-14 18:44 回复
  8. 席小欢
    席小欢 Lv 1

    向你申请交换首页友情链接，同意的话请回复一下

    生活常识网

    http://wozhidaole.com.cn/

    网友们想与我站互相友情链接的，可以去我站申请！

    #36 2020-12-16 14:14 回复
  9. aaa
    aaa Lv 1

    抱歉，我要扒一点代码

    #35 2020-11-27 10:53 回复
  10. 嘿!白
    嘿!白 Lv 1

    如果有冒犯到，立马删除

    #34 2020-11-01 11:03 回复
  11. 嘿!白
    嘿!白 Lv 1

    大佬，很抱歉之前偷懒，盗了你的图，然后分享了一点你的blog，只是本地作品，暂时使用，已注明转载

    #33 2020-11-01 11:02 回复
    • mengkun
      mengkun 站长

      @嘿!白没事的，及时将图片转存到本地就行~

      2020-11-01 14:55 回复
  12. 异星软件空间
    异星软件空间 Lv 1

    有点苹果昼夜壁纸的意思

    #32 2020-10-09 22:37 回复
  13. MelodyJerry
    MelodyJerry Lv 1

    站长，你那代码运行是怎么做的，能不能教教我

    #31 2020-10-03 19:16 回复