react实现拖拽旋钮调节器效果代码-html代码-BFW代码库

react实现拖拽旋钮调节器效果代码

代码语言：html

所属分类：拖放

代码描述：react实现拖拽旋钮调节器效果代码，按住鼠标左键不放拖拽即可实现旋转旋钮指示值变化。

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

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

<head>
    <meta charset="UTF-8">

<style>
    html, body {
  height: 100vh;
}

body {
  margin: 0;
  background-image: radial-gradient(30% 50%, #555 6%, #333 90%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5em;
}

.knob {
  display: flex;
  position: relative;
}

.knob .ticks {
  position: absolute;
}

.knob .ticks .tick {
  position: absolute;
  background: black;
  box-shadow: inset 0 0 0 0 black;
  width: 3px;
  transition: box-shadow 0.5s;
}

.knob .ticks .tick.active {
  box-shadow: inset 0 0 5px 2px #509eec, 0 0 0 1px #369;
}

.knob.outer {
  border-radius: 50%;
  border: 1px solid #222;
  border-bottom: 5px solid #222;
  background-image: radial-gradient(100% 70%, #666 6%, #333 90%);
  box-shadow: 0 5px 15px 2px black, 0 0 5px 3px black, 0 0 0 12px #444;
}

.knob.inner {
  border-radius: 50%;
}

.knob.inner .grip {
  position: absolute;
  width: 5%;
  height: 5%;
  bottom:.........完整代码请登录后点击上方下载按钮下载查看