css3怎么實(shí)現(xiàn)圓錐漸變conic-gradient

這篇文章主要介紹css3怎么實(shí)現(xiàn)圓錐漸變conic-gradient，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站一直在為企業(yè)提供服務(wù)，多年的磨煉，使我們在創(chuàng)意設(shè)計(jì)，營銷型網(wǎng)站到技術(shù)研發(fā)擁有了開發(fā)經(jīng)驗(yàn)。我們擅長傾聽企業(yè)需求，挖掘用戶對產(chǎn)品需求服務(wù)價(jià)值，為企業(yè)制作有用的創(chuàng)意設(shè)計(jì)體驗(yàn)。核心團(tuán)隊(duì)擁有超過十多年以上行業(yè)經(jīng)驗(yàn)，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領(lǐng)域，公司涉及領(lǐng)域有基礎(chǔ)互聯(lián)網(wǎng)服務(wù)綿陽服務(wù)器托管、app開發(fā)定制、手機(jī)移動(dòng)建站、網(wǎng)頁設(shè)計(jì)、網(wǎng)絡(luò)整合營銷。

語法：

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)圓盤了。

效果如下：

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

第二個(gè)loading請自己研究一下并寫練習(xí)哦~

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

以上是“css3怎么實(shí)現(xiàn)圓錐漸變conic-gradient”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：css3怎么實(shí)現(xiàn)圓錐漸變conic-gradient
當(dāng)前路徑：http://muchs.cn/article24/gdcpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、虛擬主機(jī)、網(wǎng)站收錄、外貿(mào)建站、小程序開發(fā)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)