当前位置：首页 » 技术教程 » 实用教程 » 详情

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

实现原理

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

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

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

动画演示

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

昼夜切换动画

代码示例

HTML 
		
    
			
			
  1. 
				<!DOCTYPE html>
			
    2. 

			
  2. 
				<html xmlns="http://www.w3.org/1999/xhtml">
			
    3. 

			
  3. 
				<head>
			
    4. 

			
  4. 
				 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			
    5. 

			
  5. 
				 <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
    6. 

			
  6. 
				 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
			
    7. 

			
  7. 
				 <meta name="author" content="mengkun">
			
    8. 

			
  8. 
				 
			
    9. 

			
  9. 
				 <title>昼夜切换动画</title>
			
    10. 

			
  10. 
				 <style>
			
    11. 

			
  11. 
				 html, body {
			
    12. 

			
  12. 
				 margin: 0;
			
    13. 

			
  13. 
				 padding: 0;
			
    14. 

			
  14. 
				 width: 100%;
			
    15. 

			
  15. 
				 height: 100%;
			
    16. 

			
  16. 
				 }
			
    17. 

			
  17. 
				 
			
    18. 

			
  18. 
				 /* 白天和黑夜的背景 */
			
    19. 

			
  19. 
				 .mk-dark-mode-sky, 
			
    20. 

			
  20. 
				 .mk-dark-mode-sky:before {
			
    21. 

			
  21. 
				 content: "";
			
    22. 

			
  22. 
				 position: fixed;
			
    23. 

			
  23. 
				 left: 0;
			
    24. 

			
  24. 
				 right: 0;
			
    25. 

			
  25. 
				 top: 0;
			
    26. 

			
  26. 
				 bottom: 0;
			
    27. 

			
  27. 
				 z-index: 999999999;
			
    28. 

			
  28. 
				 transition: 2s ease all;
			
    29. 

			
  29. 
				 }
			
    30. 

			
  30. 
				 .mk-dark-mode-sky {
			
    31. 

			
  31. 
				 background: linear-gradient(#feb8b0, #fef9db);
			
    32. 

			
  32. 
				 }
			
    33. 

			
  33. 
				 .mk-dark-mode-sky:before {
			
    34. 

			
  34. 
				 opacity: 0;
			
    35. 

			
  35. 
				 background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
			
    36. 

			
  36. 
				 }
			
    37. 

			
  37. 
				 .mk-dark-mode .mk-dark-mode-sky:before {
			
    38. 

			
  38. 
				 opacity: 1;
			
    39. 

			
  39. 
				 }
			
    40. 

			
  40. 
				 
			
    41. 

			
  41. 
				 /* 太阳和月亮 */
			
    42. 

			
  42. 
				 .mk-dark-mode-planet {
			
    43. 

			
  43. 
				 z-index: 1999999999;
			
    44. 

			
  44. 
				 position: fixed;
			
    45. 

			
  45. 
				 left: -50%;
			
    46. 

			
  46. 
				 top: -50%;
			
    47. 

			
  47. 
				 width: 200%;
			
    48. 

			
  48. 
				 height: 200%;
			
    49. 

			
  49. 
				 transform-origin: center bottom;
			
    50. 

			
  50. 
				 transition: 2s cubic-bezier(.7, 0, 0, 1) all;
			
    51. 

			
  51. 
				 }
			
    52. 

			
  52. 
				 .mk-dark-mode-planet:after {
			
    53. 

			
  53. 
				 position: absolute;
			
    54. 

			
  54. 
				 left: 35%;
			
    55. 

			
  55. 
				 top: 40%;
			
    56. 

			
  56. 
				 width: 150px;
			
    57. 

			
  57. 
				 height: 150px;
			
    58. 

			
  58. 
				 border-radius: 50%;
			
    59. 

			
  59. 
				 content: "";
			
    60. 

			
  60. 
				 background: linear-gradient(#fefefe, #fffbe8);
			
    61. 

			
  61. 
				 }
			
    62. 

			
  62. 
				 </style>
			
    63. 

			
  63. 
				 <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
			
    64. 

			
  64. 
				</head>
			
    65. 

			
  65. 
				<body>
			
    66. 

			
  66. 
				 <div class="mk-dark-mode-sky">
			
    67. 

			
  67. 
				 <div class="mk-dark-mode-planet"></div>
			
    68. 

			
  68. 
				 </div>
			
    69. 

			
  69. 
				 <script>
			
    70. 

			
  70. 
				 /* 这里为了方便演示，点击页面中任意位置即可触发切换动画 */
			
    71. 

			
  71. 
				 $("body").click(function() {
			
    72. 

			
  72. 
				 $("body").toggleClass("mk-dark-mode");
			
    73. 

			
  73. 
				 
			
    74. 

			
  74. 
				 var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360;
			
    75. 

			
  75. 
				 $('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)' });
			
    76. 

			
  76. 
				 $('.mk-dark-mode-planet').data('angle', angle);
			
    77. 

			
  77. 
				 });
			
    78. 

			
  78. 
				 </script>
			
    79. 

			
  79. 
				</body>
			
    80. 

			
  80. 
				</html>
			
    81.
打赏站长

打赏方式：

X
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
文章作者：︻$▅▆▇◤ 日期：2021年03月25日 星期四   分类：实用教程   浏览(892)
本文地址：https://www.zzjjd.cn/syjc/55.html   [百度正在收录]
声明：本页信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！
本文最后更新于2021-3-25，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
上一篇：PHP 实现“万能”的短网址还原
下一篇：

相关阅读

留言咨询

自动获取QQ

昵称

邮箱

网址

寻元素 - 专注免抠png素材设计网站

    寻元素 - 专注免抠png素材设计网站

关于我们

    站长导航网提供网站SEO优化、SEM推广营销（百度/360/搜狗收录优化）、企业建站、搜索引擎教学等服务。
    联系我们：给我发QQ消息 加入QQ群

站点统计

  • 收录网址：222 个
  • 黑名单：0 个
  • 发布文章：2247 条
  • 总访问量：1395102次
  • 评论总数：0 条
  • 用户总数：239
  • 本站运行：2年11月9天
展开
关闭 提交收录 审核状态 SEO实战 SEO外链 在线工具 资源大全 骗子公布 本站公告
Copyright © 2024 站长聚集地 版权所有   豫ICP备16018700号-5

Powered by emlog / &Template author 站长导航网

新站登录｜赞助我们｜关于本站｜隐私政策｜免责申明｜友情链接｜网站地图｜sitemap2201

站长聚集地（www.zzjjd.cn）托管于腾讯云主机 并由腾讯云提供CDN技术支持
360安全检测 凭安信用认证 upyun网站联盟 腾讯云安全认证 可信安全 安全联盟 凭安信用认证 upyun网站联盟 腾讯云安全认证 可信安全 安全联盟 可信安全
本站仅收录网站，不对其网站内容或交易担保。若收录的站点侵害到您的利益，请联系我们删除收录
本站资源部分来自互联网收集以及网友投稿，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除