jquery+css实现逼真灯光控制面板拖拽控制效果代码-html代码-BFW代码库

jquery+css实现逼真灯光控制面板拖拽控制效果代码

代码语言：html

代码描述：jquery+css实现逼真灯光控制面板拖拽控制效果代码

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

<html lang="en">

<head>
   
    <meta charset="UTF-8">
   <style>
html,body {
        height:100%;
        width:100%;
        overflow:hidden
}
body {
        background:#000 radial-gradient(ellipse at center,#8c8f95 0,#4e5054 100%) center center no-repeat
}
.dimmer {
        position:absolute;
        top:50%;
        left:50%;
        margin:-150px;
        width:300px;
        height:300px;
        border-radius:50px;
        background:#eaebea;
        background:linear-gradient(to bottom,#f3f4f3 0,#afb0b3 99%);
        box-shadow:0 20px 14px 0 rgba(70,70,70,0.4),0px 4px 10px -0px rgba(0,0,0,0.6),0px -4px 4px 4px #97979a inset
}
.dimmer:before {
        content:"";
        position:absolute;
        width:300px;
        left:50%;
        margin-left:-150px;
        height:190px;
        top:0;
        border-radius:50px;
        background:linear-gradient(to bottom,rgba(243,244,243,0.8) 0,rgba(243,244,243,0) 99%);
        z-index:1
}
.dimmer:after {
        content:"";
        position:absolute;
        top:22px;
        left:26px;
        width:250px;
        height:250px;
        border-radius:30px;
        box-shadow:0 -1px 2px 2px rgba(0,0,0,0.3) inset,0px 1px 3px 3px #f3f4f3 inset
}
.knob {
        z-index:20;
        cursor:pointer
}
.knob .center {
        position:absolute;
        width:116px;
        height:116px;
        left:50%;
        top:50%;
        margin:-58px 0 0 -58px;
        border-radius:160px;
        background:linear-gradient(to bottom,#e7e7e7 0,#bec0c3 99%);
        box-shadow:inset 0 5px 4px 2px rgba(0,0,0,0.35);
        z-index:2
}
.knob:before {
        content:"";
        position:absolute;
        width:164px;
        height:164px;
        left:50%;
        top:50%;
        margin:-82px 0 0 -82px;
        border-radius:.........完整代码请登录后点击上方下载按钮下载查看