語法：

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

第一個參數(shù)：

from angle ：起始的角度，可選，默認為從上到下

position ：圓錐錐點的位置

第二個參數(shù)：

start-color ：定義開始顏色

stop-color ：定義結(jié)束顏色

1.第一個參數(shù)

同樣的，第一個參數(shù)可以為空，默認的角度為 0deg ，錐心為形狀的 中心點 。例如：

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

我們可以改變起始的角度，如：

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

改變錐心位置：

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

2. 第二個參數(shù)

與線性、徑向漸變一樣，可以設(shè)顏色及漸變的起始位置。位置接受的參數(shù)有百分比和角度。例如：

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

以上代碼等同于：

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

顯示效果如下：

3. 重復圓錐漸變

與線性、徑向漸變一樣，圓錐漸變也有重復的屬性。

background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);

效果如圖：

這個效果圖是不是有一點點熟悉的感覺呢？

我們來把它設(shè)置成圓形，加一個按鈕，就是一個抽獎圓盤了。

效果如下：

地址： https://codepen.io/jianxiujiucan/pen/bGddbez

我們可以用圓錐做各式各樣的loading效果：

地址： https://codepen.io/jianxiujiucan/pen/bGdGyKN

第二個loading請自己研究一下并寫練習哦~

我們可以用漸變來繪制各式各樣的效果啦。

總結(jié)

以上所述是小編給大家介紹的css3實現(xiàn)圓錐漸變conic-gradient效果，希望對大家有所幫助！

最新評論