<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
padding: 50px;
}
.toggle .box{
display: inline-block;
border-radius: 32px;
width: 52px;
height: 32px;
background-color: #ccc;
position: relative;
transition: all ease 0.7s; //延迟0.7秒完成改变
}
//在span中添加白球
.toggle .box:after{
content: "";
position: absolute;
left:2px;
top:2px;
width: 28px;
height: 28px;
background-color: #fff;
border-radius: 28px;
transition: all ease 0.7s; //延迟0.7秒完成改变
}
//点击背景变色 复选框选中
.toggle input:checked+.box{
background-color: #007AFF;
}
//点击白球移动
.toggle input:checked+.box:after{
left:23px;
}
</style>
</head>
<body>
<label class="toggle">
<input type="checkbox"/>
<span class="box"></span>
</label>
</body>
</html>
//效果图