点击(此处)折叠或打开

iPhone Checkbox Effect是一个很经典的CSS3的案例了，这样的效果到处可见，本代码就是一个这样的安全，希望通过这个安全让更多的人了解CSS3的使用。
<!DOCTYPE HTML>
<html lang=\"en-US\">
<head>
<meta charset=\"UTF-8\">
<title>iPhone Checkbox Effect</title>
<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>
</body>
</html>

ITPub博客

iPhone Checkbox Effect

最新文章