<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3 iphone开关按钮 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<style type="text/css">
#checked {
font-family: "Lucida Grande", Verdana, Arial, sans-serif, Helvetica;
width: 300px;
position: relative;
margin: 20px auto;
}
.labelBox {
margin-bottom: 20px;
background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
background: linear-gradient(19% 75% 90deg,#3095C7, #14539C);
border-radius: 4px;
border: 1px solid #555555;
width: 80px;
position: relative;
height: 32px;
}
.labelBox::before,
.labelBox::after {
content:"ON";
padding-left: 9px;
line-height: 32px;
color: #fff;
font-size: 14px;
text-shadow: #093b5c 0 -1px 1px;
}
.labelBox::after {
content:"OFF";
padding-left: 12px;
}
.check {
display: block;
width: 40px;
height: 30px;
border-radius: 3px;
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
background: -webkit-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -ms-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -o-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
border: 1px solid #e5e5e5;
position: absolute;
top: 0px;
left: 0px;
}
input[type=checkbox] {
border: 0 none !important;
clip: rect(1px,1px,1px,1px);
height: 1px !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
}
@-webkit-keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 38px;
}
}
@-moz-keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 38px;
}
}
@-o-keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 38px;
}
}
@-ms-keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 38px;
}
}
@keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 38px;
}
}
@-webkit-keyframes labelOFF {
0% {
top: 0px;
left: 38px;
}
100% {
top: 0px;
left: 0px;
}
}
@-moz-keyframes labelOFF {
0% {
top: 0px;
left: 38px;
}
100% {
top: 0px;
left: 0px;
}
}
@-o-keyframes labelOFF {
0% {
top: 0px;
left: 38px;
}
100% {
top: 0px;
left: 0px;
}
}
@-ms-keyframes labelOFF {
0% {
top: 0px;
left: 38px;
}
100% {
top: 0px;
left: 0px;
}
}
@keyframes labelOFF {
0% {
top: 0px;
left: 38px;
}
100% {
top: 0px;
left: 0px;
}
}
input[type=checkbox]:checked + label.check {
top: 0px;
left: 38px;
-webkit-animation: labelON 0.2s ease-in 0s 1;
-moz-animation: labelON 0.2s ease-in 0s 1;
-o-animation: labelON 0.2s ease-in 0s 1;
-ms-animation: labelON 0.2s ease-in 0s 1;
animation: labelON 0.2s ease-in 0s 1;
box-shadow: #244766 -1px 0px 3px;
}
input[type=checkbox] + label.check {
top: 0px;
left: 0px;
-webkit-animation: labelOFF 0.2s ease-in 0s 1;
-moz-animation: labelOFF 0.2s ease-in 0s 1;
-o-animation: labelOFF 0.2s ease-in 0s 1;
-ms-animation: labelOFF 0.2s ease-in 0s 1;
animation: labelOFF 0.2s ease-in 0s 1;
box-shadow: #244766 1px 0px 3px;
}
label.info {
position: absolute;
color: #000;
top:0px;
left: 100px;
line-height: 32px;
width: 200px;
}
</style>
</head>
<body>
<div class="page">
<section class="demo">
<div id="checked">
<div class="labelBox">
<input type="checkbox" value="wi-fi" id="wifi" name="wifi" checked="checked" />
<label for="wifi" class="check"></label>
<label for="wifi" class="info">Wi-Fi</label>
</div>
<div class="labelBox">
<input type="checkbox" value="warpDrive" name="warpDrive" id="warpDrive" />
<label for="warpDrive" class="check"></label>
<label for="warpDrive" class="info">Warp Drive</label>
</div>
</div>
</section>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器:FireFox、Chrome、Safari、傲游、搜狗. 不支持IE8、360、Opera、世界之窗。</p>
<p>来源:<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a></p>
</div>
</body>
</html>