CSS3立体スマホスイッチ、クールエフェクト付きWebスイッチ_html/css_WEB-ITnose

<script><br>var snd = new Audio('');<br>document.addEventListener('change', function(e){<br> if( e.target.parentNode.className.indexOf('checkboxControl') != -1){<br> snd.currentTime = 0;<br> snd.play(); <br></script>
*{ マージン:0;パディング:0; }
html, body{ 高さ:100%; }
body{ font:15px/1 arial;テキスト整列:中央;背景:#509DAD; }
body:before{ content:'';表示:インラインブロック;高さ:100%;垂直配置:中央; }
フィールドセット{ディスプレイ:インラインブロック;垂直配置:中央;境界線:なし;幅:370ピクセル; }
.legend{ color:rgba(0,0,0,.7);フォントサイズ:12px;マージン-ボトム:14px;高さ:15ピクセル;境界線の色:#2E6677;境界線のスタイル:実線;ボーダー幅:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) インセット; text-shadow:0 1px rgba(255,255,255,.3); }
.legend span{ text-transform:uppercase;位置:相対;上:-5px;パディング:0 10px;背景:#509DAD;表示:インラインブロック; }
.checkboxGroup{ 表示:インラインブロック;垂直配置:中央;幅:150ピクセル;境界線:なし; }
.checkboxControl{
border:2px ソリッド #102838;境界半径:7px;表示:インラインブロック;幅:100ピクセル;高さ:50ピクセル;パディングトップ:1px;位置:相対;垂直配置:中央;マージン: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) インセット、8px 0 5px -5px #02425C インセット、-8px 0 5px -5px #02425C inset;-moz-user-select:none; -webkit-user-select:none;背景:#80DCE9;
}
.checkboxControl input{ 位置:絶対;可視性:非表示; }
.checkboxControl > div{
背景:-webkit-linear-gradient(左, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
背景:線形グラデーション(右へ, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
box-shadow:-2px 0 1px 0 #A6F2FE inset;
border-radius:5px;行の高さ:50ピクセル;フォントの太さ:太字;カーソル:ポインタ;位置:相対; z インデックス:1; text-shadow:0 1px rgba(255,255,255,0.5);

transform-origin:0 0; -webkit-transform-origin:0 0;
変換:scaleX(0.93); -webkit-transform:scaleX(0.93);
トランジション:.1s; -webkit-transition:0.1s;
}
.checkboxControl div:first-letter{ 文字間隔: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(右へ, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
}
.checkboxControl > b{ 位置: 絶対;下:0;右:0;幅:50%;高さ:100%;境界半径:8px; -webkit-transform:skewY(5deg);変換:スキューY(5度);ボックスシャドウ: 0 6px 8px -5px #000; }
.checkboxControl :checked ~ b{ right:auto;左:0; -webkit-transform:skewY(-5deg);変換:スキューY(-5度); }
.checkboxControl .indicator{ 位置:絶対;上:14ピクセル;右:-20ピクセル;幅:8px;高さ:25ピクセル;ボックスシャドウ:0 0 8px #000 インセット;ボーダー:1px ソリッド rgba(255,255,255,0.1);境界半径:15px;トランジション:0.2秒; -webkit-transition:0.2秒; }
.checkboxControl .indicator:before{ content:'';表示:インラインブロック;マージントップ:8px;幅:2ピクセル;高さ:8px;境界半径:10px;トランジション:0.5秒; -webkit-transition:0.5秒; }
.checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58;幅:6px;背景:#F0F9E3;トランジション:0.1秒; -webkit-transition:0.1秒; }
.checkboxControl2{
border:2px ソリッド #102838;境界半径:7px;表示:インラインブロック;垂直配置:中央;フォントの太さ:太字;
幅:60px;高さ:100ピクセル;位置:相対;マージン:0 5px;
カラー:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);
}
.checkboxControl2 input{ 位置:絶対;可視性:非表示; }
.checkboxControl2 > div{
background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
背景:線形グラデーション(下から、#002B44 0%、#0690AC 11%、#038EAA 14%、#A0F2FE 58%、#91DBE7 96%、#B9E8E8 100%);
高さ:100%;境界半径:5px;行の高さ:50ピクセル; font-we0 0 3px 0px #F95757 インセット、0 0 12px 6px #F95757tion:relative; z インデックス:1;カーソル:ポインタ; text-shadow:0 1px rgba(255,255,255,0.5);
}
.checkboxControl2 > div:after{
content:'Ο';表示ブロック;高さ:50%;行の高さ:4;
変換原点:0 0; -webkit-transform-origin:0 0;
}
.checkboxControl2 > div:before{
content:'Ι';表示ブロック;高さ: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(先頭へ, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
}
.checkboxControl2 :checked ~ div:before{
border-radius:0;ボックスシャドウ:なし;
変換:なし; -webkit-transform:none;
}
.checkboxControl2 :checked ~ div:after{
border-radius:80%/5px;
box-shadow:0 -8px 12px -5px #89DFED インセット、0 2px 2px 0 #0690AC ;
transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
}
.checkboxControl2 .indicator{position:absolute;上:-20px;左:17ピクセル;幅:25ピクセル;高さ:8px;ボックスシャドウ:0 0 8px #000 インセット;ボーダー:1px ソリッド rgba(255,255,255,0.1);境界半径:15px;トランジション:0.2秒; -webkit-transition:0.2秒; }
.checkboxControl2 .indicator:before{ content:'';表示ブロック;マージン:2px 自動;幅:8px;高さ:5ピクセル;境界半径:10px;トランジション:0.5秒; -webkit-transition:0.5秒; }
.checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757;背景:#FFF;トランジション:0.1秒; -webkit-transition:0.1秒; }