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:-we.........完整代码请登录后点击上方下载按钮下载查看