CSS3实现3D发光切换按钮

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现3D发光切换按钮的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现3D发光切换按钮</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle"><i></i></label>
<span></span>
</div>
</body>
</html>

CSS代码(style.css):

body{background:#202838;}
.switch input{top:0;right:0;bottom:0;left:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;z-index:100;position:absolute;width:100%;height:100%;cursor:pointer;}
.switch{width:180px;height:55px;position:relative;margin:100px auto;}
.switch label{display:block;width:80%;height:100%;position:relative;background:#1F2736;/*#121823*/
 background:linear-gradient(#121823,#161d2b);border-radius:30px 30px 30px 30px;box-shadow:inset 0 3px 8px 1px rgba(0,0,0,0.5),inset 0 1px 0 rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.2);-webkit-transition:all .5s ease;transition:all .5s ease;}
.switch input ~ label i{display:block;height:51px;width:51px;position:absolute;left:2px;top:2px;z-index:2;border-radius:inherit;background:#283446;/* Fallback */
 background:linear-gradient(#36455b,#283446);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 0 8px rgba(0,0,0,0.3),0 12px 12px rgba(0,0,0,0.4);-webkit-transition:all .5s ease;transition:all .5s ease;}
.switch label + span{content:"";display:inline-block;position:absolute;right:0px;top:17px;width:18px;height:18px;border-radius:10px;background:#283446;background:gradient-gradient(#36455b,#283446);box-shadow:inset 0 1px 0 rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.1),0 0 10px rgba(185,231,253,0),inset 0 0 8px rgba(0,0,0,0.9),inset 0 -2px 5px rgba(0,0,0,0.3),inset 0 -5px 5px rgba(0,0,0,0.5);-webkit-transition:all .5s ease;transition:all .5s ease;z-index:2;}
/* Toggle */
.switch input:checked ~ label + span{content:"";display:inline-block;position:absolute;width:18px;height:18px;border-radius:10px;-webkit-transition:all .5s ease;transition:all .5s ease;z-index:2;background:#b9f3fe;background:gradient-gradient(#ffffff,#77a1b9);box-shadow:inset 0 1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.1),0 0 10px rgba(100,231,253,1),inset 0 0 8px rgba( 61,157,247,0.8),inset 0 -2px 5px rgba(185,231,253,0.3),inset 0 -3px 8px rgba(185,231,253,0.5);}
.switch input:checked ~ label i{left:auto;left:63%;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 0 8px rgba(0,0,0,0.3),0 8px 8px rgba(0,0,0,0.3),inset -1px 0 1px #b9f3fe;-webkit-transition:all .5s ease;transition:all .5s ease;}

附件:下载该文件资源,减少时间成本(增值服务)