静素 静素
  • 注册
  • 登录
  • 首页
  • 动态广场
  • 专题
  • 友链
  • 关于
    • 留言
    • 隐私政策
首页 › 技术笔记 › HTML + CSS 实现一个酷炫的夜间模式切换动画

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

Lewis
2年前技术笔记
316 0 1

实现原理

背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。
日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 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/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].卡通日出日落CSS3动画特效.站长素材.http://demo.sc.chinaz.net/Files/DownLoad/webjs1/202004/jiaoben7518/

css Html 昼夜动画
1 1
本文系作者 @孟坤 授权发布在 静素。未经许可,禁止转载。
【重大漏洞通告】堪比永恒之蓝,Windows SMB内存损坏漏洞 CVE-2020-0796复现及分析报告
上一篇
微软为Win10 1909推送更新,修复资源管理器搜索等问题
下一篇
评论 (0)
再想想
聚合文章
2021年3月勒索病毒流行态势分析
2年前
Win10升级将附带新的显示与相机设置
2年前
药神的处方药
2年前
微软为Win10 1909推送更新,修复资源管理器搜索等问题
2年前
1 1
相关文章
2021年3月勒索病毒流行态势分析
Win10升级将附带新的显示与相机设置
微软为Win10 1909推送更新,修复资源管理器搜索等问题
【重大漏洞通告】堪比永恒之蓝,Windows SMB内存损坏漏洞 CVE-2020-0796复现及分析报告
关于

在时光无涯的荒野里,人生,不过一抹短浅印迹,踏过四季,即香消玉殒,英雄末路,一辈子的痴缠呓语,更待何人说。

友链
壁纸 私人影院 音乐
导航
首页 动态广场 专题 留言 友链 隐私政策
Copyright © 2021-2023 静素. Designed by nicetheme. 浙icp备16001001
  • 首页
  • 动态广场
  • 投稿
  • 专题
  • 留言
  • 隐私政策
热门搜索
  • 文章
  • yy
  • SMB
  • css
  • 昼夜动画
  • Html
  • 微软
  • 我不是药神
  • 影评
  • win10
  • 系统
  • 勒索病毒
Lewis
7 文章
0 评论
4 喜欢
  • 1
  • 0
  • Top