HTML代码:
<h4>开关</h4>
<label class="switch">
<input type="checkbox" name="switch" checked>
<span></span>
</label>
CSS代码:
.switch {cursor: pointer;}
.switch span {
display: inline-block;
width: 36px; height: 20px;
border-radius: 10px;
background-color: #999;
position: relative;
/* 0.4秒切换背景色 */
transition: background-color .4s;
}
.switch span:before {
content: '';
width: 16px; height: 16px;
border-radius: 50%;
position: absolute;
left: 2px; top: 2px;
background-color: #fff;
/* 0.4秒切换左边距离 */
transition: left .4s;
}
.switch input {display: none;}
/* 借助input的checked属性实现切换 */
.switch input:checked + span {
background-color: #2979ff;
/* 0.4秒切换背景色 */
transition: background-color .4s;
}
.switch input:checked + span:before {
left: 18px;
/* 0.4秒切换左边距离 */
transition: left .4s;
}
效果图: