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