如何使用CSS实现极光效果

小编给大家分享一下如何使用CSS实现极光效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

为安阳等地区用户提供了全套网页设计制作服务，及安阳网站建设行业解决方案。主营业务为成都做网站、网站设计、安阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

像是这样：

如何使用CSS实现极光效果

emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。

观察了一些极光的图片之后，我发现了极光动画中一些比较重要的元素：

基于深色背景的明亮渐变色彩
类似于水波流动的动画效果

明亮渐变色彩我们可以尽量使用渐变模拟。而水波流动的动画效果，在 SVG 滤镜中 feturbulence就是专门干这个的，这个滤镜的使用在我过去的多篇文章中也有反复的提及过。

而除了渐变、SVG 的滤镜之外，我们可能还会用到混合模式（mix-blend-mode）、CSS 滤镜等提升效果。

OK，有了大概的思路后，剩下的就是不断的尝试。

Step 1. 绘制深色背景

首先，我们可能需要一个深色的背景，用于表示我们的夜空。同时点缀一些星星，星星可以使用 box-shadow 模拟，这样，一副夜空背景我们可以在 1 个 p 内完成：

@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实现极光效果

Step 2. 使用渐变画出极光的轮廓

接下来，就是利用渐变，画出极光的一个轮廓效果。

其实就是一个径向渐变：

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

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);

大橙子网站建设，新征程启航

如何使用CSS实现极光效果

Step 1. 绘制深色背景

Step 2. 使用渐变画出极光的轮廓

Step 3. 旋转拉伸

Step 4. 神奇的混合模式变换！

Step 5. 叠加 SVG feturbulence 滤镜

Step 6. 让极光动起来

其他资讯