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

寻梦xunm| 675| 收集

1年前

超过639天温馨提示

本文最后更新于2023年02月21日，已超过639天没有更新，若内容或图片失效，请留言反馈。

前几天用 docker 部署了个 umami 统计。发现里面的那个切换暗黑模式的按钮很有灵性，把玩了一下，算是知道咋做的了。自己就尝试搞一下。顺便玩玩 css3 小动画。之前都是复制拷贝扒样式，没有深入思考过 css3 动画要怎么从 0 写出来。

下面就来复刻一下这个效果。我这个结构跟原版的不一样额，原版貌似都是纯 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;
}

说点题外话儿
差不多就这些了。其实 css 里有一些东西要总结下，但是不知道怎么写，就这样吧。反正我也差不多理解到位了。不过说实话，css3 动画写起来还真是有点小麻烦。基本上我都是动画分解步骤来写的，先移动过渡，再透明过渡，最后大小过渡。一起写的话，会有点绕人。。。

文章来源于:https://mrju.cn/css3-switch-dark.html

css 特效 html 切换黑白暗黑

0 赞 or 打赏

喜欢就打赏一点