国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 錐形漸變conic-gradient,你了解多少

錐形漸變conic-gradient,你了解多少

來源:千鋒教育
發(fā)布人:syq
時間: 2022-07-28 16:46:28 1658997988

  對于漸變實際我們已經接觸過,像什么線性漸變linear-gradient啦,還有徑向漸變radial-gradient啦 我們來看一下使用默認漸變方式做一個四色漸變:紅色-粉色-黃色-天藍色。

1

  當然,我們這次的重點并不是這線性漸變和徑向漸變,而是一個第三個圖中的錐形漸變conic-gradient,顧名思義,錐形錐形,就是漸變的圖案像圓錐,下面這張圖可以完美的展示出錐形漸變與徑向漸變的差別。

2

  現(xiàn)在就來正式學習一下吧。

  錐形漸變的語法

0

  1、起始角度 angle

  可選項,角度前加from關鍵字,代表以此角度為起始,使用順時針方向進行漸變旋轉,例:

3

  2、中心位置 position

  可選項,位置前加at關鍵字,可設置錐形漸變的中心位置,設置值與background-position相同,例

  background: conic-gradient(at 25% 25%, red, pink);

4

  默認情況下,錐形漸變的中心點為正中心,而設置position后,值都是以盒子的左上角起點開始計算,但是不建議使用bottom top left right關鍵字,為啥,看看下圖就曉得了

5

  注意點:

  當起始角度 angle與中心位置position同時存在時一定記得不要加逗號!!

  background: conic-gradient(from 45deg at 25% 25%, red, pink);

6

  3、顏色斷點 angular-color-stop-list

  上方我們用的案例都是直接使用( red, pink ),像另外兩個漸變一樣,我們可以設置每個顏色的"起始位置",以紅色-粉色兩個顏色的漸變舉例

7

  大家可以發(fā)現(xiàn),圖二中設置了pink為45deg,并不是代表漸變的起始角度,而是在45度時,到達我們設置的粉色最深色

  圖三設置的12.5%與圖二的45deg效果相等,這個百分比的代表,一圈為360度,45度就是12.5%

  那,如果前一個色與后一個色的顏色角度相等會出現(xiàn)什么效果呢

8

  background: conic-gradient(red 180deg, pink 180deg);

  既然這樣,我們就可以使用錐形漸變做出一個餅圖效果

9

  錐形漸變的應用-餅圖

  利用顏色起始、結束色的角度或百分比我們可以做出一個餅圖效果

  但很明顯,這樣每一個顏色都需要計算角度是比較麻煩的事情,這時我們可以使用漸變斷點的一個特性:當后面的漸變斷點位置比前面的斷點位置小的時候,會自動按照前面較大的斷點位置渲染,也就是說我們可以直接簡單的設置為

  background: conic-gradient(red 40%, pink 0deg 60%, yellow 0deg);

10

  寫在最后

  這篇文章只是大致的介紹了一下錐形漸變最簡單的用法,在實際應用當中我們可以更加靈活使用

  比如:

  將多種漸變結合在一起,實現(xiàn)特殊形狀效果

  把錐形漸變結合動畫實現(xiàn)炫酷的按鈕動畫

  更多關于前端培訓的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。

  注:本文部分文字和圖片來源于網(wǎng)絡,如有侵權,請聯(lián)系刪除。版權歸原作者所有!

 

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業(yè)內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT