css实现色盘色调效果代码-html代码-BFW代码库

css实现色盘色调效果代码

代码语言：html

代码描述：css实现色盘色调效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  --r: 0deg;
  --s: 100%;
  background-color: hsl(180, var(--s), 80%);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.colorwheel {
  --u: calc(100 / 12);
  border-radius: 50%;
  transform: rotate(-90deg);
  width: 100%;
}
.colorwheel circle {
  fill: none;
}
.colorwheel use {
  transform-origin: 50% 50%;
}

.c1 {
  stroke: hsl(0, var(--s), var(--l));
  stroke-dasharray: var(--u) 100;
}
.c2 {
  stroke: hsl(30, var(--s), var(--l));
  stroke-dasharray: calc(2 * var(--u)) 100;
}
.c3 {
  stroke: hsl(60, var(--s), var(--l));
  stroke-dasharray: calc(3 * var(--u)) 100;
}
.c4 {
  stroke: hsl(90, var(--s), var(--l));
  stroke-dasharray: calc(4 * var(--u)) 100;
}
.c5 {
  stroke: hsl(120, var(--s), var(--l));
  stroke-dasharray: calc(5 * var(--u)) 100;
}
.c6 {
  stroke: hsl(150, var(--s), var(--l));
  stroke-dasharray: calc(6 * var(--u)) 100;
}
.c7 {
  stroke: hsl(180, var(--s), var(--l));
  stroke-dasharray: calc(7 * var(--u)) 100;
}
.c8 {
  stroke: hsl(210, var(--s), var(--l));
  stroke-dasharray: calc(8 * var(--u)) 100;
}
.c9 {
  stroke: hsl(240, var(--s), var(--l));
  stroke-dasharray: calc(9 * var(--u)) 100;
}
.c10 {
  stroke: hsl(270, var(--s), var(--l));
  stroke-dasharray: calc(10 * var(--u)) 100;
}
.c11 {
  stroke: hsl(300, var(--s), var(--l));
  stroke-dasharray: calc(11 * var(--u)) 100;
}
.c12 {
  stroke: hsl(330, var(--s), var(--l));
  stroke-dasharray: 100.75 100;
}
.r1 {
  --l: 40%;
  stroke-width: 3;
  transform: rotate(var(--r));
}
.r2 {
  --l: 45%;
  stroke-width: 6;
  transform: rotate(calc(2 * var(--r)));
}
.r3 {
  --l: 50%;
  stroke-width: 9;
  transform: rotate(calc(3 * var(--r)));
}
.r4 {
  --l: 55%;
  stroke-width: 12;
  transform: rotate(calc(4 * var(--r)));
}
.r5 {
  --l: 60%;
  stroke-width: 15;
  transform: rotate(calc(5 * var(--r)));
}
.r6 {
  --l: 65%;
  stroke-width: 18;
  transform: rotate(calc(6 * var(--r)));
}
.r7 {
  --l: 70%;
  stroke-width: 21;
  transform: rotate(calc(7 * var(--r)));
}
.r8 {
  --l: 75%;
  stroke-width: 24;
  transform: rotate(calc(8 * var(--r)));
}
.r9 {
  --l: 80%;
  stroke-width: 27;
  transform: rotate(calc(9 * var(--r)));
}
.r10 {
  --l: 85%;
  stroke-width: 30;
  transform: rotate.........完整代码请登录后点击上方下载按钮下载查看