現(xiàn)代瀏覽器越來(lái)越標(biāo)準(zhǔn)化了，這樣的好處就是很多好用的css可以跨瀏覽器運(yùn)行，效果很不錯(cuò)。大家看下面兩個(gè)loading樣式，實(shí)現(xiàn)起來(lái)也非常簡(jiǎn)單。
首先看下右邊那個(gè)，它其實(shí)只有三種顏色，你看到多余三種顏色，是因?yàn)楫?dāng)兩種顏色重疊到一起的時(shí)候，它會(huì)疊加出第三種顏色，這是mix-blend-mode: overlay的結(jié)果。現(xiàn)在我們來(lái)詳細(xì)說(shuō)一下，
首先是html:
由于有三種顏色，所以HTML結(jié)構(gòu)也非常簡(jiǎn)單。
每個(gè)spinner-sector代表一個(gè)顏色，現(xiàn)在我們加入一些基本樣式：
現(xiàn)在顯示結(jié)果如下：
加入紅色背景，是為了讓大家看清楚現(xiàn)在它長(zhǎng)什么樣。接下來(lái)，我們?nèi)サ艏t色背景，給每個(gè)spinner-sector的邊框上顏色，如下，給每個(gè)div分別上了，上邊框色和左右邊框色。
現(xiàn)在看起來(lái)如下：
注意看那個(gè)mix-blend-mode:overlay：它就是當(dāng)兩個(gè)顏色疊加一起，它會(huì)生成第三種顏色。比如下面這個(gè)，我們讓top和right合并起來(lái)，會(huì)合并出一個(gè)淡粉色，
顯示如下：
如果需要這個(gè)CSS的詳細(xì)說(shuō)明，可以去看MDN。接著，我們就可以給它加上動(dòng)畫了。我們用到里CSS property, 這樣每一個(gè)spinner-sector都會(huì)有不同的動(dòng)畫效果，并且有不同的速度，這樣他們就會(huì)產(chǎn)生不同的重疊，出現(xiàn)不同的顏色。
最終效果如下，不錯(cuò)吧，簡(jiǎn)單么？
這種方式挺靈活的，如果需要增加一種顏色，只要增加一個(gè)spinner-sector div，并進(jìn)行相應(yīng)的CSS配置就行了。
如果你不需要那么多顏色，并且希望HTML簡(jiǎn)單點(diǎn)，那可以使用CSS偽類實(shí)現(xiàn)，它只可以實(shí)現(xiàn)兩種顏色，因?yàn)橹挥?strong>::before, ::after可以使用，其實(shí)::before, ::after就是上面的spinner-sector, 它們的代碼實(shí)現(xiàn)基本上是一樣的
超簡(jiǎn)單的HTML：
偽類CSS：
效果如下：
雖然只有兩種顏色，但它也可以mix出來(lái)第三種顏色。效果也還行
