text-shadow 做霓虹光晕的关键参数组合
纯靠 text-shadow 实现霓虹感，核心不是堆叠层数，而是控制「外扩距离」和「模糊半径」的比例。常见错误是把所有阴影设成相同 0 0 10px，结果光晕发虚、边界糊成一团，反而像故障文字而不是霓虹。
-
text-shadow的每一层必须包含水平偏移、垂直偏移、模糊半径、颜色 —— 即使偏移为0也不能省略 - 推荐起手组合：
0 0 5px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de - 颜色建议用高饱和度的品红/青/蓝（如
#ff00de、#00ffff），避免用灰或白，否则看不出层次 - 字体必须是粗体（
font-weight: 900）或使用无衬线体（如font-family: 'Arial', sans-serif），细字体+大模糊会直接“化掉”
透明度动画不能只动 opacity
直接对文字加 opacity 动画会让整个元素（包括阴影）一起变淡，霓虹灯就变成“快没电的灯泡”，失去闪烁张力。真正要闪的是光晕强度，不是文字本身。
- 正确做法：用
@keyframes单独控制text-shadow中每层颜色的 alpha 值（如从rgba(255, 0, 222, 1)到rgba(255, 0, 222, 0.3)） - 不要写
opacity: 0.3 → 1，而要写text-shadow: 0 0 5px rgba(255, 0, 222, 0.3), ...→0 0 5px rgba(255, 0, 222, 1), ... - 动画时长建议在
1.2s ~ 2.5s之间，太快像频闪，太慢失去节奏感 - 注意兼容性：
text-shadow动画在 Safari 旧版本（≤15.4）中可能卡顿，可加will-change: text-shadow提前提示渲染引擎
闪烁节奏要避开“呼吸灯陷阱”
很多人一上来就做匀速淡入淡出（ease-in-out），结果像医院监护仪——稳定但毫无霓虹的躁动感。真实霓虹灯管老化、电压不稳，闪烁本就不规则。
- 用
animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67)模拟轻微抖动（比标准ease更“弹”） - 或者拆成两段动画：主光晕用慢速脉动（
2.2s），外层高斯扩散用快速抽搐（0.3s），叠加后自然产生不规则感 - 绝对避免同时开始所有文字的动画 —— 给不同字加
animation-delay: -0.1s、-0.2s等错峰值，模拟灯管逐个亮起 - 别忘了加
animation-iteration-count: infinite，否则只闪一次就熄了
移动端与深色模式下的视觉降级处理
在 OLED 屏幕或暗色背景下，过度依赖 text-shadow 会造成严重光渗，文字边缘发虚，甚至看不清字形。这不是 bug，是物理特性决定的。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)降低阴影层数（从 8 层减到 4 层）和模糊半径（5px/10px/15px/20px） - 对移动设备加
@media (max-width: 768px)，把动画时长拉长到3s，并禁用最外两层（50px和60px）阴影 —— 小屏下人眼分辨不出那么远的光晕 - 如果用户开了系统“减少动画”偏好（
@media (prefers-reduced-motion: reduce)），直接关掉animation，只保留静态霓虹效果 - 测试时务必在真机上打开“深色模式 + 低亮度 + OLED 屏幕”，模拟最差场景；仿真器容易骗人
text-shadow，而是判断哪一层光晕该强、哪一层该弱、什么时候该抖一下——这些全靠眼睛调，没有公式。改完记得关掉所有其他标签页，盯着看 10 秒，如果觉得刺眼或晕，就是还没调对。 
