iPhone Checkbox Effect

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

iPhone Checkbox Effect

分类

CSS3

描述

iPhone Checkbox Effect是一个很经典的CSS3的案例了，这样的效果到处可见，本代码就是一个这样的安全，希望通过这个安全让更多的人了解CSS3的使用。