纯CSS3滑动开关按钮特效

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3滑动开关按钮特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="container">
	<div class="switch-box">
		<input id="default" class="switch-box-input" type="checkbox" />
		<label for="default" class="switch-box-slider"></label>
		<label for="default" class="switch-box-label">Default</label>
	</div>
	<div class="switch-box is-primary">
		<input id="primary" class="switch-box-input" type="checkbox" checked />
		<label for="primary" class="switch-box-slider"></label>
		<label for="primary" class="switch-box-label">Primary</label>
	</div>
	<div class="switch-box is-info">
		<input id="info" class="switch-box-input" type="checkbox" checked />
		<label for="info" class="switch-box-slider"></label>
		<label for="info" class="switch-box-label">Info</label>
	</div>
	<div class="switch-box is-success">
		<input id="success" class="switch-box-input" type="checkbox" checked />
		<label for="success" class="switch-box-slider"></label>
		<label for="success" class="switch-box-label">Success</label>
	</div>
	<div class="switch-box is-danger">
		<input id="danger" class="switch-box-input" type="checkbox" checked />
		<label for="danger" class="switch-box-slider"></label>
		<label for="danger" class="switch-box-label">Danger</label>
	</div>
	<div class="switch-box is-warning">
		<input id="warning" class="switch-box-input" type="checkbox" checked />
		<label for="warning" class="switch-box-slider"></label>
		<label for="warning" class="switch-box-label">Warning</label>
	</div>
	<div class="switch-box is-primary">
		<input id="disabled" class="switch-box-input" type="checkbox" checked disabled />
		<label for="disabled" class="switch-box-slider"></label>
		<label for="disabled" class="switch-box-label">Disabled</label>
	</div>
</div>
</body>
</html>

CSS代码(zzsc.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}

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