聊聊css漸變

1、線性漸變

語法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

第一個參數爲方向，可忽略不寫，不寫時默認顯示的方向爲從上到下。

例如：

background-image: linear-gradient(#69f, #fd44ff);

顯示的效果爲：

方向的數值能夠爲：

to bottom(從上到下)
to right(從左到右)
to left(從右到左)
to top(從下到上)
to top left(從右下角到左上角)
to top right(從左下角到右上角)
to bottom left(從右上角到左下角)
to bottom right(從右下角到左上角)

例如：

background-image: radial-gradient(to right, #69f, #fd44ff);
background-image: radial-gradient(to top right, #69f, #fd44ff);

該代碼同時能夠用角度寫爲：

background-image: radial-gradient(90deg, #69f, #fd44ff);
background-image: radial-gradient(45deg, #69f, #fd44ff);

顯示效果以下：

第二個參數爲顏色 & 位置，可寫多個顏色。

每一個顏色的位置對應的是該顏色的起始顏色。如：

background-image: linear-gradient(#69f 20%, #fd44ff);
background-image: linear-gradient(#69f 50%, #fd44ff);
background-image: linear-gradient(#69f 20%, #fd44ff 80%);
background-image: linear-gradient(#69f 50%, #fd44ff 50%);

顯示效果爲：

當咱們把兩個色值的起始點設爲一樣數值的時候，會發現色塊的銜接處沒有過渡效果了。
那麼咱們就能夠用這個特性來實現多種效果。好比走馬燈效果：

.light{
    margin: 100px;
    width: 400px;
    height: 20px;
    background: linear-gradient(-45deg,#fff 20%, #000 20% 40%, #fff 40% 60%, #000 60% 80%, #fff 80%);
    background-size: 20%;
    border: solid 1px #000;
    animation: run 5s linear infinite both;
}
@keyframes run{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 100% 0;
    }
}

之後重複的線條，好比棋盤。

.chess {
    width: 300px;
    height: 300px;
    background: #eac991;
    background-image: repeating-linear-gradient(transparent, transparent 19px, #333 20px), repeating-linear-gradient(to right, transparent, transparent 19px, #333 20px);
    border: solid 3px #333;
    border-radius: 3px;
    position: relative;
    &:after{
        width: 15px;
        height: 15px;
        position: absolute;
        border-radius: 50%;
        background: #000;
        content: '';
        left:92px;
        top: 92px;
        box-shadow: 0 22px 0 #000, 20px 22px 0 #fff, 20px 41px 0 #fff, -20px 22px 0 #fff, -20px 41px 0 #000, 41px 41px 0 #000
    }
}

https://codepen.io/jianxiujiu...

2、徑向漸變

語法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

第一個參數shape爲形狀和圓心位置，可忽略不寫，不寫時默認爲橢圓，圓心位置爲形狀的中心。

例如：

background-image: radial-gradient(#69f, #fd44ff);

以上代碼等同於：

background-image: radial-gradient(ellipse, #69f, #fd44ff);

設置爲圓形

background-image: radial-gradient(cricle, #69f, #fd44ff);

第一個參數的size爲半徑，半徑爲形狀的對角線的一半。若是寫一個參數則爲圓形，寫兩個參數（參數值不相同）則爲橢圓：

background-image: radial-gradient(100px, #69f, #fd44ff);  //半徑爲100px的圓
background-image: radial-gradient(200px 100px, #69f, #fd44ff);  //長軸爲200px，短半軸爲100px的橢圓

第一個參數的position爲圓心位置，位置的數值能夠爲：

at center
at top
at right
at bottom
at left
at top left
at top right
at bottom left
at bottom right

例如：

background-image: radial-gradient(at top, #69f, #fd44ff); // 圓心在頂端中間位置
background-image: radial-gradient(at top right, #69f, #fd44ff); // 圓心在右上角位置

如圖所示：

圓心位置也能夠爲具體數值，上面代碼等同於：

background-image: radial-gradient(at 150px 0,#69f, #fd44ff); 
background-image: radial-gradient(at 300px 0,#69f, #fd44ff);

3、圓錐漸變

語法：

background-image: conic-gradient(from angle at position, start-color, ..., last-color )

一樣的，第一個參數能夠不寫，默認的角度爲0deg，錐心爲形狀的中心點。例如：

background-image: conic-gradient(#69f, #fd44ff);

咱們能夠改變起始的位置，如：

background-image: conic-gradient(from -90deg, #69f, #fd44ff);

改變錐心位置：

conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

未完待續。。。