建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹css3怎么實現(xiàn)圓錐漸變conic-gradient，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
語法：
background-image: conic-gradient(from angle at position, start-color, ..., last-color )
第一個參數(shù)：
from angle ：起始的角度，可選，默認(rèn)為從上到下
position ：圓錐錐點的位置
第二個參數(shù)：
start-color ：定義開始顏色
stop-color ：定義結(jié)束顏色
1.第一個參數(shù)
同樣的，第一個參數(shù)可以為空，默認(rèn)的角度為 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. 重復(fù)圓錐漸變
與線性、徑向漸變一樣，圓錐漸變也有重復(fù)的屬性。
background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
效果如圖：
這個效果圖是不是有一點點熟悉的感覺呢？
我們來把它設(shè)置成圓形，加一個按鈕，就是一個抽獎圓盤了。
效果如下：
我們可以用圓錐做各式各樣的loading效果：
第二個loading請自己研究一下并寫練習(xí)哦~
我們可以用漸變來繪制各式各樣的效果啦。
以上是“css3怎么實現(xiàn)圓錐漸變conic-gradient”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前標(biāo)題：css3怎么實現(xiàn)圓錐漸變conic-gradient-創(chuàng)新互聯(lián)
鏈接URL：http://www.dlmjj.cn/article/ijjhj.html
