css实现逼真物理按钮旋钮点击档位切换动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现逼真物理按钮旋钮点击档位切换动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
	height:100%
}
body {
	font-family:Helvetica,Arial,sans-serif;
	color:#333;
	font-size:13px;
	background:#fefefe;
	background:-moz-linear-gradient(top,#fefefe 0,#dbe5e7 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#dbe5e7));
	background:-webkit-linear-gradient(top,#fefefe 0,#dbe5e7 100%);
	background:-o-linear-gradient(top,#fefefe 0,#dbe5e7 100%);
	background-attachment:fixed
}
.container {
	width:230px;
	width:230px;
	margin:40px auto 0
}
.container .origin {
	position:absolute;
	left:50%;
	top:50%;
	z-index:111;
	width:2px;
	height:2px;
	margin:-1px 0 0 -1px;
	background-color:#f50
}
.de {
	-webkit-user-select:none;
	position:relative;
	width:230px;
	height:230px;
	border-radius:100%;
	box-shadow:0 0 25px rgba(0,0,0,.1);
	background-color:transparent
}
.de .den,.de .dene,.de .denem,.de .deneme,.de .light,.de .dot {
	position:absolute;
	left:50%;
	top:50%
}
.den {
	position:relative;
	width:220px;
	height:220px;
	margin:-110px 0 0 -110px;
	border-radius:100%;
	box-shadow:inset 0 3px 10px rgba(0,0,0,.6),0 2px 20px rgba(255,255,255,1);
	background:#888;
	background:-moz-radial-gradient(center,ellipse cover,#888 0,#333 100%);
	background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#888),color-stop(100%,#333));
	background:-webkit-radial-gradient(center,ellipse cover,#888 0,#333 100%);
	background:-o-radial-gradient(center,ellipse cover,#888 0,#333 100%)
}
.dene {
	z-index:4;
	width:140px;
	height:140px;
	margin:-70px 0 0 -70px;
	border-radius:100%;
	box-shadow:inset 0 2px 2px rgba(255,255,255,.4),0 3px 13px rgba(0,0,0,.85);
	background:#f2f6f5;
	background:-moz-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f2f6f5),color-stop(100%,#cbd5d6));
	background:-webkit-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%);
	background:-o-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%)
}
.denem {
	width:120px;
	height:120px;
	margin:-60px 0 0 -60px;
	border-radius:100%;
	background:#cbd5d6;
	background:-moz-linear-gradient(top,#cbd5d6 0,#f2f6f5 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#cbd5d6),color-stop(100%,#f2f6f5));
	background:-webkit-linear-gradient(top,#cbd5d6 0,#f2f6f5 100%);
	background:-o-linear-gradient(top,#cbd5d6 0,#f2f6f5 100%)
}
.deneme {
	width:100px;
	height:100px;
	margin:-50px 0 0 -50px;
	border-radius:100%;
	box-shadow:inset 0 2px 3px rgba(255,255,255,.6),0 8px 20px rgba(0,0,0,.9);
	background:#eef7f6;
	background:-moz-linear-gradient(top,#eef7f6 0,#8d989a 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eef7f6),color-stop(100%,#8d989a));
	background:-webkit-linear-gradient(top,#eef7f6 0,#8d989a 100%);
	background:-o-linear-gradient(top,#eef7f6 0,#8d989a 100%)
}
.den .switch {
	z-index:3;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}
.den .switch label {
	z-index:2;
	position:absolute;
	top:50%;
	left:50%;
	width:50%;
	height:70px;
	margin-top:-35px;
	-moz-transform-origin:0 50%;
	-webkit-transform-origin:0 50%;
	-o-transform-origin:0 50%
}
.den .switch label:after {
	content:"";
	position:absolute;
	top:6px;
	left:1px;
	width:100%;
	height:30px;
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg)
}
.den .switch label:before {
	content:"";
	position:absolute;
	bottom:6px;
	left:1px;
	width:100%;
	height:30px;
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg)
}
.den .switch label span {
	z-index:2;
	position:absolute;
	top:0;
	right:0;
	width:40px;
	height:100%;
	font-weight:bold;
	font-size:15px;
	line-height:70px;
	text-align:center;
	color:#eee;
	text-shadow:0 1px 0 #444
}
.den .switch label:nth-child(1) {
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg)
}
.den .switch label:nth-child(1) span {
	right:2px;
	font-size:13px;
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg)
}
.den .switch label:nth-child(2) {
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg)
}
.den .switch label:nth-child(2) span {
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg)
}
.den .switch label:nth-child(3) {
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg)
}
.den .switch label:nth-child(3) span {
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg)
}
.den .switch label:nth-child(4) {
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-o-transform:rotate(90deg)
}
.den .switch label:nth-child(4) span {
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg)
}
.den .switch label:nth-child(5) {
	-moz-transform:rotate(150deg);
	-webkit-transform:rotate(150deg);
	-o-transform:rotate(150deg)
}
.den .switch label:nth-child(5) span {
	-moz-transform:rotate(-150deg);
	-webkit-transform:rotate(-150deg);
	-o-transform:rotate(-150deg)
}
.den .switch label:nth-child(6) {
	-moz-transform:rotate(210deg);
	-webkit-transform:rotate(210deg);
	-o-transform:rotate(210deg)
}
.den .switch label:nth-child(6) span {
	-moz-transform:rotate(-210deg);
	-webkit-transform:rotate(-210deg);
	-o-transform:rotate(-210deg)
}
.den .switch input {
	position:absolute;
	opacity:0;
	visibility:hidden
}
.den .light {
	z-index:1;
	width:50%;
	height:100px;
	margin-top:-50px;
	-moz-transform-origin:0 50%;
	-webkit-transform-origin:0 50%;
	-o-transform-origin:0 50%;
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-o-transition:all .5s
}
.den .light span {
	opacity:.4;
	position:absolute;
	top:0;
	left:15px;
	width:100px;
	height:100px;
	background:-moz-radial-gradient(center,ellipse cover,rgba(184,163,204,1) 0,rgba(159,197,224,0.42) 42%,rgba(111,113,179,0) 72%,rgba(67,34,137,0) 100%);
	background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(18.........完整代码请登录后点击上方下载按钮下载查看