前言

一二三四，二二三四，继续来更新 Dark Mode 的动画，这次我们更新两个，都是来源于我记忆中网站的动画，就当作复刻吧。

第一个

第一个改自我前面写的按钮动画，加了一个简单的旋转动画，效果如下：

有手就行，定义一个简单的 @keyframes 关键帧动画：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

然后使用 animation 属性调用即可：

.moon-svg,
.sun-svg {
  width: 30px;
  height: 30px;
  top: 30%;
  right: 30%;
  position: absolute;
  animation: rotate 2s linear infinite;
}

在切换明亮和黑暗模式时，调用 visibility 属性调整 svg 的可见性：

.dark {
  transition: 1s;
  background-color: $dark-color;
  color: $light-color;

  .sun-svg {
    fill: $light-color;
    visibility: visible;
  }

  .moon-svg {
    visibility: hidden;
  }
}

第二个

第二个也是一个动画，但是我们不用 svg，直接用CSS来画太阳和月亮，效果如下：

我们把它分成两个部分，首先是两个方块叠加的齿轮背景，也可以看作☀的边角，用 div 画两个不同方向的正方形就行了：

.gear {
  position: absolute;
  background-color: $light-color;
  height: 100px;
  width: 100px;
  border-radius: 5px;
  transition: 2s;
}

#gear1 {
  transform: rotate(-45deg);
}

#gear2 {
  transform: rotate(-90deg);
}

在点击时切换 active 的 class，让它们旋转起来：

#gear1.active {
  background-color: $bg-color;
  transform: rotate(225deg);
  transition: 2s;
}

#gear2.active {
  background-color: $bg-color;
  transform: rotate(180deg);
  transition: 2s;
}

另一部分是中心的太阳和月亮，依旧采用上篇文章两个圆叠加的方法，画出一大一小两个圆，在切换模式的时候移动位置，如图：

#big {
  position: absolute;
  background-color: $bg-color;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  transition: 2s;
}

#small {
  position: absolute;
  background-color: $light-color;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: 2s;
}

#small.active {
  height: 60px;
  width: 60px;
  transform: translate(15px, -5px);
  transition: 2s;
  background-color: $bg-color;
}

#big.active {
  background-color: $light-color;
  transition: 2s;
}

同样是加上 active 类，在点击时随着齿轮的旋转移动圆的位置和颜色，叠加出月亮的形状，非常简单🤷‍♂️

JS 偷个懒，只使用 toggle() 来做切换，就不多说了。

两个dark mode的动画

前言

第一个

第二个