2016/02/16 codes

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>2016/02/16 codes</title>
<link rel="stylesheet" href="assets/reset.css">
<style>
.slideOne{
width: 50px;
height: 10px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
-webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
}
.slideOne label{
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -3px;
left: -3px;
cursor: pointer;
background: #fcfff4;
background: -moz-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
background: -webkit-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
background: linear-gradient(to bottom,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.slideOne input[type = checkbox]{
visibility: hidden;
}
.slideOne input[type = checkbox]:checked + label{
left: 37px;
}

.slideTwo{
width: 80px;
height: 30px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
-webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
}
.slideTwo:after{
content: ‘‘;
position: absolute;
top:14px;
left: 14px;
height: 2px;
width: 52px;
background: #111111;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-webkit-box-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo label{
display: block;
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
top:4px;
z-index: 1;
left: 4px;
background: #fcfff4;
-moz-border-radius: 50px;
-o-border-radius:50px;
border-radius: 50px;
-moz-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
transition:all 0.4s ease;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.slideTwo label:after{
content: ‘‘;
width: 10px;
height: 10px;
position: absolute;
top:6px;
left: 6px;
background: #333;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px black,0px 1px 0px rgba(255,255,255,0.9);
-webkit-box-shadow:inset 0px 1px 1px black,0px 1px 0px rgba(255,255,255,0.9);
box-shadow: inset 0px 1px 1px black,0px 1px 0px rgba(255,255,255,0.9);
}
.slideTwo input[type = checkbox]{
visibility: hidden;
}
.slideTwo input[type = checkbox]:checked + label{
left: 54px;
}
.slideTwo input[type = checkbox]:checked + label:after{
background: #00bf00;
}

.slideThree{
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
position: relative;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
-o-box-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after{
content: ‘OFF‘;
color: #000;
position: absolute;
right: 10px;
z-index: 0;
font:12px/26px Arial,sans-serif;
font-weight: bold;
text-shadow:1px 1px 0px rgba(255, 255, 255, 0.15);

}
.slideThree:before{
content: ‘ON‘;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.slideThree label{
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);

}
.slideThree input[type = checkbox]{
visibility: hidden;
}
.slideThree input[type = checkbox]:checked + label{
left: 43px;
}

.roundedOne{
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 0px white,0px 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:inset 0px 1px 0px white,0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 0px white,0px 1px 3px rgba(0,0,0,0.5);
}
.roundedOne label{
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
left: 4px;
top: 4px;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after{
content: ‘‘;
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #00bf00;
background: -moz-linear-gradient(top,#00bf00 0%,#009400 100%);
background: -webkit-linear-gradient(top,#00bf00 0%,#009400 100%);
background: linear-gradient(to bottom,#00bf00 0%,#009400 100%);
opacity: 0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label:hover::after{
filter:progid:DXImageTransForm.Microsoft.Alpha(opacity = 30);
opacity: 0.3;
}
.roundedOne input[type = checkbox]{
visibility: hidden;
}
.roundedOne input[type = checkbox]:checked + label:after{
filter:progid:DXImageTransForm.Microsoft.Alpha(enabled = false);
opacity: 1;
}

.roundedTwo{
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedTwo label{
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);
background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
</style>
</head>
<body>
<h1>9款超炫的CSS3复选框</h1>
<div class="ondisplay">
<section title=".slideOne">
<div class="slideOne">
<input type="checkbox" value="None" id = "slideOne" name="check" checked>
<label for = "slideOne"></label>
</div>
</section>
<section title=".slideTwo">
<div class="slideTwo">
<input type="checkbox" value="None" id = "slideTwo" name="check" checked>
<label for = "slideTwo"></label>
</div>
</section>
<section title=".slideThree">
<div class="slideThree">
<input type="checkbox" value="None" id = "slideThree" name="check" checked>
<label class="slideThree"></label>
</div>
</section>
<section title=".roundedOne">
<div class = "roundedOne">
<input type="checkbox" value="None" id = "roundedOne" name = "check" checked>
<label for = "roundedOne"></label>
</div>
</section>
<section title=".roundedTwo">
<div class="roundedTwo">
<input type="checkbox" value="None" id = "roundedTwo" name = "check" checked>
<label for = "roundedTwo"></label>
</div>
</section>
<section title=".squaredOne">
<div class="squaredOne">
<input type="checkbox" value="Node" id = "squaredOne" name="check" checked>
<label for = "squaredOne"></label>
</div>
</section>
<section title=".squaredTwo">
<input type="checkbox" value="None" id = "squaredTwo" name="check" checked>
<label for = "squaredTwo"></label>
</section>
<section title=".squaredThree">
<input type="checkbox" value="Node" id = "squaredThree" name="check" checked>
<label for="squaredThree"></label>
</section>
<section title=".squaredFour">
<input type="checkbox" value="Node" id = "squaredFour" name = "check" checked>
<label for = "squaredFour"></label>
</section>
</div>
<div class="footer-banner" style="margin: 30px auto;width: 728px"></div>
</body>
</html>

时间： 2024-08-05 10:54:32

2016/02/16 codes的相关文章

2016/02/21 codes

var Class = { create:function(){ var parent = null,properties = $A(arguments); if(Object.isFunction(properties[0])) parent = properties.shift(); function kclass(){ this.initialize.apply(this.arguments); } Object.extend(kclass,Class.Methods); kclass.s

2016/02/20 codes

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>2016/02/20</title></head><body><div id="mainDiv"> <div id = "content"> <div id = &qu

2016/02/27 codes

b2Math.b2Abs = function(a){return a > 0.0 ? a : -a ;};b2Math.b2AbsV = function(a){var b = new b2Vec2(b2Math.b2Abs(a.x),b2Math.b2Abs(a.y));return b};b2Math.b2AbsM=function(A){var B=new b2Mat22(0,b2Math.b2AbsV(A.col1),b2Math.b2AbsV(A.col2));return B;};

2016/02/15 codes

return e.addTest = function(a,b){ if(typeof a == "object") for(var d in a )y(a,d)&& e.addTest(d,a[d]); else{a = a.toLowerCase(); if(e[a]!== c)return e; b = typeof b = "function"?b():b, typeof f != "undefined" &&am

2016/02/06 codes

for(i = 0,I = p.length;I>i;i++)for(c = p[i]; c.n) { if(b){if(c,f){for( m = 0,n = c.f.length;n > m;m++)if(c.f[m] = b){c.f.splice(m,1);break}!c.f.length && delete c.f} for(d in c.n)if(c.n[e](d) && c.n[d].f) var q = c.n[d].f; for(m = 0,

2016/02/14 codes

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i

2016/03/16 codes

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>导航条2</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #nav{ width: 1000px; margin:10px

2016/02/24 codes

CrossVF:function (s){var tX = this.x;x.this = s * this.y;this.y = -s * tX;}, CrossFV:function (s){var tX = this.x;this.x = -s * this.y;this.y = s * tX;}, minV:function(b){this.x = this.x < b.x ? this.x: b.x;this.y = this.y < b.y ? this.y: b.y;}, max

2016/02/13 codes

return e.addTest = function(a,b){ if(typeof a == "object") for(var d in a )y(a,d)&& e.addTest(d,a[d]); else{a = a.toLowerCase(); if(e[a]!== c)return e; b = typeof b = "function"?b():b, typeof f != "undefined" &&am