js+css实现三维旋钮调光器调节光线亮度效果代码-html代码-BFW代码库

js+css实现三维旋钮调光器调节光线亮度效果代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现三维旋钮调光器调节光线亮度效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  --light-mode: inset 0px -4px 6px 0px #8b96a9, inset 0px 4px 4px 1px #f3f3f5,
    inset 0px 4px 6px 0px #b9bcc7, inset 0px -4px 0px 1px #b2becb,
    0px 5px 8px 1px #7f899c, 0px -15px 15px 9px #e5eaef, 0px 0px 2px 3px #181818,
    0px 7px 25px 5px #8893a6, 0px 15px 15px 0px #bec2c7,
    0px 55px 55px 5px #cad1db;
  --dark-mode: inset 0px -4px 6px 0px #191b28, inset 0px 4px 4px 1px #738196,
    inset 0px 4px 6px 0px #455265, inset 0px -4px 0px 1px #191b28,
    0px 5px 8px 1px #000000, 0px 0px 6px 3px #181b21, 0px 0px 2px 3px #181818,
    0px 7px 25px 5px #191b28, 0px -15px 25px 0px #73869f,
    0px 55px 55px 5px #191e2a;
  --knob-inner-light: inset 16px 5px 10px 0px #d6dce3,
    inset -20px 5px 10px 0 #a3aebf;
  --knob-inner-dark: inset -16px 5px 10px 0px #191e2a,
    inset 20px 5px 10px 0 #2e374b;
  --light-mode-background: linear-gradient(180deg, #f3f4f6, #aeb9c6);
  --dark-mode-background: linear-gradient(180deg, #384257, #171c26);
  --dark-mode-glare-color: #6d7c96;
  --text-color: #8391a7;
  --animation-duration: 5s;
}

* {
  margin: 0;
  padding: 0;
}

.dimmer-container {
  height: .........完整代码请登录后点击上方下载按钮下载查看