本篇文章给大家分享使用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 作品。完整的代码，你可以看这里：
（学习视频分享：css视频教程）
以上就是鲜为人知！用css做极光效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1623691.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
