react实现led声音亮度拖动控制条代码-html代码-BFW代码库

react实现led声音亮度拖动控制条代码

代码语言：html

所属分类：拖放

代码描述：react实现led声音亮度拖动控制条代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  
  
<style>
* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --sat: 10%;
  --bg: hsl(var(--hue),var(--sat),30%);
  --fg: hsl(var(--hue),var(--sat),90%);
  font-size: 12px;
}

body,
input {
  font: 1em/1.5 sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  height: 100vh;
}

input {
  outline: transparent;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

main {
  display: flex;
  overflow-x: hidden;
  padding: 1.5em 0;
  width: 100vw;
  height: 100vh;
}

.grid {
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
}

.led-control {
  margin: auto;
  position: relative;
  width: 10.5em;
  height: 22em;
}
.led-control__icon {
  color: #eee;
  bottom: 2.5em;
  left: 2.5em;
  width: 5.5em;
  height: 5.5em;
}
.led-control__icon, .led-control__icon:before {
  position: absolute;
}
.led-control__icon:before {
  border-radius: 50%;
  content: "";
  display: block;
  filter: drop-shadow(1px 1px var(--bg)) drop-shadow(-1px 0 var(--bg)) drop-shadow(0 -1px var(--bg));
  top: 0.0625em;
  left: 0.0625em;
  width: 0.375em;
  height: 0.375em;
}
.led-control__icon--audio:before {
  box-shadow: 2.5em 0.5em, 2em 1em, 2.5em 1em, 1.5em 1.5em, 2em 1.5em, 2.5em 1.5em, 4.5em 1.5em, 0.5em 2em, 1em 2em, 1.5em 2em, 2em 2em, 2.5em 2em, 4em 2em, 0.5em 2.5em, 1em 2.5em, 1.5em 2.5em, 2em 2.5em, 2.5em 2.5em, 4.5em 2.5em, 0.5em 3em, 1em 3em, 1.5em 3em, 2em 3em, 2.5em 3em, 4em 3em, 1.5em 3.5em, 2em 3.5em, 2.5em 3.5em, 4.5em 3.5em, 2em 4em, 2.5em 4em, 2.5em 4.5em;
}
.led-control__icon--sun:before {
  box-shadow: 2.5em 0em, 0.5em 0.5em, 2.5em 0.5em, 4.5em 0.5em, 1em 1em, 2em 1em, 2.5em 1em, 3em 1em, 4em 1em, 1.5em 1.5em, 3.5em 1.5em, 1em 2em, 4em 2em, 0em 2.5em, 0.5em 2.5em, 1em 2.5em, 4em 2.5em, 4.5em 2.5em, 5em 2.5em, 1em 3em, 4em 3em, 1.5em 3.5em, 3.5em 3.5em, 1em 4em, 2em 4em, 2.5em 4em, 3em 4em, 4em 4em, 0.5em 4.5em, 2.5em 4.5em, 4.5em 4.5em, 2.5em 5em;
}
.led-control__input, .led-control__label, .led-control__layer, .led-control__layer-wrap {
  position: absolute;
}
.led-control__input {
  background-color: transparent;
  box-shadow: 0 0 0 0.25em transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 22em;
  height: 10.5em;
}
.led-control__input:focus-visible {
  box-shadow: 0 0 0 0.25em var(--fg);
}
.led-control__input::-webkit-slider-thumb {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  width: 2.5em;
  height: 10.5em;
  -webkit-appearance: none;
}
.led-control__input::-moz-range-thumb {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  width: 2.5em;
  height: 10.5em;
}
.led-control__label {
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.led-control__layer {
  background: url("data:image/svg+xml,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle fill='%23111' cx='4' .........完整代码请登录后点击上方下载按钮下载查看