网站日夜模式切换 用 css3 代码制作动画小按钮

很多网站都有可以自由切换白天和晚上暗黑模式的按钮一直很羡慕。今天看到了有网友分享实现这种效果的代码，果断copy过来，希望大家喜欢。

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

文章来源于:https://mrju.cn/css3-switch-dark.html，看得出作者Css前端水平很高啊。虽然我的网站暂时没有启用这种日夜模式切换的效果，但是有备无患，先把代码收藏过来总是好的，建站有需要的朋友可以自行测试。

腾讯云代金券

新客户无门槛领取价值高达2860元代金券，每种券限量500张，先到先得。

￥2860

点击领取>>