html css 实现 switch 按钮

最近工作中接触到了原生js项目，之前接触的项目中涉及到ui样式，以及UI组件的部分，我们都会使用第三方的库来实现，比如，antdesign,elementui,那本项目中由于没有那么多的复杂的交互设计，单独为了几个特殊的组件引入一个ui库，代价有些大，所以就决定自己实现，正好把遗忘的css 知识捡起来～

先附上codepen 源码地址 codepen.io/sheilating/…

先来说下思路吧～

考虑使用input type=checkbox 来实现；原图 步骤如下：

1.隐藏掉checkbox 原来的方形选择框 2.结合label 实现椭圆按钮形状 3.使用label::before 伪类实现运动的小圆球，来切换开关 4.给小圆球添加动画，实现运动，当input 被选中状态时执行该动画

用到的css 知识点： border border-radius,transition,定位，伪类等；

<div class='wrapper'>
 <input type="checkbox" id='checkLabel'>
  <label for="checkLabel"></label>
</div>

.wrapper{
  width:300px;
  height:300px;
  border:1px solid;
  margin:50px auto;
  padding:100px;
  background:#ccc;
}

.wrapper input{
  display:none;
}
.wrapper label{
   position: relative;
  background:grey;
  cursor:pointer;
   width: 50px;
   height: 30px;
   border-radius: 100px;
   display:block;
}
.wrapper label::before {
  content:'';
   position: absolute;
/*   display:block; */
  width:30px;
  height:30px;
  border-radius: 30px;
  background:white;
  transition: all 0.36s;
  top:0px;
  left:0px;
}
.wrapper input:checked + label {
  background:green;
}
.wrapper input:checked + label::before {
  left: calc(100%);
      transform: translateX(-100%);
  transition: all .36s cubic-bezier(.78, .14, .15, .86);
}

需要注意的是，使用label::before 伪类给小圆球设置位置时需要相对于label设置绝对定位，这也是伪类常用的套路之一，主要是为了方便后面给小球加动画的时候，可以控制小球的原始位置，以及移动的位置。