CSS實現iphone式開關

【實現樣式】

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

【HTML寫法】

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