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: &＃39;&＃39;;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: &＃39;&＃39;;width: 2px;height: 10px;background-color: #fff;
}
.onoff i::after{position: relative;top: -1px;left:1px;display: inline-block;content: &＃39;&＃39;;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: &＃39;&＃39;;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: &＃39;&＃39;;width: 2px;height: 10px;background-color: #fff;}
.onoff2 i::after{position: relative;left:0px;display: inline-block;content: &＃39;&＃39;;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;}