快捷导航
QQ登录
 
HTML + CSS 实现一个酷炫的夜间模式切换动画
VIEW CONTENTS

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

2021-6-23 16:59| 发布者: 盒子云| 查看: 30315| 评论: 0|原作者: 孟坤
摘要: 一个白天的背景，再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时，黑色背景由透明逐渐转换为不透明，形成昼夜更替的效果。

实现原理

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

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

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

动画演示

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

代码示例

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

路过
雷人
握手
鲜花
鸡蛋
收藏 邀请
上一篇：两行命令解决Windows的localhost解析为::1导致数据库、PHP+Mysql等请求缓慢问题下一篇：CSS 实现新拟态(Neumorphism) UI 风格

相关阅读

最新评论

本文作者/ 盒子云
策划更多
HTML + CSS 实现一个酷炫的夜间
一个白天的背景，再加一个黑夜的背景。黑色背景的堆叠顺序高于白
独家评论更多
谈天说地更多
周排行

喜欢给你阳光，让你充满活力!

  • 反馈建议：2308883803@qq.com
  • 工作时间：周一~周五

关于我们

移动手机版 发帖 查看更新 VIP特权
知道创宇云安全

云服务支持

精彩内容，快速检索

关注我们

手机版| 小黑屋|
Copyright© 盒子云 - 你笑起来真好看~  Powered by Discuz！    ( 蜀ICP备18033287号-3 )