CSS 也能實(shí)現(xiàn)極光效果？你要學(xué)嗎？

使用 CSS 可以實(shí)現(xiàn)極光嗎？

像是這樣：

emmm，這有點(diǎn)難為人了。不過，最近我也嘗試著去試了下，雖然不可能模擬出那么真實(shí)的效果，但是使用 CSS 還是可以作出類似的一些特效的，今天我們就一起來嘗試下。

觀察了一些極光的圖片之后，我發(fā)現(xiàn)了極光動(dòng)畫中一些比較重要的元素：

1. 基于深色背景的明亮漸變色彩
2. 類似于水波流動(dòng)的動(dòng)畫效果

明亮漸變色彩我們可以盡量使用 漸變 模擬。而水波流動(dòng)的動(dòng)畫效果，在 SVG 濾鏡中 feturbulence 就是專門干這個(gè)的，這個(gè)濾鏡的使用在我過去的多篇文章中也有反復(fù)的提及過。

而除了漸變、SVG 的 濾鏡之外，我們可能還會(huì)用到混合模式（mix-blend-mode）、CSS 濾鏡等提升效果。

OK，有了大概的思路后，剩下的就是不斷的嘗試。

Step 1. 繪制深色背景

首先，我們可能需要一個(gè)深色的背景，用于表示我們的夜空。同時(shí)點(diǎn)綴一些星星，星星可以使用 box-shadow 模擬，這樣，一副夜空背景我們可以在 1 個(gè) div 內(nèi)完成：

<div?class="g-wrap">
div>

@function?randomNum($max,?$min:?0,?$u:?1)?{
?@return?($min?+?random($max))?*?$u;
}

@function?shadowSet($n,?$size)?{
????$shadow?:?0?0?0?0?#fff;
????
????@for?$i?from?0?through?$n?{?
????????$x:?randomNum(350);
????????$y:?randomNum(500);
????????$scale:?randomNum($size)?/?10;
????????
????????$shadow:?$shadow,?#{$x}px?#{$y}px?0?#{$scale}px?rgba(255,?255,?255,?.8);
????}
????
????@return?$shadow;
}

.g-wrap?{
????position:?relative;
????width:?350px;
????height:?500px;
????background:?#0b1a3a;
????overflow:?hidden;
????
????&::before?{
????????content:?"";
????????position:?absolute;
????????width:?1px;
????????height:?1px;
????????border-radius:?50%;
????????box-shadow:?shadowSet(100,?6);
}

這一步比較簡單，借助了 SASS 之后，我們能夠得到這樣一幅夜空背景圖：

Step 2. 使用漸變畫出極光的輪廓

接下來，就是利用漸變，畫出極光的一個(gè)輪廓效果。

其實(shí)就是一個(gè)徑向漸變：

<div?class="g-wrap">
??<div?class="g-aurora">div>
div>

.g-aurora?{
????width:?400px;
????height:?300px;
????background:?radial-gradient(
????????circle?at?100%?100%,
????????transparent?45%,
????????#bd63c1?55%,
????????#53e5a6?65%,
????????transparent?85%
????);
}

Step 3. 旋轉(zhuǎn)拉伸

目前看來，是有一點(diǎn)點(diǎn)輪廓了。下一步，我們把得到的這個(gè)漸變效果通過旋轉(zhuǎn)拉伸變換一下。

.g-aurora?{
????...
????transform:?rotate(45deg)?scaleX(1.4);
}

我們大概就能得到這樣一個(gè)效果：

Step 4. 神奇的混合模式變換！

到這里，其實(shí)雛形已經(jīng)出來了。但是顏色看著不太像，為了和深色的背景融合在一起，這里我們運(yùn)用上混合模式 mix-blend-mode。

.g-aurora?{
????...
????transform:?rotate(45deg)?scaleX(1.4);
????mix-blend-mode:?color-dodge;
}

神奇的事情發(fā)生了，看看效果：

整體的顏色看上去更加像極光的顏色。

Step 5. 疊加 SVG feturbulence 濾鏡

接下來，我們要產(chǎn)生水紋波動(dòng)的效果，需要借助 SVG 的 濾鏡，對這個(gè)濾鏡還不太了解的，可以看看我的這幾篇文章：

• 有意思！強(qiáng)大的 SVG 濾鏡^[2]
• 震驚！巧用 SVG 濾鏡還能制作表情包？^[3]
• 實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的鴻蒙 LOGO^[4]

回歸正題。我們添加一個(gè) SVG 的 濾鏡，利用 CSS filter 進(jìn)行引用

<div?class="g-wrap">
??<div?class="g-aurora">div>
div>

<svg?id='blob'?version='1.1'?xmlns='http://www.w3.org/2000/svg'>
????<defs>
????????<filter?id='wave'>
????????????<feturbulence?basefrequency='0.003?0.003?id='turbulence'?numoctaves='3'?result='noise'?seed='10'?/>
????????????<fedisplacementmap?id='displacement'?in2='noise'?in='SourceGraphic'?scale='96'?/>
????????filter>
????defs>
svg>

.g-aurora?{
????...
????transform:?rotate(45deg)?scaleX(1.4);
????mix-blend-mode:?color-dodge;
????filter:?url(#wave);
}

我們即可得到這樣一種效果：

Wow，是不是已經(jīng)很有那種感覺了。通過 feturbulence 的特性，我們近乎模擬出了極光的效果！

Step 6. 讓極光動(dòng)起來

最后一步，我們就需要讓我們的極光動(dòng)起來。由于 SVG 動(dòng)畫本身不支持類似 animation-fill-mode: alternate 這種特性。我們還是需要寫一點(diǎn) JavaScript 代碼，控制動(dòng)畫的整體循環(huán)。

大概的代碼是這樣：

var?filter?=?document.querySelector("#turbulence");
var?frames?=?0;
var?rad?=?Math.PI?/?180;

function?freqAnimation()?{
??bfx?=?0.005;
??bfy?=?0.005;
??frames?+=?.5
??bfx?+=?0.0025?*?Math.cos(frames?*?rad);
??bfy?+=?0.0025?*?Math.sin(frames?*?rad);

??bf?=?bfx.toString()?+?'?'?+?bfy.toString();
??filter.setAttributeNS(null,?'baseFrequency',?bf);
??window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

至此，我們就得到了一幅完整的，會(huì)動(dòng)的極光動(dòng)畫：

一些技巧及其他事項(xiàng)

1. 漸變元素的周圍會(huì)存在明顯的邊界毛刺效果，可以使用黑色內(nèi)陰影 box-shadow: inset ... 去除；
2. 實(shí)際行文過程中的各個(gè)屬性的實(shí)際參數(shù)看似簡單，過程中其實(shí)經(jīng)過了不斷的調(diào)試才得到；
3. 混合模式及 SVG 的 feturbulence 濾鏡比較難掌握，需要不斷的練習(xí)，不斷的調(diào)試；本文極光的顏色選取沒有經(jīng)過太多反復(fù)調(diào)試，愿意花時(shí)間，可以調(diào)試出效果更好的顏色。

最終的效果，不太完美，但也算一副不錯(cuò)的 CSS + SVG 作品。完整的代碼，你可以看這里：

CodePen Demo -- Aurora^[5]

最后

好了，本文到此結(jié)束，希望本文對你有所幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料

結(jié)語

「關(guān)注公眾號IQ前端，一個(gè)專注于CSS/JS開發(fā)技巧的前端公眾號，更多前端小干貨等著你喔」

• 歡迎關(guān)注IQ前端，更多「CSS/JS開發(fā)技巧」只在公眾號推送