如何使用CSS實現(xiàn)極光效果

小編給大家分享一下如何使用CSS實現(xiàn)極光效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為安陽等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及安陽網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、網(wǎng)站設計、安陽網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

像是這樣：

如何使用CSS實現(xiàn)極光效果

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

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

基于深色背景的明亮漸變色彩
類似于水波流動的動畫效果

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

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

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

Step 1. 繪制深色背景

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

@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 之后，我們能夠得到這樣一幅夜空背景圖：

如何使用CSS實現(xiàn)極光效果