使用CSS制作暗黑模式开关动画

本文将主要说明如何在 CSS 中使用过渡，以及少量 JavaScript 制作暗黑模式的切换按钮。

演示中使用 fontawesome 的免费图标，你也可以在这里找到更多其他图标。

HTML

创建一个包含明亮和黑暗图标的容器。

<div class="container">
   <div class="moon moon-logo">
      <i class="fas fa-moon"></i>
   </div>
   <div class="sun sun-logo">
      <i class="fas fa-sun"></i>
   </div>
</div>

CSS

为开关容器和图标设置定位、大小。

.container{
    position: relative;
}

.moon, .sun{
    font-size: 10rem; /* fontawesome 图标的大小 */
    width: fit-content; /* 匹配内容宽度 */
    height: fit-content; /* 匹配内容高度 */
}

.sun{
    position: absolute; /* 使用绝对定位和 .moon 重叠 */
    inset: 0; /* 等同于top:0; bottom:0; left:0; right:0; */
}

接下来，我们假定网页初始是明亮模式，为太阳图标设置透明度为不可见，并将其沿 Y 轴向下偏移其父元素高度的 20%，同时声明其沿 Z 轴旋转 50 度，然后添加过渡效果。

.sun-logo{
    color: black;
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    transition: all 1s ease-out;
}

以同样的方式，为月亮图标设置初始属性。

.moon-logo{
    color: black;
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
    transition: all 1s ease-out;
}

接着，我们为太阳图标设置过渡最终属性。

.animate-sun{
    opacity: 1;
    transform: translateY(0%) rotateZ(0deg);
    color: #fff;
}

为月亮图标设置过渡最终属性。

.animate-moon{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    color: #fff;
}

以上就是全部核心 CSS 部分。当然为了更直观的演示，我们来添加一个跟随开关动画的背景。

body{
    transition: background-color 1s;
}

.dark{
    background-color: black;
}

JavaScript

使用 toggle 函数为太阳图标和月亮图标添加/删除相应的过渡动画。

document.querySelector(".container").addEventListener("click", () => {
    document.querySelector(".moon-logo").classList.toggle("animate-moon");
    document.querySelector(".sun-logo").classList.toggle("animate-sun"); 
    document.querySelector("body").classList.toggle("dark");
})

好了，就是这样。现在试试吧！

See the Pen CSS暗黑模式开关动画 by #Eisten (@eisten) on CodePen.