你可能不知道的css骚操作 — switch切换😁
2019-08-05 本文已影响8人
聪明的汤姆

效果图
原理
switch只有两个状态,开/关,跟input的checkbox一致,所以我们可以借助checkbox完成样式的切换;
html
一个简单的input
<input class="switch-component" type="checkbox">
css
/* 背景层 */
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
/* 按钮 */
.switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
/* 选中状态时,背景色切换 */
.switch-component:checked {
background-color: #86c0fa;
}
/* 选中状态时,按钮的位置移动 */
.switch-component:checked::after {
left: 50%;
}
往期系列
这个系列会放许多你不知道的css骚操作,敬请期待!
如果你喜欢这篇文章,请别忘记点个赞或者关注哦🍟
欢迎所有前端爱好者关注我的个人微信公众号,我会不定期分享最新、实用性高的前端文章以及技巧!