还挺好用的checkbox

 

 

 

 

 

html：<input class="switch1 switch-anim" style="vertical-align:middle;margin-left: 10px" type="checkbox" checked"> 列表播放

css:  

.switch1 {
  width: 30px;
  height: 18px;
  margin-left: -3px;
  position: relative;
  border: 1px solid #64bd63;
  background-color: #64bd63;
  box-shadow: #64bd63 0 0 0 0 inset;
  border-radius: 20px;
  background-clip: content-box;
  display: inline-block;
  -webkit-appearance: none;
  user-select: none;
  outline: none;
}
.switch1:before {
  content: '';
  width: 13px;
  height: 13px;
  position: absolute;
  top: 1px;
  left: 13px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch1:checked {
  border-color:  #64bd63;
  box-shadow: #64bd63 0 0 0 16px inset;
  background-color: #64bd63;
}
.switch1:checked:before {
  left: 0px;
}
.switch1.switch-anim {
  transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch1.switch-anim:before {
  transition: left 0.3s;
}
.switch1.switch-anim:checked {
  box-shadow: #fff 0 0 0 16px inset;
  background-color: #fff;
  transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.switch1.switch-anim:checked:before {
  transition: left 0.3s;
}