iPhone Checkbox Effect

2020-01-27 14:18:02

字体：大中小

来源：转载

供稿：网友

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>

上一篇：CSS3 Box-Shadow Effects阴影图片框效果

下一篇：纯CSS3制作秒表