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