纯css能实现流动感、层次感的极光背景，依赖radial-gradient+blur+transform+mix-blend-mode组合；需多层渐变错位、hsla调色、适度模糊与透明度、伪元素box-shadow造星，并用css变量便于调试。
纯 CSS 能做出有流动感、层次感的极光背景，但别指望它能替代 Canvas 动画——它靠的是渐变 + 模糊 + 变换 + 混合模式的组合技，性能好、兼容性强，适合静态或轻度动效场景。
用 radial-gradient 搭出极光主形体
极光不是条状光带，而是从某一点发散、边缘柔化的光晕。用 radial-gradient 最贴切，关键在圆心位置和色标停靠点：
- 圆心别总设
50% 50%，偏移到30% 60%或70% 40%更像自然飘散的形态 - 透明色（
transparent）必须占够比例，否则会像硬边光斑；常见写法是transparent 70%起跳 - 避免用纯 RGB 值，改用
hsla()控制饱和度与明度，比如hsla(172, 80%, 60%, 0.6)比#00ffb4更易调出通透感 - 单层渐变太单薄，建议至少叠两层：
.aurora-1主绿蓝，.aurora-2偏紫粉，错开圆心和模糊值
filter: blur() 和 opacity 决定“是不是真极光”
没模糊的极光=发光塑料片。但 blur 过大又会糊成一团灰，这里有个平衡点：
-
blur(40px)～blur(70px)是常用区间，配合opacity: 0.5～0.7才有空气感 - 别对整个容器加
blur，只作用在极光元素本身，否则星星或文字也会被拖影 - 如果用
backdrop-filter想做背景虚化叠加，注意 Safari 对blur()在伪元素上支持不稳定，优先用真实元素包裹
用 transform 和 mix-blend-mode 拉出动态错觉
纯 CSS 没法模拟粒子运动，但可以通过视觉欺骗制造“缓慢流淌”的印象：
-
transform: rotate(35deg) scaleX(1.6)把圆形渐变拉成斜向光带，比水平/垂直更自然 -
mix-blend-mode: screen或overlay让多层极光叠加时不打架，尤其和深色星空背景融合时能透出底色层次 - 动画只动
background-position或transform，别动filter—— blur 动画在 Chrome 旧版和 Firefox 移动端容易卡顿甚至崩溃 - 加个轻微的
@keyframes move { to { transform: translateX(-5px) rotate(36deg); } }，循环周期设 15–30 秒，人眼几乎察觉不到，但扫视时会有余光流动感
星星层必须用 box-shadow 伪元素实现
Canvas 画星星很爽，但纯 CSS 场景下，用 box-shadow 批量造星是唯一高效方案：
- 一个
::before伪元素 + 大量box-shadow值，比渲染 200 个<span></span>节点省 90% DOM 开销 - 数值要随机：Sass 里用
@for $i from 1 through 120生成不同x/y/size，CSS 原生暂不支持运行时随机，得预生成 - 别用
rgba(255,255,255,1)，改用hsla(0,0%,100%,0.8)，这样后期调整体亮度时只需改根变量，不用碰每一颗星 - 如果页面需响应式，
box-shadow的像素值不会自动缩放，建议用vw/vh单位控制基础大小，再用媒体查询微调
真正难的不是写出来，而是调——同一组参数在 MacBook Pro 屏和千元安卓机上看起来可能差一倍。建议把 blur、opacity、gradient stop 全部抽成 CSS 自定义属性，用 DevTools 实时拖动调试，比反复改代码快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
