css3實(shí)現(xiàn)圓錐漸變conic-gradient效果
我要評(píng)論語法：
background-image: conic-gradient(from angle at position, start-color, ..., last-color )
第一個(gè)參數(shù)：
from angle ：起始的角度，可選，默認(rèn)為從上到下
position ：圓錐錐點(diǎn)的位置
第二個(gè)參數(shù)：
start-color ：定義開始顏色
stop-color ：定義結(jié)束顏色
1.第一個(gè)參數(shù)
同樣的，第一個(gè)參數(shù)可以為空，默認(rèn)的角度為 0deg ，錐心為形狀的 中心點(diǎn) 。例如：
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. 第二個(gè)參數(shù)
與線性、徑向漸變一樣，可以設(shè)顏色及漸變的起始位置。位置接受的參數(shù)有百分比和角度。例如：
background-image: conic-gradient(#69f 10%, #fd44ff 10%);
以上代碼等同于：
background-image: conic-gradient(#69f 36deg, #fd44ff 36deg);
顯示效果如下：
3. 重復(fù)圓錐漸變
與線性、徑向漸變一樣，圓錐漸變也有重復(fù)的屬性。
background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
效果如圖：
這個(gè)效果圖是不是有一點(diǎn)點(diǎn)熟悉的感覺呢？
我們來把它設(shè)置成圓形，加一個(gè)按鈕，就是一個(gè)抽獎(jiǎng)圓盤了。
效果如下：
地址： https://codepen.io/jianxiujiucan/pen/bGddbez
我們可以用圓錐做各式各樣的loading效果：
地址： https://codepen.io/jianxiujiucan/pen/bGdGyKN
第二個(gè)loading請(qǐng)自己研究一下并寫練習(xí)哦~
我們可以用漸變來繪制各式各樣的效果啦。
總結(jié)
以上所述是小編給大家介紹的css3實(shí)現(xiàn)圓錐漸變conic-gradient效果，希望對(duì)大家有所幫助！
相關(guān)文章
CSS3之前漸變色圖片只能用背景圖片，CSS3的漸變色語法可以讓我們省去下載圖片的開銷，并且在改變?yōu)g覽器分辨率時(shí)有更好的效果，這里就為大家介紹一下,需要的朋友可以參考下2020-03-06
這篇文章主要介紹了css實(shí)現(xiàn)透明漸變特效的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-02-18
通過css3背景控制屬性+使用顏色過渡實(shí)現(xiàn)漸變效果
這篇文章主要介紹了css3神奇的背景控制屬性+使用顏色過渡實(shí)現(xiàn)漂亮的漸變效果,非常不錯(cuò)，本文通過實(shí)例代碼效果圖展示的非常詳細(xì)，需要的朋友可以參考下2020-02-03
css3實(shí)現(xiàn)背景動(dòng)態(tài)漸變效果
這篇文章主要介紹了css3實(shí)現(xiàn)背景動(dòng)態(tài)漸變效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-10
CSS 實(shí)現(xiàn)漸變效果小結(jié)( linear-gradient線性漸變 和 radial-gradient徑
這篇文章主要介紹了CSS 實(shí)現(xiàn)漸變效果的代碼( linear-gradient線性漸變 和 radial-gradient徑向漸變),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的2020-04-16
