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

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

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