纯CSS3左右滑动开关按钮特效代码

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

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

以下是纯CSS3左右滑动开关按钮特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3左右滑动开关按钮</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="switch">
<input type="checkbox" id="control" class="control">
<label for="control" class="checkbox"></label>
</div>
</body>
</html>

CSS代码(style.css):

body{background-color:#efebe8;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFEFEBE8',endColorstr='#FFE1D8CE');}
.switch{height:83px;width:234px;position:absolute;top:40%;left:40%;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;background-color:#d1d1d1;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFD1D1D1',endColorstr='#FFFEFBF7');background-image:-moz-linear-gradient(top,#d1d1d1 0%,#fefbf7 100%);background-image:-webkit-linear-gradient(top,#d1d1d1 0%,#fefbf7 100%);background-image:linear-gradient(to bottom,#d1d1d1 0%,#fefbf7 100%);}
.switch:after{height:70px;width:220px;position:absolute;top:7px;left:7px;content:'';z-index:2;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px;background-color:#a5a5a5;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFA5A5A5',endColorstr='#FFE8D7BE');background-image:-moz-linear-gradient(top,#a5a5a5 0%,#e8d7be 100%);background-image:-webkit-linear-gradient(top,#a5a5a5 0%,#e8d7be 100%);background-image:linear-gradient(to bottom,#a5a5a5 0%,#e8d7be 100%);}
.checkbox{height:60px;width:210px;position:absolute;top:12px;left:12px;z-index:10000;-moz-border-radius:35px;-webkit-border-radius:35px;border-radius:35px;-moz-box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);-webkit-box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);background-color:#f28a00;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFF28A00',endColorstr='#FFD86517');background-image:-moz-linear-gradient(top,#f28a00 0%,#e65300 67%,#d86517 100%);background-image:-webkit-linear-gradient(top,#f28a00 0%,#e65300 67%,#d86517 100%);background-image:linear-gradient(to bottom,#f28a00 0%,#e65300 67%,#d86517 100%);}
.checkbox:after{height:60px;width:117px;position:absolute;top:0;left:0;content:'';z-index:9999;-moz-border-radius:35px 0 0 35px;-webkit-border-radius:35px;border-radius:35px 0 0 35px;-moz-box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);-webkit-box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);box-shadow:inset 0px 9px 15px rgba(0,0,0,0.53),inset 0 -8px 10px rgba(0,0,0,0.14);background-color:#b1dd00;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFB1DD00',endColorstr='#FF84AD00');background-image:-moz-linear-gradient(top,#b1dd00 0%,#7eaf00 67%,#84ad00 100%);background-image:-webkit-linear-gradient(top,#b1dd00 0%,#7eaf00 67%,#84ad00 100%);background-image:linear-gradient(to bottom,#b1dd00 0%,#7eaf00 67%,#84ad00 100%);}
.control{height:73px;width:138px;outline:0;position:absolute;top:6px;left:6px;z-index:10001;-webkit-appearance:none;-moz-border-radius:36.5px;-webkit-border-radius:36.5px;border-radius:36.5px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.3),0 5px 15px rgba(0,0,0,0.55),inset 0 2px 0 #fafafa,inset 0 -2px 0 #ada39d;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3),0 5px 15px rgba(0,0,0,0.55),inset 0 2px 0 #fafafa,inset 0 -2px 0 #ada39d;box-shadow:0 0 5px rgba(0,0,0,0.3),0 5px 15px rgba(0,0,0,0.55),inset 0 2px 0 #fafafa,inset 0 -2px 0 #ada39d;background-color:#efefef;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFEFEFEF',endColorstr='#FFBCB9B8');background-image:-moz-linear-gradient(top,#efefef 32%,#bcb9b8 100%);background-image:-webkit-linear-gradient(top,#efefef 32%,#bcb9b8 100%);background-image:linear-gradient(to bottom,#efefef 32%,#bcb9b8 100%);-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.control:checked{left:91px;}
.control:after{height:40px;width:40px;position:absolute;right:15px;top:15px;content:'';z-index:10001;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background-color:#c2c0be;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#FFC2C0BE',endColorstr='#FFD7D7D7');background-image:-moz-linear-gradient(top,#c2c0be 0%,#d7d7d7 72%);background-image:-webkit-linear-gradient(top,#c2c0be 0%,#d7d7d7 72%);background-image:linear-gradient(to bottom,#c2c0be 0%,#d7d7d7 72%);}

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