SOURCE

console 命令行工具 X clear

                    
>
console
<label class="checkbox">
  <input checked type="checkbox">
  <div></div>
</label>
.checkbox{
  display: block;
  width: 63px;
  height: 32px;
  position: relative;
}
.checkbox input{
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.checkbox div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 16px;
  border: 1px solid #DFDFDF;
  position: relative;
  background: #ffff;
  -webkit-transition: background-color .1s, border 0.1s;
  transition: background-color .1s, border 0.1s;
}
.checkbox div:after{
  display: block;
  content: "";
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 15px;
  position: absolute;
  top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.checkbox input:checked ~ div{
    border-color: #008fd0;
    background-color: #00b0ff;
}
.checkbox input:checked ~ div:after{
  -webkit-transform: translateX(31px)
}

本项目引用的自定义外部资源