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