BACKGROUND & DECOR
极光光斑背景Aurora Glow Background
两三颗大号高斯模糊彩色圆球在角落缓慢漂移，深色页面的氛围担当。
效果预览
两颗光斑在对角缓慢漂移
适合用在哪
深色 Hero、AI 产品页、音乐/创意类产品。
容易踩的坑
- 同屏超过 3 颗 blur 80px 的大光斑，中低端手机 GPU 占用飙升导致滚动卡顿。
- 光斑漂移到白色标题背后时，局部对比度可能跌破 4.5:1。
- 未在 prefers-reduced-motion 下停掉漂移动画，眩晕敏感用户会不适。
设计提示词 · Prompt
极光光斑背景（Aurora Glow）：2-3 个绝对定位的大圆（150-400px），各自纯色（靛蓝 #6366F1、品红 #C026D3、青色 #06B6D4），filter:blur(40-80px) 糊成光斑，放页面对角，opacity 0.7-0.9。每个光斑独立做 8-14s 的 ease-in-out alternate 漂移动画（translate + scale ±10%）。光斑必须 z-index 在内容之下、overflow:hidden 裁边。性能注意：blur 大面积元素耗 GPU，用 will-change:transform 且页面同时最多一组。加噪点层防色带。
Aurora Glow: 2-3 absolutely positioned large circles (150-400px), each a solid color (indigo #6366F1, magenta #C026D3, cyan #06B6D4), blurred with filter:blur(40-80px) into glow spots, placed at opposite corners of the page at opacity 0.7-0.9. Each glow gets its own 8-14s ease-in-out alternate drift animation (translate + scale ±10%). The glows must sit below the content in z-index, with overflow:hidden clipping the edges. Performance: blurring large elements is GPU-heavy — use will-change:transform and at most one set per page at a time. Add a noise layer to prevent banding.
常见搭配
同一页面里经常和「极光光斑背景」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-aurorabg"> <div class="d-aurorabg__g d-aurorabg__g--1"></div> <div class="d-aurorabg__g d-aurorabg__g--2"></div> <b>两颗光斑在对角缓慢漂移</b> </div>