switch开关

     

 

body{margin: 0; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background: rgba(44,91,110,1);}
.container{width: 75px; height: 32px; background: rgba(255,255,255,.4);border: 2px solid #fff; border-radius: 18px; position: relative;}
.item{display: block; height: 26px; width: 26px; border-radius: 15px; background: #fff;position: absolute; top: 1px; left: 1px;-webkit-transition: left .5s ease-out;transition: left .5s ease-out;}
@-webkit-keyframes move{
      0%{width: 26px; height:26px; top:3px;}
      30%{width: 46px; height:16px; top:8px;}
      100%{width:26px; height:26px; top:3px;}
}
@keyframes move{
      0%{width: 26px; height:26px; top:3px;}
      30%{width: 46px; height:16px; top:8px;}
      100%{width:26px; height:26px; top:3px;}
}
@-webkit-keyframes moveL{
      0%{width: 26px; height:26px; top:3px;}
      40%{width: 46px; height:16px; top:8px;}
      100%{width:26px; height:26px; top:3px;}
}
@keyframes moveL{
      0%{width: 26px; height:26px; top:3px;}
      40%{width: 46px; height:16px; top:8px;}
      100%{width:26px; height:26px; top:3px;}
}
<div class="container">
  <div class="item"></div>
</div>
var App={
  createView:function(){
    this.container=document.getElementsByClassName("container")[0];
    this.item=document.getElementsByClassName("item")[0];
    this.state=false;
  },
  toggleIt:function(ev){
    if(App.state){
      App.item.style.left="1px";
      App.item.style.animation="moveL .4s";
      App.state=false;
    }else{
      App.item.style.left="44px";
      App.item.style.animation="move .4s";
      App.state=true;
    }
  },
  bindEv:function(){
    this.container.addEventListener("click",this.toggleIt);
  },
  init:function(){
    this.createView();
    this.bindEv();
  }
}
App.init();