写个开关按钮,效果如图：
当点击的时候：
利用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的值不起效果