前言
一二三四，二二三四，继续来更新 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() 来做切换，就不多说了。
