js实现hwb颜色选择器拖拽生成css代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：js实现hwb颜色选择器拖拽生成css代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
* {
  box-sizing: border-box;
}

@keyframes moveBg {
  100% {
    background-position: 120px 120px;
  }
}
body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.hwb-panel {
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 179, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 50%, transparent 0), linear-gradient(rgba(0, 0, 0, 0.12) 50%, transparent 0);
  background-size: 120px 120px;
  background-position: 0 0;
  transition: 0.36s cubic-bezier(0.19, 1, 0.22, 1);
  animation: moveBg 9.66s linear forwards infinite;
}

.hwb-panel-inner {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 0px 3px rgba(51, 51, 179, 0.95) inset, 0 0 6px 3px;
  border-radius: 8px;
  background-color: hwb(0deg 100% 0%/75%);
  display: flex;
  flex-wrap: wrap;
  max-width: 660px;
  justify-content: space-between;
}

.editor-hue {
  width: 300px;
}

.editor-inputs {
  width: 300px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
}
.editor-inputs > div {
  margin: 2px 0;
}
.editor-inputs p {
  font-size: 18px;
  margin: 0;
  text-align: center;
}

h2 {
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 26px;
  color: #424242;
  width: 100%;
}

.sphere {
  display: none;
}

input {
  width: 100%;
  border: none;
  margin-bottom: 10px;
  box-shadow: 1px 1px 4px -1px #767676;
  height: 30px;
  border-radius: 3px;
  padding: 4px 6px;
}

.wheel-wrapper {
  position: relative;
}

.wheel {
  position: relative;
  transform: rotate(90deg);
  z-index: 1;
}
.wheel img {
  display: block;
  pointer-events: none;
  user-select: none;
}

.wheel-selector {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  transform-origin: 150px;
  z-index: 1;
  box-shadow: 0 0 25px 5px inset rgba(0, 0, 0, 0.75);
}

.hue {
  position: absolute;
  background: white;
  top: calc(50% - 92px);
  left: calc(50% - 92px);
  border-radius: 50%;
  height: 184px;
  width: 184px;
  overflow: hidden;
}
.hue input {
  position: absolute;
  width: 80%;
  top: calc(50% - 40px);
  left: 10%;
  height: 80px;
  box-shadow: none;
  padding: 0 20px;
  z-index: 1;
  margin: 0;
  font-size: 52px;
  font-weight: 600;
  text-align: center;
}
.hue input:focus {
  outline: none;
}
.hue span {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30px;
  text-align: center;
  font-size: 20px;
  z-index: 1;
}

.hue-selector {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 1;
}

input[type=range] {
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]:focus::-ms-fill-lower {
  background: #367ebd;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0 0 0 1px #000000, 0px 0px 1px 0 inset #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #000000, 0px 0px 1px 0 inset #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: #1e1e1e;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  cursor: pointer;
  height: 8px;
}

.result {
  margin: 20px auto 0 auto;
}

.result-code {
  color: #ffffff;
  background-color: #1e1e1e;
  padding: 20px;
  letter-spacing: 0.4px;
  border-radius: 12px;
}
.result-code div {
  color: #65bae0;
  font-size: 17px;
  margin-bottom: 10px;
}
.result-code div:last-child {
  margin-bottom: 0;
}
.result-code div span {
  color: #e06565;
}
.result-code div span:first-child {
  color: #e4d897;
}
.result-code .code-perc {
  color: #7fcf5e;
}
</style>




</head>

<body  >
  <div class="hwb-panel">
  <div class="hwb-panel-inner">
    <h2>hwb() color selector</h2>
    <div class="editor-hue">
      <div class="sphere"></div>
      <div class="wheel-wrapper">
        <div class="wheel">
          <img width="300px" src="//repo.bfw.wiki/bfwrepo/icon/63d87935ef8f0.png" alt="" srcset="">
          <div class="wheel-selector" style="transform: translate(-120px) rotate(240deg);"></div>
        </div>
        <div class="hue-selector"></div>
        <div class="hue">
          <span>Hue:</span>
          <input value="240">
        </div>
      </div>
    </div>
    <div class="editor-inputs">
      <div class="whiteness-selector">
        <p>Whiteness: <span class="whiteness-value"></span>%</p>
        <input type="range" min="0" max="100" value="20" class="whiteness-input">
      </div>
      <div class="blackness-selector">
        <p>Blackness: <span class="blackness-value"></span>%</p&.........完整代码请登录后点击上方下载按钮下载查看