Aurora Background 极光背景

🌌 效果

多色光球缓慢漂移 + 模糊，模拟北极光效果。适合 Hero 区域、landing page 头部、产品展示等需要视觉冲击力的场景。

实时预览

🌌

Aurora Background

三个模糊光球缓慢漂移，叠加网格纹理，打造深邃的极光效果。

日落变体

🌅

Sunset Variant

橙红粉暖色调，适合活动页、节日主题

蓝色变体

🌊

Ocean Blue

蓝青冷色调，适合 SaaS、企业级产品

代码

<div class="aurora">
  <div class="aurora__bg">
    <div class="aurora__blob aurora__blob--1"></div>
    <div class="aurora__blob aurora__blob--2"></div>
    <div class="aurora__blob aurora__blob--3"></div>
  </div>
  <div class="aurora__grid"></div>  <!-- 可选：网格纹理 -->
  <div class="aurora__content">
    <h2>你的内容</h2>
    <p>放在这里...</p>
  </div>
</div>

<!-- 日落变体 -->
<div class="aurora aurora--sunset">...</div>

<!-- 蓝色变体 -->
<div class="aurora aurora--blue">...</div>

变体

变体	Class	色调	适用场景
默认	.aurora	靛蓝+绿+粉	科技感、通用
蓝色	.aurora--blue	蓝+靛+青	SaaS、企业
日落	.aurora--sunset	橙+红+粉	活动、节日

AI 使用说明

组件名: aurora-bg
选择器: .aurora
结构: .aurora > .aurora__bg > 3×.aurora__blob + .aurora__content
变体: --blue | --sunset
可选: .aurora__grid (网格叠加层)
关键属性: filter: blur(80px) on blobs
注意: 容器需要 overflow: hidden + 相对定位