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

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

实现原理

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

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

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

动画演示

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

昼夜切换动画

代码示例

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 name="author" content="mengkun">
  8.  
  9. <title>昼夜切换动画</title>
  10. <style>
  11. html, body {
  12. margin: 0;
  13. padding: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
  17.  
  18. /* 白天和黑夜的背景 */
  19. .mk-dark-mode-sky,
  20. .mk-dark-mode-sky:before {
  21. content: "";
  22. position: fixed;
  23. left: 0;
  24. right: 0;
  25. top: 0;
  26. bottom: 0;
  27. z-index: 999999999;
  28. transition: 2s ease all;
  29. }
  30. .mk-dark-mode-sky {
  31. background: linear-gradient(#feb8b0, #fef9db);
  32. }
  33. .mk-dark-mode-sky:before {
  34. opacity: 0;
  35. background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
  36. }
  37. .mk-dark-mode .mk-dark-mode-sky:before {
  38. opacity: 1;
  39. }
  40.  
  41. /* 太阳和月亮 */
  42. .mk-dark-mode-planet {
  43. z-index: 1999999999;
  44. position: fixed;
  45. left: -50%;
  46. top: -50%;
  47. width: 200%;
  48. height: 200%;
  49. transform-origin: center bottom;
  50. transition: 2s cubic-bezier(.7, 0, 0, 1) all;
  51. }
  52. .mk-dark-mode-planet:after {
  53. position: absolute;
  54. left: 35%;
  55. top: 40%;
  56. width: 150px;
  57. height: 150px;
  58. border-radius: 50%;
  59. content: "";
  60. background: linear-gradient(#fefefe, #fffbe8);
  61. }
  62. </style>
  63. <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  64. </head>
  65. <body>
  66. <div class="mk-dark-mode-sky">
  67. <div class="mk-dark-mode-planet"></div>
  68. </div>
  69. <script>
  70. /* 这里为了方便演示,点击页面中任意位置即可触发切换动画 */
  71. $("body").click(function() {
  72. $("body").toggleClass("mk-dark-mode");
  73. var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360;
  74. $('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)' });
  75. $('.mk-dark-mode-planet').data('angle', angle);
  76. });
  77. </script>
  78. </body>
  79. </html>
打赏站长

打赏方式:

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

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

留言咨询

自动获取QQ

昵称

邮箱

网址

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

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

关于我们

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

站点统计

  • 收录网址:137 个
  • 黑名单:0 个
  • 发布文章:317 条
  • 总访问量:268641次
  • 评论总数:20 条
  • 用户总数:239
  • 本站运行:6年5月13天
展开
关闭 提交收录 审核状态 SEO实战 SEO外链 在线工具 资源大全 骗子公布 本站公告