使用 CSS 实现暗模式切换动画！

2025-05-25

使用 CSS 实现暗模式切换动画！

本教程将主要讲解如何在 CSS 中使用过渡效果，以及如何使用少量 JavaScript 代码制作一个用于亮色和暗色模式的切换按钮。让我们一起探索过渡效果的世界吧！

HTML

HTML 标记非常容易理解。你需要做的就是创建一个容器，用于存放我们要使用的Fontawesome图标，并将包含图标的 s 嵌套div在容器中。



<div class="container">
   <div class="sun sun-logo">
      <i class="fas fa-sun"></i>
   </div>
   <div class="moon moon-logo">
      <i class="fas fa-moon"></i>
   </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS



.container{
    position: relative;
}

.sun, .moon{
    font-size: 10rem;
    width: fit-content;
    height: fit-content;
}

.moon{
    position: absolute;
    inset: 0;
}
Enter fullscreen mode Exit fullscreen mode

将容器位置设置为，relative将月亮容器位置设置为，absolute因为我们将把月亮图标放置在与太阳图标相同的位置。

有趣的地方来了。不用使用top: 0; bottom: 0; left: 0;和 ，right: 0;你也可以使用inset: 0;来得到相同的结果。真的有效！

另外，将太阳和月亮容器的height和设置为。这样做的目的是，将容器的高度和宽度设置为与其内部内容的高度和宽度相匹配。widthfit-content

而且，为了改变 fontawesome 图标的大小，只需改变font-size图标的​​。



.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们将设置月亮图标的初始位置以及网页首次渲染时的初始不透明度。这里，由于月亮图标的不透明度为零，因此我们只能看到太阳图标。

该translateY(20%)声明将使月亮图标沿 Y 轴向下偏移其父元素高度的 20%。

类似地，该rotateZ(50deg)声明将使月亮图标沿 Z 轴旋转 50 度。



.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
}
Enter fullscreen mode Exit fullscreen mode

以同样的方式，我们将设置太阳图标的初始属性。



.animate-sun{
    opacity: 0;
    transform: translateY(20%) rotateZ(100deg);
    color: aliceblue;
}
Enter fullscreen mode Exit fullscreen mode

现在，我们将设置它将过渡到的太阳图标的最终属性。



.animate-moon{
    opacity: 1;
    transform: translateY(0%) rotateZ(0deg);
    color: aliceblue;
}
Enter fullscreen mode Exit fullscreen mode

此外，我们将设置月亮图标的最终过渡属性。这里需要注意的是，图标的默认颜色是black，因此如果要更改图标的颜色，请定义其color属性。

但是等等，我们还没有用到这个transition属性，那么它该如何从一个状态转换到另一个状态呢？没错，这是 CSS 部分唯一剩下要做的事情了。



.moon-logo{
    opacity: 0;
    transform: translateY(20%) rotateZ(50deg);
    transition: all 1s ease-out;
}
.sun-logo{
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
    transition: all 1s ease-out;
}
Enter fullscreen mode Exit fullscreen mode 


body{
    transition: background-color 1s;
}

.dark{
    background-color: black;
}
Enter fullscreen mode Exit fullscreen mode

我们将使用上述类来改变图标转换发生的时间background-color。body

就是这样。你的 CSS 部分已经准备好了。

现在，让我们进入 JavaScript 部分。我们将使用 JavaScript 来实现事件toggle类click。

JavaScript



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

这里，我们给容器元素添加了一个，eventListener这样当我们点击容器时，就会切换相应元素的 CSS 类。这意味着，如果元素的
CSS 类不存在，函数会将该 CSS 类添加到相应元素的 CSS 类中。classListtoggleclassList

并且，如果 CSS 类已经存在于classList元素中，它将删除它。

这classList实际上是一个DOMTokenList，但我们不会深入讨论它的细节。

就是这样。这是最终的输出。

最终输出 GIF

文章来源：https://dev.to/murtuzaalisurti/dark-mode-toggle-animation-using-css-27il
Devto 翻译
PREV
如何使用 CSS 创建通知徽章？
NEXT
您必须使用的 5 个 VSCode 扩展