【实现样式】
【CSS写法】
.demo{width: 300px;}
.onoff{
overflow: hidden;
display: inline-block;
margin:0 0 -5px 15px;
width: 60px;height:20px;
border-radius: 20px;
border: solid 1px #999;
}
.onoff label{
display: block;
margin-left: -40px;
width: 100px;height: 20px;
text-align: right;color: #8B8B8B;border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DFDFDF),color-stop(1,#FEFEFE));
}
.onoff label::after{
position: relative;left:-17px;top: -20px;
display: inline-block;
content: '';width: 6px;height: 6px;
border: solid 2px #999;
border-radius: 10px;
}
.onoff i{
display: block;
width: 60px;height: 20px;
border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FE7D00),color-stop(1,#FEA753));
}
.onoff i::before{
position: relative;top: -7px;left:-15px;
display: inline-block;
content: '';width: 2px;height: 10px;
background-color: #fff;
}
.onoff i::after{
position: relative;top: -1px;left:1px;
display: inline-block;
content: '';width: 20px;height: 20px;
border: solid 1px #999;
border-radius: 50px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DADADA),color-stop(1,#FAFAFA));
box-shadow: inset 0 0 1px #fff;
}
/* can delete */
.onoff-on label{
margin-left: 0;
}
.onoff.onoff-on:hover label{
margin-left: -40px;
}
.onoff{
float: right
}
ul{
padding: 102px 28px 0 32px;
}
li{
font-family:microsoft yahei;list-style: none;font-size: 14px;color: #666;
border: solid 1px #bbb;
background-color: #fff;
border-radius: 10px;
padding: 8px 12px;
margin-bottom: 5px;
}
.onoff label{
-webkit-transition: all .5s ease-out;
}
.onoff:hover label{
margin-left: 0;
}
/*2*/
.onoff2{overflow: hidden;display: inline-block;margin:-4px 0 0 15px;width: 60px;height:25px;border-radius: 25px;border: solid 2px #ccc;-webkit-transition: all .5s ease;}
.onoff2:hover{ border-color:#0C0;}
.onoff2.onoff2-on:hover{border-color:#ccc;}
.onoff2 label{display: block;margin-left: -35px;width:100px;height: 25px;text-align: right;color: #8B8B8B;border-radius:20px;background:#eee;}
.onoff2 label::after{position: relative;left:-17px;top: -23px;display: inline-block;content: '';width: 6px;height: 6px;border: solid 2px #999;border-radius: 10px;}
.onoff2 i{display: block;width: 60px;height: 25px;border-radius:25px;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0C0),color-stop(1,#0c0));}
.onoff2 i::before{position: relative;top: -9px;left:-15px;display: inline-block;content: '';width: 2px;height: 10px;background-color: #fff;}
.onoff2 i::after{position: relative;left:0px;display: inline-block;content: '';width: 25px;height: 25px;border-radius: 50px;background:#FFF;box-shadow:0px 1px 10px #333;}
.onoff2-on{ border-color:#0C0;}
.onoff2-on label{margin-left: 0px;}
.onoff2.onoff2-on:hover label{margin-left: -35px;}
.onoff2{float: right;}
.onoff2 label{-webkit-transition: all .5s ease-out;}
.onoff2:hover label{margin-left: 0;}
<div class="demo-container demo">
<ul>
<li><span class="onoff"><label><i></i></label></span>样式1</li>
<li><span class="onoff onoff-on"><label><i></i></label></span>样式1</li>
<li><span class="onoff2"><label><i></i></label></span>样式2</li>
<li><span class="onoff2 onoff2-on"><label><i></i></label></span>样式2</li>
</ul>
</div>