极光背景特效（纯 CSS 流光极光动画，可调色相与速度）

效果演示（真实可交互）

拖动「漂移速度」可让极光加快或近乎凝固，调节「色相偏移」能瞬间把蓝紫极光换成粉绿或金黄，「发光强度」控制光斑亮度，点「暂停」按钮可以定格当前画面。整个背景由 5 层带 72px 高斯模糊的径向渐变光斑组成，通过 mix-blend-mode: screen 叠加在深色夜空上，每层光斑以不同的时长、位移和旋转交替往复运动，模拟极光在夜幕中缓缓流动、明暗呼吸的质感。由于动画只作用于 transform 与 opacity，浏览器可以走合成器线程，性能开销极小。

完整代码

<div class="aurora-bg">
  <i class="aurora a1"></i>
  <i class="aurora a2"></i>
  <i class="aurora a3"></i>
  <i class="aurora a4"></i>
  <i class="aurora a5"></i>
  <p class="aurora-tip">极光背景 · 纯 CSS 实现</p>
</div>

.aurora-bg {
  position: relative; width: 100%; height: 340px; overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, #0c1330 0%, #05060f 62%);
  --dur: 14s; /* 动画基准时长，JS 可动态修改 */
}
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(72px); mix-blend-mode: screen;
  opacity: .7; will-change: transform;
}
.a1 { width: 70%; height: 90%; left: -20%; top: -30%;
  background: radial-gradient(circle at 35% 40%, #4f6ef7 0%, transparent 60%);
  animation: drift1 var(--dur) ease-in-out infinite alternate; }
.a2 { width: 60%; height: 80%; right: -15%; top: -10%;
  background: radial-gradient(circle at 60% 40%, #22d3ee 0%, transparent 60%);
  animation: drift2 calc(var(--dur) * 1.4) ease-in-out infinite alternate; }
.a3 { width: 75%; height: 85%; left: 8%; bottom: -42%;
  background: radial-gradient(circle at 50% 40%, #a855f7 0%, transparent 62%);
  animation: drift3 calc(var(--dur) * 1.15) ease-in-out infinite alternate; }
.a4 { width: 55%; height: 70%; right: 4%; bottom: -28%;
  background: radial-gradient(circle at 50% 50%, #f472b6 0%, transparent 60%);
  animation: drift4 calc(var(--dur) * 1.7) ease-in-out infinite alternate; }
.a5 { width: 45%; height: 60%; left: 30%; top: 18%;
  background: radial-gradient(circle at 50% 50%, #34d399 0%, transparent 60%);
  animation: drift2 calc(var(--dur) * 2.1) ease-in-out infinite alternate-reverse; }

@keyframes drift1 { from { transform: translate(0,0) scale(1) rotate(0deg); } to { transform: translate(16%,12%) scale(1.3) rotate(22deg); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-20%,16%) scale(.9) rotate(-16deg); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(12%,-18%) scale(1.35); } }
@keyframes drift4 { from { transform: translate(0,0) scale(1.15); } to { transform: translate(-16%,-12%) scale(.95) rotate(26deg); } }

// 控制：速度/色相/强度（演示面板同款逻辑）
const wrap = document.querySelector('.aurora-bg');
const speedEl = document.querySelector('#auSpeed');   // 0-200，默认 100
const hueEl = document.querySelector('#auHue');       // 0-360
const alphaEl = document.querySelector('#auAlpha');   // 20-100
if (speedEl) speedEl.addEventListener('input', e => {
  const v = +e.target.value;
  wrap.style.setProperty('--dur', `${(26 - v / 100 * 23).toFixed(1)}s`);
});
if (hueEl) hueEl.addEventListener('input', e => wrap.style.filter = `hue-rotate(${e.target.value}deg)`);
if (alphaEl) alphaEl.addEventListener('input', e => wrap.style.setProperty('--alpha', e.target.value / 100));

参数说明

兼容性与性能

• 现代浏览器（Chrome 49+、Firefox 31+、Safari 8+）均支持，无前缀要求；mix-blend-mode: screen 需要 Safari 8+ / Chrome 41+。
• 动画只使用 transform 和 opacity，走合成器线程，不触发重排；5 层光斑 + 72px 模糊在低端手机上仍可流畅运行。
• 若在低端设备上卡顿，可减少光斑层数、缩小模糊半径，或把 animation 时长整体放大。
• 对 prefers-reduced-motion: reduce 的用户，建议直接去掉 animation 并保留静态极光构图，避免眩晕。

常见问题

Q: 为什么我的极光看起来像一团糊的色块？ 模糊半径或光斑尺寸过大、层间距离太近都会糊成一团。建议至少保留 10%-15% 的深色夜空间隔，并把 blur 控制在 60-90px。

Q: 可以放文字或其他内容在上面吗？ 可以。把内容放进 .aurora-bg 内部并加 position: relative; z-index: 1，光斑作为背景层在底层即可，注意光斑 pointer-events: none 以免挡住点击。

Q: 如何让极光颜色跟随主题切换？ 用 CSS 变量管理各层颜色，例如 --c1: #4f6ef7，在深色/浅色主题下覆盖 --c1 即可，无需改动画代码。

Q: 本组件与 animate.css 有关系吗？ 完全没有，动画 keyframes 为粤喵自研，整段代码约 70 行，无任何外部依赖。