div+css实现逼真换挡开关点击效果代码-html代码-BFW代码库

div+css实现逼真换挡开关点击效果代码

代码语言：html

所属分类：其他

代码描述：div+css实现逼真换挡开关点击效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	font-family:arial,verdana,sans-serif;
	font-size:8px;
	background:#1E1E20;
	text-align:center
}
.switch {
	display:inline-block;
	margin:10em 2em;
	position:relative;
	border-radius:3.5em;
	-webkit-box-shadow:0 0 .5em rgba(255,255,255,0.2);
	-moz-box-shadow:0 0 .5em rgba(255,255,255,0.2);
	box-shadow:0 0 .5em rgba(255,255,255,0.2)
}
.switch label {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:10
}
.switch input {
	display:none
}
.switch span {
	display:block;
	-webkit-transition:top .2s;
	-moz-transition:top .2s;
	-ms-transition:top .2s;
	-o-transition:top .2s;
	transition:top .2s
}
.switch-border1 {
	border:.1em solid #000;
	border-radius:3.5em;
	-webkit-box-shadow:0 .2em rgba(255,255,255,0.2);
	-moz-box-shadow:0 .2em rgba(255,255,255,0.2);
	box-shadow:0 .2em rgba(255,255,255,0.2)
}
.switch-border2 {
	width:6.6em;
	height:12.6em;
	position:relative;
	border:.1em solid #323232;
	background-image:-webkit-gradient(linear,left top,right top,from(#2D2D2D),color-stop(0.5,#4B4B4B),to(#2D2D2D));
	background-image:-webkit-linear-gradient(left,#2D2D2D,#4B4B4B,#2D2D2D);
	background-image:-moz-linear-gradient(left,#2D2D2D,#4B4B4B,#2D2D2D);
	background-image:-ms-linear-gradient(left,#2D2D2D,#4B4B4B,#2D2D2D);
	background-image:-o-linear-gradient(left,#2D2D2D,#4B4B4B,#2D2D2D);
	background-image:linear-gradient(to right,#2D2D2D,#4B4B4B,#2D2D2D);
	border-radius:3.4em
}
.switch-border2:before,.switch-border2:after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	opacity:.3;
	border-radius:3.4em
}
.switch-border2:before {
	background:-webkit-gradient(linear,left top,left bottom,from(#000),to(rgba(0,0,0,0)));
	background:-webkit-linear-gradient(#000,rgba(0,0,0,0));
	background:-moz-linear-gradient(#000,rgba(0,0,0,0));
	background:-ms-linear-gradien.........完整代码请登录后点击上方下载按钮下载查看