html苹果滑动开关,纯CSS模拟IOS滑动选择开关按钮(原创)

/* 只为展示好看 ，可删除*/

body {

padding:30px;

}

body .IOS-radio-box {

display:inline-block;

margin-right:20px;

}

/*主要CSS*/

.IOS-radio-box {

position:relative;

width:120px;

height:58px;

}

.IOS-radio-box input {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

opacity:0;

z-index:99;

}

.IOS-switch {

overflow:hidden;

position:relative;

width:100%;

height:100%;

border-radius:100px;

background:#f84572;

box-shadow:0px 0px 2px #f84572 inset;

transition:all 0.2s ease-in-out;

}

.IOS-radio-box input:checked~.IOS-switch {

background:#0ebdca;

box-shadow:0px 0px 2px #0ebdca inset;

}

.IOS-cursor {

display:inline-block;

position:absolute;

top:3px;

left:3px;

width:52px;

height:52px;

border-radius:100%;

background:#fff;

box-shadow:0 1px 2px 0 rgba(0,0,0,0.2),0 3px 4px 0 rgba(0,0,0,0.1);

z-index:10;

-webkit-transition:all 0.2s linear;

-ms-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.IOS-radio-box input:checked~.IOS-switch .IOS-cursor {

left:64px;

}

.IOS-label {

position:absolute;

top:0;

width:70px;

font-size:28px;

line-height:58px;

color:#fff;

text-align:center;

-webkit-transition:all 0.2s linear;

-ms-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.IOS-label-on {

left:-55px;

opacity:0.5;

}

.IOS-radio-box input:checked~.IOS-switch .IOS-label-on {

left:3px;

opacity:1;

}

.IOS-label-off {

opacity:1;

right:0;

}

.IOS-radio-box input:checked~.IOS-switch .IOS-label-off {

opacity:0.5;

right:-55px;

}