2024-04-29 更新 137 阅读
前几天用 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 动画写起来还真是有点小麻烦。基本上我都是动画分解步骤来写的,先移动过渡,再透明过渡,最后大小过渡。一起写的话,会有点绕人。。。
评论已关闭