当前位置:首页 > 技术博客 > HTML > HTML + CSS 实现一个酷炫的夜间模式切换动画

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

admin2年前 (2021-10-14)HTML911

实现原理

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

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

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

动画演示:
 

代码案例:

<!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>
     
 
    /* 白天和黑夜的背景 */
    .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: 1s 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);

    }
    .mk-dark-mode .mk-dark-mode-planet:after{
        box-shadow: 40px 15px 0 0 #fffbe8;
        background: none;
        transition: 1s cubic-bezier(.7, 0, 0, 1) all;
    }
    </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() {
    //这里可以让动画结束后隐藏,默认不开启
        //$(".mk-dark-mode-sky").show();
        //setTimeout(function(){
        //    $(".mk-dark-mode-sky").hide();
        //},1500);

        $("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>


原作者:mengkun 

我只是优化部分视觉效果,太阳和月亮转换完成后显示对应的天体

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/192.html

标签: HTMLCSS

相关文章

html5的inputType

html5的inputType

属性值说明email限制用户输入的内容必须是Email类型url限制用户输入的内容必须是url类型date限制用户输入的内容必须是日期类型time限制用户输入的...

网页坦克大战

网页坦克大战

经典90版html5坦克大战游戏+源码。操作说明:玩家1:wasd上左下右,space射击;玩家2:方向键,enter射击。n下一关,p上一关。下载链接: ht...

蓝色系的个人简历HTML5模板

蓝色系的个人简历HTML5模板

一个简单、现代、富有创意和响应式的个人简历介绍HTML5单页模板。这个模板可用于创意设计师,摄影师,开发人员,或任何职业。它是完全定制的,你可以很容易地改变背景...

简洁的手工商品电子商务HTML模板

简洁的手工商品电子商务HTML模板

一款简洁大气的手工商品,手工制品,手工艺术品销售商城HTML响应式模板。它总共包含2个主页、6个博客页面、6个商店页面、11个产品页面、6个内页等。...

简洁的个人图文博客HTML模板

简洁的个人图文博客HTML模板

一款轻量级简洁响应式的图文生活记录个人博客模板。它是理想的旅游,生活方式,食品,时尚,最小,或摄影博客和更多的相关网站。包含了所有必需的ui布局元素。下载链接:...

bootstraps响应式多用途商业机构类网站模板

bootstraps响应式多用途商业机构类网站模板

简洁大气的jQuery bootstraps响应式多用途商业机构类网站模板,提供4种首页风格下载链接: https://pan.baidu.com/s/15Nv...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌