在上次寫完這篇文章 -- 巧用漸變實作進階感拉滿的背景光動畫 之後，文章下面的評論有同學留言，使用 CSS 可以實作極光嗎？
像是這樣：
emmm，這有點難為人了。不過，最近我也嘗試着去試了下，雖然不可能模拟出那麼真實的效果，但是使用 CSS 還是可以作出類似的一些特效的，今天我們就一起來嘗試下。
觀察了一些極光的圖檔之後，我發現了極光動畫中一些比較重要的元素：
基于深色背景的明亮漸變色彩
類似于水波流動的動畫效果
明亮漸變色彩我們可以盡量使用 漸變 模拟。而水波流動的動畫效果，在 SVG 濾鏡中 feturbulence 就是專門幹這個的，這個濾鏡的使用在我過去的多篇文章中也有反複的提及過。
而除了漸變、SVG 的 <code><feturbulence></code> 濾鏡之外，我們可能還會用到混合模式（<code>mix-blend-mode</code>）、CSS 濾鏡等提升效果。
OK，有了大概的思路後，剩下的就是不斷的嘗試。
首先，我們可能需要一個深色的背景，用于表示我們的夜空。同時點綴一些星星，星星可以使用 <code>box-shadow</code> 模拟，這樣，一副夜空背景我們可以在 1 個 div 内完成：
這一步比較簡單，借助了 SASS 之後，我們能夠得到這樣一幅夜空背景圖：
接下來，就是利用漸變，畫出極光的一個輪廓效果。
其實就是一個徑向漸變：
目前看來，是有一點點輪廓了。下一步，我們把得到的這個漸變效果通過旋轉拉伸變換一下。
我們大概就能得到這樣一個效果：
到這裡，其實雛形已經出來了。但是顔色看着不太像，為了和深色的背景融合在一起，這裡我們運用上混合模式 <code>mix-blend-mode</code>。
神奇的事情發生了，看看效果：
整體的顔色看上去更加像極光的顔色。
接下來，我們要産生水紋波動的效果，需要借助 SVG 的 <code><feturbulence></code> 濾鏡，對這個濾鏡還不太了解的，可以看看我的這幾篇文章：
有意思！強大的 SVG 濾鏡
震驚！巧用 SVG 濾鏡還能制作表情包？
實作一個會動的鴻蒙 LOGO
回歸正題。我們添加一個 SVG 的 <code><feturbulence></code> 濾鏡，利用 CSS <code>filter</code> 進行引用
我們即可得到這樣一種效果：
Wow，是不是已經很有那種感覺了。通過 feturbulence 的特性，我們近乎模拟出了極光的效果！
最後一步，我們就需要讓我們的極光動起來。由于 SVG 動畫本身不支援類似 <code>animation-fill-mode: alternate</code> 這種特性。我們還是需要寫一點 JavaScript 代碼，控制動畫的整體循環。
大概的代碼是這樣：
至此，我們就得到了一幅完整的，會動的極光動畫：
漸變元素的周圍會存在明顯的邊界毛刺效果，可以使用黑色内陰影 <code>box-shadow: inset ...</code> 去除；
實際行文過程中的各個屬性的實際參數看似簡單，過程中其實經過了不斷的調試才得到；
混合模式及 SVG 的 feturbulence 濾鏡比較難掌握，需要不斷的練習，不斷的調試；本文極光的顔色選取沒有經過太多反複調試，願意花時間，可以調試出效果更好的顔色。
最終的效果，不太完美，但也算一副不錯的 CSS + SVG 作品。完整的代碼，你可以看這裡：
CodePen Demo -- Aurora
好了，本文到此結束，希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。