css3实现switch开关效果

之前阿里电面的时候问的一个问题，今天抽时间做了个demo。

html结构

  <div class="container">    <div class="bg_con">      <input id="checked_1" type="checkbox" class="switch" />      <label for="checked_1"></label>    </div>  </div>

css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。 

.switch{    display:none;  }  label{    position:relative;    display: block;    padding: 1px;    border-radius: 24px;    height: 22px;    margin-bottom: 15px;    background-color: #eee;    cursor: pointer;    vertical-align: top;    -webkit-user-select: none;  }  label:before{    content: '';    display: block;    border-radius: 24px;    height: 22px;    background-color: white;    -webkit-transform: scale(1, 1);    -webkit-transition: all 0.3s ease;  }  label:after{    content: '';    position: absolute;    top: 50%;     left: 50%;     margin-top: -11px;     margin-left: -11px;    width: 22px;    height: 22px;    border-radius: 22px;    background-color: white;    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);    -webkit-transform: translateX(-9px);    -webkit-transition: all 0.3s ease;  }  .switch:checked~label:after{    -webkit-transform: translateX(9px);  }    .switch:checked~label:before{    background-color:green;  } 

原标题：css3实现switch开关效果

关键词：CSS