vue+hamster实现色轮满意度选择器效果代码-html代码-BFW代码库

vue+hamster实现色轮满意度选择器效果代码

代码语言：html

所属分类：选择器

代码描述：vue+hamster实现色轮满意度选择器效果代码

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


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

<head>

  <meta charset="UTF-8">


  
<style>
:root {
  --bg: #ebebeb;
  background: var(--bg);
  font-family: monospace;
}

.wrap {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  margin-inline: auto;
}

.wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /*background: #202124;*/
  perspective: 1200px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wheel::after,
.wheel::before,
.wheel__step {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%) scale(calc(.2 + var(--cd, 0) * .8));
  border-radius: 50%;
  background: conic-gradient(var(--grad));
}

.wheel__step--inv {
  opacity: 0;
  transition: 200ms opacity linear;
}

.wheel--inv .wheel__step--inv {
  opacity: 1;
  transition-delay: calc(.4s * var(--cd, 0));
}

.wheel::after,
.wheel::before {
  content: "";
  background: var(--bg);
}

.wheel::before {
  z-index: 1;
  background: hsl(var(--r), calc(100% * var(--sat, 1)), calc(100% * var(--light, 1)));
  transform: translate(-50%, -50%) scale(0.11);
}

.wheel__huelabel {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  font-weight: normal;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%) rotate(calc(-90deg + var(--i, 0) * 360deg));
  font-size: 2vmin;
  padding: 0.2em 1em 0.2em 94%;
  z-index: 1;
}

.wheel__huelabel::before,
.wheel__huelabel::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 91%;
  right: 3.5em;
  height: 1px;
  background: #202124;
  transform: translateY(50%);
}

.wheel__huelabel::after {
  height: 30%;
  aspect-ratio: 1;
  right: auto;
  left: 90%;
  background: hsl(calc(360 * var(--i, 0)), 100%, 70%);
  border-radius: 50%;
  border: 3px solid var(--bg);
  transform: translate(-50%, 50%);
}

.wheel__marker {
  position: absolute;
  height: 80%;
  width: 1px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) rotate(calc(var(--r, 0) * 1deg));
}

.wheel__marker::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 50%;
  width: 100%;
  background: #fff;
}
</style>



</head>

<body >
  <div id="app" class="wrap" ref="wrap" @mousemove.capture="picker($event)" v-bind:style="{'--r': currentHue, '--light': currentLight, '--sat': currentSat, '--s': currentSat}" @click="invertSL">
  <div class="wheel" v-bind:class="{'wheel--inv': invertedSL}">
    <strong class="wheel__huelabel" v-for="i in hueLabelSteps" :style="{'--i': i/hueLabelSteps}">{{i * 10}}</strong>
    <div class="wheel__step" v-for="i in rims" :style="{'--cd.........完整代码请登录后点击上方下载按钮下载查看