神奇的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>

1、先給全部的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%;
        }

2、用僞類給圓圈加線條

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;
        }

3、給每個圓圈設置變量

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變量