神奇的hsl

HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。今天我们看看这种色彩模式，能在CSS中产生什么神奇的变化

这是效果图

代码在这儿：
https://codepen.io/woshilyy/p...

像一串糖葫芦，下面贴代码
HTML：

  <figure class="circle">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </figure>

一、先给所有的span一个样式

span {
            position: absolute;
            width: 100px;
            height: 100px;
            background: hsl(calc(360deg / 20 *var(--n)), 50%, 90%);
            top: calc(120px * var(--n));
            border-radius: 50%;
        }

二、用伪类给圆圈加线条

span::before {
            content: "";
            position: absolute;
            height: 20px;
            width: 2px;
            background: hsl(calc(360deg / 20 *var(--n)), 50%, 90%);
            left: calc((100px - 2px)/2);
            top: -20px;
        }

三、给每一个圆圈设置变量

span:nth-child(1) {
            --n: 1;
        }

        span:nth-child(2) {
            --n: 2;
        }

        span:nth-child(3) {
            --n: 3;
        }

        span:nth-child(4) {
            --n: 4;
        }

        span:nth-child(5) {
            --n: 5;
        }

        span:nth-child(6) {
            --n: 6;
        }

        span:nth-child(7) {
            --n: 7;
        }

        span:nth-child(8) {
            --n: 8;
        }

        span:nth-child(9) {
            --n: 9;
        }

        span:nth-child(10) {
            --n: 10;
        }

        span:nth-child(11) {
            --n: 11;
        }

        span:nth-child(12) {
            --n: 12;
        }

        span:nth-child(13) {
            --n: 13;
        }

        span:nth-child(14) {
            --n: 14;
        }

        span:nth-child(15) {
            --n: 15;
        }

        span:nth-child(16) {
            --n: 16;
        }

        span:nth-child(17) {
            --n: 17;
        }

        span:nth-child(18) {
            --n: 18;
        }

        span:nth-child(19) {
            --n: 19;
        }

        span:nth-child(20) {
            --n: 20;
        }

通过这个简单的示例，可以掌握hsl的用法以及css变量