今天來(lái)用 css 實(shí)現(xiàn)一個(gè)帶圓角的環(huán)形 loading 動(dòng)畫，效果是這樣的
先不考慮動(dòng)畫，其實(shí)就是這樣一個(gè)圖形
那么，如何來(lái)繪制呢？下面花兩分鐘一起看看吧。
一、CSS實(shí)現(xiàn)思路
首先，看到這環(huán)形逐漸消失的效果，也就是透明度漸變的效果，肯定要聯(lián)想到錐形漸變。
conic-gradient() - CSS：層疊樣式表 | MDN (mozilla.org)[1]
通過錐形漸變，可以很輕松的實(shí)現(xiàn)這樣一個(gè)效果，透明到純色的漸變。
loading{
background: conic-gradient(transparent 10%, royalblue 90%)
}
效果如下：
然后，整體是一個(gè)環(huán)形，可以通過徑向漸變配合mask遮罩實(shí)現(xiàn)。
radial-gradient() - CSS：層疊樣式表 | MDN (mozilla.org)[2]
mask - CSS: Cascading Style Sheets | MDN (mozilla.org)[3]
loading{
/*...*/
-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);
}
原理是這樣的。
還有一個(gè)圓角，可以直接用徑向漸變實(shí)現(xiàn)。
loading{
background: radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,
conic-gradient(transparent 10%, royalblue 90%);;
}
其實(shí)就是兩個(gè)相同顏色的漸變疊加到一起形成的，如下：
所以完整代碼就是。
loading{
width: 200px;
height: 200px;
background:
radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,
conic-gradient(transparent 10%, royalblue 90%);
-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);
}
二、更好地自定義顏色
上面的實(shí)現(xiàn)雖然很好的滿足了需求，但是，還是有些CSS設(shè)計(jì)問題。
比如，我如果需要改變 loading 的顏色，需要改變兩個(gè)地方。
很明顯，這樣的實(shí)現(xiàn)不太符合 DRY（Don't Repeat Yourself）原則。
有一個(gè)比較簡(jiǎn)單思路可以用 CSS 變量來(lái)傳遞。
loading{
--color: royalblue;
background:
radial-gradient( closest-side circle, var(--color) 99%, transparent 100%) center top/25% 25% no-repeat,
conic-gradient(transparent 10%, var(--color) 90%);
-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);
}
這樣每次都只需要改變一個(gè)變量就行了。
loading.red{
--color: red;
}
除了這種方式以外，其實(shí)還有一點(diǎn)需要考慮，為啥背景不能干凈一點(diǎn)、純粹一點(diǎn)呢？換個(gè)說法，現(xiàn)在的背景實(shí)現(xiàn)對(duì)于不了解的同學(xué)來(lái)講，可能會(huì)很費(fèi)勁，能否將這些細(xì)節(jié)隱藏起來(lái)，更直觀地去自定義顏色呢？比如像這種方式。
loading.red{
background: red;
}
如果要實(shí)現(xiàn)這樣的效果，就需要將繪制部分全部在mask遮罩中完成，背景只是展示而已。
那么，如何通過mask遮罩實(shí)現(xiàn)這樣的圖形呢？
三、更直觀地去自定義顏色
mask?遮罩其實(shí)也和 CSS 背景差不多，只是多了一些圖形合成操作，其實(shí)就是布爾運(yùn)算，也就是mask-composite。
mask-composite - CSS: Cascading Style Sheets | MDN (mozilla.org)[4]
/* Keyword values */
mask-composite: add; /* 疊加（默認(rèn)） */
mask-composite: subtract; /* 減去，排除掉上層的區(qū)域 */
mask-composite: intersect; /* 相交，只顯示重合的地方 */
mask-composite: exclude; /* 排除，只顯示不重合的地方 */
相信在很多圖形設(shè)計(jì)軟件中都見到類似的操作（下面是 Photoshop）。
這個(gè)屬性的值（標(biāo)準(zhǔn)和非標(biāo)準(zhǔn)）非常多，-webkit-mask-composite[5] 與標(biāo)準(zhǔn)下的值有所不同，屬性值非常多，如下（chorme 、safari 支持）。
-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; /*疊加，兩者都顯示*/
-webkit-mask-composite: source-in; /*只顯示重合的地方*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over; /*疊加，兩者都顯示*/
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只顯示不重合的地方*/
之前在這篇文章中有詳細(xì)介紹 mask-composite 的用法，有興趣的可以回顧一下。
CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果[6]
回到這里，思考一下
