前端经验_纯CSS写一个开关按钮

写个开关按钮,效果如图：

当点击的时候：

利用CSS3 过渡的动画效果

结构上写一个输入框为CheckBox ，利用label绑定。实现点击之后切换

HTML代码：

CSS3代码：

<style>

.onoffswitch{

   position:absolute;

   width:50px;

   display:block;

   left:50%;

   margin-left:-27px;

  -webkit-user-select:none;

  -moz-user-select:none;

  -ms-user-select:none;

}

.onoff_checkbox{

display:none;

}

.onoff_label{

display:block;

overflow:hidden;

cursor:pointer;

border:2px solid #999;

border-radius:20px;

}

.onoff_inter{

display:block;

width:200%;

margin-left:-100%;

transition:margin 0.3s ease-in 0s;

}

.onoff_inter:before,

.onoff_inter:after{

  display:block;

  float:left;

  height:20px;

  width:50%;

  padding:0;

  line-height:20px;

  font-size:14px;

  color:white;

  font-family:Trebuchet,Arial,sans-serif;

  font-weight:700;

  box-sizing:border-box;//box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

}

.onoff_inter:before{

   content:'';

   padding-left:13px;

   background-color:#4FACDB ;

   color:#FFFFFF;

}

.onoff_inter:after{

  content:'';

  padding-right:13px;

  background-color:#F50E4C;

  color:#FAFAFA;

  text-align:center;

}

.onoff_switch{

  display:block;

  width:14px;

  margin:4px;

  background:#FFFFFF;

  position:absolute;

   top:0;

  bottom:0;

  right:25px;

  border:1px solid #999999;

   border-radius:20px;

   transition:all 0.3s ease-in 0s;

}

.onoff_checkbox:checked+.onoff_label .onoff_inter{

     margin-left:0;

}

.onoff_checkbox:checked+.onoff_label .onoff_switch{

    right:0;

}

.SAP{

   position:absolute;

   left:0;

}

.FBOI{

   position:absolute;

   right:0;

}

</style>

当checked 是选中的情况下，onoff_inter的margin-left为0，显示的是onoff_inter：before的内容。当再次点击，因为绑定了label，所以checked为未选中的状态，

onoff_inter的margin-left应该变为-100%，margin发生改变，这时它定义的动画（transition:margin 0.3s ease-in 0s;）就会生效，

就会过渡到margin-left为-100%的情况，显示出onoff_inter：after的内容。

同理，小圈圈switch也是这个样子的

注意过渡的目标应该是固定的，transition:left 0.3s ease-in 0s; 比如说这里要发生过渡的目标是left，那我们就应该改变left的值，修改right的值不起效果