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.........完整代码请登录后点击上方下载按钮下载查看