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

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

Aaron
2024-03-19 / 0 评论 / 14 阅读 / 正在检测是否收录...

发现了一个切换暗黑模式的按钮,感觉设计得非常巧妙,于是就花时间琢磨了一下它的实现方法。通过这个过程,我算是掌握了一些 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动画库,这些工具可以简化动画的编写过程,让代码更加清晰易懂。总之,掌握了基本的动画原理和技巧,再结合适合自己的方法和工具,就能更高效地创建出漂亮的动画效果了。

0

评论 (0)

取消