css3实现switch开关效果

html结构

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;
 }