CSS3 three-dimensional smart phone switch, web switch super cool effect

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
&LT;TITLE&GT;CSS3 Stereo Switch </title>
<script>
var snd = new Audio (");
Document.addeventlistener (' Change ', function (e) {
if (E.target.parentnode.classname.indexof (' Checkboxcontrol ')! =-1) {
Snd.currenttime = 0;
Snd.play ();
}
});
</script>
<style>
*{margin:0; padding:0;}
HTML, body{height:100%;}
body{font:15px/1 Arial; text-align:center; background: #509DAD;}
body:before{content: '; display:inline-block; height:100%; vertical-align:middle;}
fieldset{display:inline-block; vertical-align:middle; border:none; width:370px;}
. legend{Color:rgba (0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; Border-color: #2E6677; Border-style: Solid border-width:1px 1px 0 1px; box-shadow:1px 1px 0 Rgba (255,255,255,0.2) inset; text-shadow:0 1px rgba (255,255,255,.3); }
. Legend span{Text-transform:uppercase; position:relative; top:-5px; padding:0 10px; Background: #509DAD; Display:inline-block; }
. checkboxgroup{Display:inline-block; vertical-align:middle; width:150px; border:none;}
. checkboxcontrol{
border:2px solid #102838; border-radius:7px; Display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; Vertical-align:middle; margin:0 60px 10px 0; Color: #297597;
box-shadow:0 0 5px Rgba (255,255,255,.4), 0 2px 1px-1px rgba (255,255,255,.7) inset, 8px 0 5px-5px #02425C inset,-8px 0 5 px-5px #02425C Inset;-moz-user-select:none; -webkit-user-select:none; Background: #80DCE9;
}
. Checkboxcontrol input{Position:absolute; visibility:hidden;}
. Checkboxcontrol > div{
Background:-webkit-linear-gradient (left, #8FD9E4 0, #A0F2FE 53%, #69DCF1 56%, #33AFCE 99%, #CEF5FF 100%);
Background:linear-gradient (to right, #8FD9E4 0, #A0F2FE 53%, #69DCF1 56%, #33AFCE 99%, #CEF5FF 100%);
box-shadow:-2px 0 1px 0 #A6F2FE inset;
border-radius:5px; line-height:50px; Font-weight:bold; Cursor:pointer; position:relative; Z-index:1; text-shadow:0 1px rgba (255,255,255,0.5);

transform-origin:0 0; -webkit-transform-origin:0 0;
Transform:scalex (0.93); -webkit-transform:scalex (0.93);
Transition:.1s; -webkit-transition:0.1s;
}
. Checkboxcontrol div:first-letter{letter-spacing:55px;}
. checkboxcontrol:checked ~ div{
transform-origin:100% 0; -webkit-transform-origin:100% 0;
box-shadow:2px 0 1px 0 #A6F2FE inset;
Background:-webkit-linear-gradient (left, #CEF5FF 0, #33AFCE 1, #69DCF1 47%, #A0F2FE 50%, #8FD9E4 100%);
Background:linear-gradient (to right, #CEF5FF 0, #33AFCE 1, #69DCF1 47%, #A0F2FE 50%, #8FD9E4 100%);
}
. checkboxcontrol > b{position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px;- Webkit-transform:skewy (5DEG); Transform:skewy (5DEG); box-shadow:0 6px 8px-5px #000; }
. checkboxcontrol:checked ~ b{right:auto; left:0;-webkit-transform:skewy ( -5deg); Transform:skewy ( -5deg);}
. Checkboxcontrol. indicator{position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid Rgba (255,255,255,0.1); border-radius:15px; Transition:0.2s; -webkit-transition:0.2s; }
. Checkboxcontrol. indicator:before{content: "; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
. checkboxcontrol:checked ~. indicator:before{box-shadow:0 0 7px 6px #BAFC58; width:6px; Background: #F0F9E3; Transition:0.1s; -webkit-transition:0.1s; }
. checkboxcontrol2{
border:2px solid #102838; border-radius:7px; Display:inline-block; Vertical-align:middle; Font-weight:bold;
width:60px; height:100px; position:relative; margin:0 5px;
Color: #12678C; box-shadow:0 0 5px Rgba (255,255,255,.4);
}
. checkboxControl2 input{Position:absolute; visibility:hidden;}
. checkboxControl2 > div{
Background:-webkit-linear-gradient (Top, #002B44 0, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
Background:linear-gradient (to bottom, #002B44 0, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
height:100%; border-radius:5px; line-height:50px; Font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion: relative; Z-index:1; Cursor:pointer; text-shadow:0 1px rgba (255,255,255,0.5);
}
. checkboxControl2 > div:after{
Content: ' 0 '; Display:block; height:50%; Line-height:4;
transform-origin:0 0; -webkit-transform-origin:0 0;
}
. checkboxControl2 > div:before{
Content: ' Ι '; Display:block; height:50%; line-height:2.5;
border-radius:80%/5px;
box-shadow:0 8px 12px-13px #89DFED inset, 0-2px 2px-1px Rgba (255,255,255,0.8);
transform-origin:0 100%; -webkit-transform-origin:0 100%;
Transform:scaley (0.7); -webkit-transform:scaley (0.7);
}
. checkboxcontrol2:checked ~ div{
Background:-webkit-linear-gradient (Bottom, #002B44 0, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
Background:linear-gradient (to top, #002B44 0, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
}
. checkboxcontrol2:checked ~ div:before{
border-radius:0; Box-shadow:none;
Transform:none; -webkit-transform:none;
}
. checkboxcontrol2:checked ~ div:after{
border-radius:80%/5px;
box-shadow:0 -8px 12px-5px #89DFED inset, 0 2px 2px 0 #0690AC;
Transform:scaley (0.7); -webkit-transform:scaley (0.7);
}
. checkboxControl2. indicator{position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid Rgba (255,255,255,0.1); border-radius:15px; Transition:0.2s; -webkit-transition:0.2s; }
. checkboxControl2. indicator:before{content: "; display:block; margin:2px auto; width:8px; height:5px; Border-radius : 10px; transition:0.5s; -webkit-transition:0.5s; }
. checkboxcontrol2:checked ~. indicator:before{box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; Background: #FFF; Transition:0.1s; -webkit-transition:0.1s; }
</style>
<body>
<div>http://www.999jiujiu.com/</div>
<fieldset>
<div class= ' legend ' ><span>power switchs</span></div>
<div class= ' CheckboxGroup ' >
<label class= ' Checkboxcontrol ' >
<input type= ' checkbox '/>
<div>0Ι</div><b></b>
<span class= ' indicator ' ></span>
</label>
<label class= ' Checkboxcontrol ' >
<input type= ' checkbox '/>
<div>0Ι</div><b></b>
<span class= ' indicator ' ></span>
</label>
</div>
<label class= ' checkboxControl2 ' >
<input type= ' checkbox '/>
<div></div>
<span class= ' indicator ' ></span>
</label>
<label class= ' checkboxControl2 ' >
<input type= ' checkbox '/>
<div></div>
<span class= ' indicator ' ></span>
</label>
</fieldset>
</body>

CSS3 three-dimensional smart phone switch, web switch super cool effect