绚丽的极光用CSS也能实现！

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

我们即可得到这样一种效果：

Wow，是不是已经很有那种感觉了。通过 feturbulence 的特性，我们近乎模拟出了极光的效果！

Step 6. 让极光动起来

最后一步，我们就需要让我们的极光动起来。由于 SVG 动画本身不支持类似 animation-fill-mode: alternate 这种特性。我们还是需要写一点 JavaScript 代码，控制动画的整体循环。

大概的代码是这样：

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

至此，我们就得到了一幅完整的，会动的极光动画：

一些技巧及其他事项

渐变元素的周围会存在明显的边界毛刺效果，可以使用黑色内阴影 box-shadow: inset ... 去除；实际行文过程中的各个属性的实际参数看似简单，过程中其实经过了不断的调试才得到；混合模式及 SVG 的 feturbulence 滤镜比较难掌握，需要不断的练习，不断的调试；本文极光的颜色选取没有经过太多反复调试，愿意花时间，可以调试出效果更好的颜色。

最终的效果，不太完美，但也算一副不错的 CSS + SVG 作品。完整的代码，你可以看这里：

CodePen Demo — Aurora

最后

好了，本文到此结束，希望本文对你有所帮助 

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

以上就是绚丽的极光用CSS也能实现！的详细内容，更多请关注创想鸟其它相关文章！