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

释放双眼,带上耳机,听听看~!

“夜间模式”的功能。然而在进行日与夜之间切换时,总觉得有点突兀。于是参考某浏览器的做法,给加了个切换动画HTML + CSS 实现一个酷炫的夜间模式切换动画具体效果,可以点击本站右下角的设置图标,切换到夜间模式进行体验!

实现原理

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

日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 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>

 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>

给TA买糖
共{{data.count}}人
人已赞赏
网站源码

仿个人QQ资料单页HTML引导页

2021-9-21 10:53:14

网站源码

分享一个好看的个人拟物主页

2021-9-25 16:33:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 9 用户总数(个)
  • 1279 文章总数(篇)
  • 19222 浏览总数(Pv)
  • 0 今日发布(篇)
  • 707 稳定运行(天)
立即加入

加入QWBK - ,快速免费获取轻微资源!