新建一个页面，如下图。
把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的重复播放动画的功能实现自动切换。
做了个小例子，你可以看看，基本的思路就这样了，效果还比较不错啦。这个思路还可以用来作为图片滚动播放的例子呢。
body部分代码：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
</div>
</body>
css的代码：
*{
padding:0
margin:0
}
html,body{
overflow-x:hidden
overflow-y:auto
}
#box1{
position:relative
width:500px
height:450px
margin:0 auto
background:red
overflow:hidden
}
#box2{
float:left
width:2000px
height:450px
animation:box2 2s both linear infinite
-webkit-animation:box2 2s both linear infinite/* Safari and Chrome */
}
#box2:hover {
animation-play-state: paused
}
@keyframes box2
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
img{
float:left
width:500px
height:450px
}
效果图；
好像时间间隔设置太短了，可以把动画播放的时间延长一点。
