霓虹灯文字特效（多层辉光 + 闪烁招牌 CSS 源码）

效果演示（真实可交互）

下方深色舞台上依次是霓虹粉、赛博青、霓虹绿三款常亮招牌，以及一行模拟霓虹管老化的闪烁招牌。鼠标悬停任意一行会瞬间加亮。

完整代码

HTML 结构：一行文字一个类名：

<p class="n n-pink">霓虹粉 NEON</p>
<p class="n n-cyan">赛博青 CYBER</p>
<p class="n n-green">霓虹绿 SIGN</p>
<p class="n n-flicker">闪烁招牌</p>

核心 CSS：霓虹辉光的核心是叠加多层 text-shadow，由内向外逐层扩散：

/* 霓虹粉：三到四层同色系阴影由近及远 */
.n-pink {
  color: #ff6bb0;
  text-shadow:
    0 0 6px #ff6bb0,     /* 近处细光 */
    0 0 18px #ff6bb0,    /* 中层光晕 */
    0 0 42px #ff2e8a,    /* 远处强光 */
    0 0 80px #ff2e8a;    /* 最外扩散 */
}

/* 闪烁招牌：关键帧里偶发熄灭，模拟霓虹管老化 */
.n-flicker {
  color: #ffd76b;
  animation: neonFlicker 3.2s infinite;
}
@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 6px #ffd76b, 0 0 18px #ffd76b, 0 0 42px #ffb52e, 0 0 80px #ffb52e;
    opacity: 1;
  }
  20%, 24%, 55% {          /* 偶发的暗场 */
    text-shadow: none;
    opacity: .55;
  }
}

参数说明

兼容性与性能

• 纯 CSS text-shadow 实现，所有现代浏览器原生支持，无兼容性问题
• 多层阴影文字有合成压力，建议单页控制在几个标题内；超大字号霓虹字建议用图片或 SVG 滤镜替代
• 闪烁动画使用 opacity 变化，属合成属性，性能良好
• 霓虹效果依赖深色背景，浅色页面需要搭配暗色舞台或渐变背景才出效果

常见问题

Q: 光晕太糊看不清字？ 减少最外两层阴影的半径（如 42px 与 80px 改为 24px 与 40px），并让近层颜色比远层更亮。

Q: 想做成开机点亮的效果？ 用关键帧让 text-shadow 从无到有逐步增强，再配合 animation-delay 让多个招牌依次点亮。

Q: 文字能加上下边框模拟霓虹管吗？ 可以，配合 border-bottom 和同色阴影即可做出灯管线条感，粤喵后续会有专门的霓虹招牌组件。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。