CSS3 制作动画切换暗黑模式小按钮

发现了一个切换暗黑模式的按钮，感觉设计得非常巧妙，于是就花时间琢磨了一下它的实现方法。通过这个过程，我算是掌握了一些 CSS3 动画的基本原理。之前我主要是靠复制拷贝和调整样式来实现效果，没有深入思考过如何从零开始写出 CSS3 动画。现在尝试自己动手，顺便玩一下 CSS3 小动画，感觉收获颇丰。

点击切换按钮，日落月升的渐显渐出，挺有感觉的。

下面就来复刻一下这个效果。我这个结构跟原版的不一样额，原版貌似都是纯 js 小组件。不过结果都一样。仔细看原版，其实不光有移动过渡和透明过渡，还有大小过渡，不过我这个没写。如果要写的话，给对应的 css 里写上 scale(1) 就 ok 了。

css3 小按钮 html 部分

<div class="switch-style">
    <i class="icon icon-dark"></i>
    <i class="icon icon-light"></i>
</div>

css3 小按钮 js 部分

获取要点击的对应的 dom 元素选择器来赋一个新的 class 来控制切换。

let btn = document.querySelector('.switch-style');
btn.addEventListener('click', ()=> btn.classList.contains('isdark') ? btn.classList.remove('isdark') : btn.classList.add('isdark'));

css3 小按钮 css 部分

.switch-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.switch-style i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: .3s ease-in-out;
}

.icon-light {
    background: url('/light.png') no-repeat center;
    transform: translateY(-50%);
    opacity: 1;
}

.icon-dark {
    background: url('/dark.png') no-repeat center;
    transform: translateY(-100%);
    opacity: 0;
}

.isdark .icon-light {
    opacity: 0;
    transform: translateY(100%);
}

.isdark .icon-dark {
    transform: translateY(50%);
    opacity: 1;
}

题外话

CSS3 动画确实可能会比较繁琐，特别是涉及到多个过渡效果时。分解步骤来写是一个不错的方法，可以更清晰地控制动画的每个阶段。如果需要的话，你可以尝试使用CSS预处理器或者一些现成的CSS动画库，这些工具可以简化动画的编写过程，让代码更加清晰易懂。总之，掌握了基本的动画原理和技巧，再结合适合自己的方法和工具，就能更高效地创建出漂亮的动画效果了。