效果图
原理
switch只有两个状态,开/关,跟input的checkbox一致,所以我们可以借助checkbox完成样式的切换;
html
一个简单的input
<input class="switch-component" type="checkbox">
复制代码
css
/* 背景层 */
.switch-component {
position: relative;
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;
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%;
}