参考链接:https://zhuanlan.zhihu.com/p/41726464?utm_source=qq&utm_medium=social&utm_oi=1010468739178987520
结构部分
<input class='switch-component' type='checkbox'>
样式部分
/* 背景层 */
.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%;
}