新建一个页面，如下图。
把checkbox藏起来，切换按钮主要用label实现。给label加上适当的css属性
给label加上before和after伪类。before作为下面的横槽，after作为切换的圆按钮
先给label加上定位的css
#chk-toggle + label:before,
#chk-toggle + label:after {
display: block
position: absolute
top: 1px
left: 1px
bottom: 1px
content: ""
}
如果不写bottom，那before和after还需要分别写高度
加上原型按钮
#chk-toggle + label:after {
width: 58px
background-color: #fff
border-radius: 100%
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
transition: margin 0.4s
}
加底
#chk-toggle + label:before {
right: 1px
background-color: #f1f1f1
border-radius: 60px
transition: background 0.4s
}
注意，after和before中的transition都是为了之后的切换动作用的
现在只差最后的checked了
#chk-toggle:checked + label:before {
background-color: #8ce196
}
#chk-toggle:checked + label:after {
margin-left: 60px
}
在console中可以看到切换时，checkbox的状态
css是没有点击效果的，所以没法只通过css来实现图片互换，可以实现鼠标移上去背景图互换，使用:hover，li{background:none} li:hover{background:red}。点击效果必须使用js，当点击时，更改class。
