div+css布局实现彩色渐变色卡效果代码-html代码-BFW代码库

div+css布局实现彩色渐变色卡效果代码

代码语言：html

代码描述：div+css布局实现彩色渐变色卡效果代码

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

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

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

  
  
  
<style>
:root {
  --stops: 9.5;

  --stop-1: calc(100% / var(--stops) * 1);
  --stop-2: calc(100% / var(--stops) * 2);
  --stop-3: calc(100% / var(--stops) * 3);
  --stop-4: calc(100% / var(--stops) * 4);
  --stop-5: calc(100% / var(--stops) * 5);
  --stop-6: calc(100% / var(--stops) * 6);
  --stop-7: calc(100% / var(--stops) * 7);

  --lightness-step-1: 1.60;
  --lightness-step-2: 1.50;
  --lightness-step-3: 1.20;
  --lightness-step-4: 1.00;
  --lightness-step-5: 0.70;
  --lightness-step-6: 0.50;
  --lightness-step-7: 0.40;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #333;
}

div {
  margin: 5dvh auto 0;
  width: min(80dvh, 100%);
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;

  & span {
    width: 100%;
    aspect-ratio: 1;
    position: absolute;
    z-index: -1;    

    background: radial-gradient(
      circle,
      hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-1))) 0,
      hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-1))) var(--stop-1),

      hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-2))) var(--stop-1),
      hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-2))) var(--stop-2),

      hsl(var(--color-deg) var(--saturation) calc(var(--lightness) * var(--lightness-step-3)).........完整代码请登录后点击上方下载按钮下载查看