image
效果图
image
原理
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%;
}
最后
本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦 💨
image
微信公众号
「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习 🌘
