CSS3立体智能手机开关，网页开关超酷效果


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3立体开关</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 5px -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:'Ο'; 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>
</head>
<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>ΟΙ</div><b></b>
<span class='indicator'></span>
</label>
<label class='checkboxControl'>
<input type='checkbox' />
<div>ΟΙ</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>
</html>

全部评论

相关推荐

11-29 16:20
广东白云学院 数据运营
点赞 评论 收藏
分享
头像
昨天 00:17
四川职业技术学院 golang
点赞 评论 收藏
分享
11-07 10:30
门头沟学院 前端工程师
终于轮到我了
lastday&nbsp;知无不言
无敌虾孝子：喜欢爸爸还是喜欢妈妈
点赞 评论 收藏
分享
10-11 12:13
湖北工业大学 Java
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
11-27 10:48
点赞 评论 收藏
分享
评论
点赞
收藏
分享

全站热榜

正在热议
# 拼多多求职进展汇总 #
240631次浏览 2051人参与
# 实习，投递多份简历没人回复怎么办 #
2447580次浏览 34795人参与
# 北方华创开奖 #
67974次浏览 558人参与
# 25届秋招总结 #
425147次浏览 4294人参与
# 虾皮求职进展汇总 #
100490次浏览 810人参与
# 地方国企笔面经互助 #
7370次浏览 18人参与
# 阿里云管培生offer #
65362次浏览 1766人参与
# ai智能作图 #
35430次浏览 434人参与
# 中兴求职进展汇总 #
471054次浏览 2453人参与
# 我在牛爱网找对象 #
75233次浏览 556人参与
# 双非有机会进大厂吗 #
106173次浏览 1333人参与
# 实习想申请秋招offer，能不能argue薪资 #
37975次浏览 313人参与
# 机械求职避坑tips #
24211次浏览 252人参与
# 发工资后，你做的第一件事是什么 #
10587次浏览 52人参与
# 25届机械人为了秋招做了哪些准备？ #
26801次浏览 366人参与
# 投格力的你，拿到offer了吗？ #
47873次浏览 337人参与
# 我的实习求职记录 #
6144771次浏览 84084人参与
# 投递实习岗位前的准备 #
1193678次浏览 18510人参与
# 机械人怎么评价今年的华为 #
158454次浏览 1354人参与
# 在职场上，你最讨厌什么样的同事 #
6476次浏览 96人参与
# 实习与准备秋招该如何平衡 #
725973次浏览 8568人参与
# 华为工作体验 #
112483次浏览 871人参与
牛客网
牛客企业服务