Step 1.绘制深色背景
喏，首先弄个暗色的背景来营造夜晚的氛围~这个用CSS超简单。挑个你爱的夜空颜色，再来点儿星星点点就行，画面逼格瞬间提升！像SASS这样的神器，更是分分钟帮你画出美轮美奂的图，整个画面都鲜活动人起来！
黑色背景是让银河系更炫酷的秘诀，咱们先把它弄出来当作后面效果的基础。花些心思选个顺眼点儿的颜色，再加些闪亮的星星，银河系就能变得更美，更震撼了。画黑色背景时别忘了调下颜色的亮度和对比度，这样才能呈现出夜空真实的感觉
Step 2.使用渐变画出极光的轮廓
下面，我们就要用渐变效果来画极光形状其实，只要利用CSS的渐变功能，从深色到浅色或者换种颜色都能搞定，这不正好体现了极光的变化多端！至于选择径向渐变还是线性渐变，按照你的需求调颜色和方向就行。
哦对了，想让极光看起来更真实？那渐变效果就厉害了！只要弄懂渐变数值怎么调，极光立马活灵活现。抹极光环时，色彩过渡越自然流畅，那种3D感就越强。
Step 3.旋转拉伸
<pre class="brush:css;toolbar:false;”>
要想北极光动起来还要有层次感吗？试试这种旋转拉伸大法！本来静态的北极光马上能显出流动变幻的逼真效果，画面瞬间更炫目了。要想把北极光变得生动活泼，这一步至关重要呐！
@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);
}
只要在星星上添点旋转和拉伸效果，就能模拟出来北欧夜空中跳舞的极光！只要掌握好旋转的角度和拉伸的比率，各种样式的极光都不在话下。记得在调整中保持画面的整洁，才会有美美的结果哦～
Step 4.神奇的混合模式变换
想要画面看起来更真实，咱得先转好图片，放大后再用混合模式搞定，这样图层就能相互作用了。尤其在画复杂景物时，效果特别明显。选对了混合模式的那些设置，还能让极光和背景更和谐。
.g-aurora {
width: 400px;
height: 300px;
background: radial-gradient(
circle at 100% 100%,
transparent 45%,
#bd63c1 55%,
#53e5a6 65%,
transparent 85%
);
}
混合模式真是个神奇的功能，可以让你的照片看起来更有活力，更有质感！只要用对地方，就不用动原图，就能让画面变美。做这个事儿时，别忘了考虑下画面的氛围和主题风格，然后看着实际情况去调整模式的参数就好了。
Step 5.叠加SVG feturbulence滤镜
想要让画面好看又精致？简单！直接给极光添个Feturbulence SVG滤镜呗！这样画面就能变得很有层次感，看起来像是有水波在波动～通过CSS filter加载这个SVG滤镜，调整些参数和位置就好啦
用SVG滤镜可以画出更有立体感和细节的画。合理利用的话，普通图片也能变得特别有意思！不过别忘了，加滤镜时要考虑与其他部分的搭配，这样才能让整个画面呈现出想要的效果。
.g-aurora {
...
transform: rotate(45deg) scaleX(1.4);
}
Step 6.让极光动起来
搞定！最后这步就是让静态的极光有那么点儿动态感。不过，由于SVG的动画功能有点儿不全能，只能靠JavaScript来完成循环播放。只需要用简洁明了的JavaScript代码，我们就可以搞出会动的极光，变得更加生动有趣！
使得最终呈现出来的动态效果令人惊艳。
.g-aurora {
...
transform: rotate(45deg) scaleX(1.4);
mix-blend-mode: color-dodge;
}
小结
搞定这几个神奇的步骤，你就能用CSS画出超级炫酷的极光效果了！首先，先把深色背景搞定，再来点渐变色、拉伸旋转、混合模式和SVG过滤器，别忘了加些动态元素~每个步骤都不能漏掉。
希望这个，能给你的设计过程带来点儿新想法！
直接开始学习 CSS 特效设计吧!多实践才能做出更漂亮的作品。
你觉得用CSS做极光效果这主意如何？感不感兴趣尝试看看这些办法，整点儿更炫酷的玩意儿呀？
。
评论0