纯CSS霓虹灯效果核心是text-shadow多层偏移+高斯模糊模拟光晕，需控制明暗/色相/模糊节奏、禁用blur()滤镜、移动端限6层、用伪元素分通道错位抖动、hue-rotate做色温漂移、禁用pointer-events防交互问题。
用 text-shadow 叠加多层实现霓虹灯发光效果
纯 CSS 霓虹灯效果不靠图片或 SVG，核心是 text-shadow 的多层偏移 + 高斯模糊模拟光晕。关键不是层数多，而是明暗、色相、模糊半径的节奏感：
- 最内层用本色文字（
color: #fff），避免被阴影盖住细节 - 向外逐层加
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #00f, 0 0 40px #f0f—— 注意模糊值递增、颜色从青到紫过渡，模拟真实霓虹管色散 - 别用
blur()滤镜替代text-shadow：它会模糊整个元素盒模型，导致边缘发虚、与其他元素交界处漏白 - 移动端慎用超过 6 层阴影，iOS Safari 渲染性能明显下降，文字可能闪烁或卡顿
用 @keyframes 控制闪烁频率与故障抖动
霓虹“闪烁”不是简单 opacity 开关，故障风（glitch）更不是随机位移。真实感来自可预测的节奏偏差：
- 基础闪烁用
animation: pulse 2s infinite，但关键帧里不要写opacity: 0—— 改用text-shadow: none+opacity: 0.9微调，保留文字轮廓不“断电” - 故障抖动必须分通道：红、绿、蓝三色层分别错位。用伪元素
::before和::after叠加两层文字，各自应用transform: translateX(-2px) skewX(-5deg)和translateX(3px) skewY(3deg) - 抖动时间不能同步：主层动画时长设为
0.7s，::before设0.73s，::after设0.68s—— 微小差值制造“不同步故障”感 - 别用
random()或 JS 控制：CSS 动画必须可复现，否则调试时无法定位哪一帧出问题
用 filter: hue-rotate() 做霓虹色温漂移
静态霓虹灯会随老化变色，动态效果里加入缓慢色相偏移能强化真实感，但必须克制：
- 在主体文字上叠加
filter: hue-rotate(5deg)，动画周期设为15s，比闪烁慢一个数量级，避免视觉混乱 - 别和抖动共用同一
@keyframes：色相变化要平滑连续，抖动要突兀断裂，混在一起会削弱两种效果的辨识度 - 注意浏览器兼容性：
hue-rotate()在 Safari 15.4 之前对text元素支持不稳定，建议加will-change: filter触发硬件加速 - 移动端需测试：部分安卓 WebView 会把
hue-rotate渲染成块状色带，此时降级为仅用text-shadow色彩渐变
故障风必须禁用 pointer-events 和处理焦点劫持
抖动文字常伴随伪元素覆盖，容易引发点击穿透、键盘焦点丢失、屏幕阅读器误读等问题：
立即学习“前端免费学习笔记（深入）”；
- 所有用于故障抖动的
::before/::after必须加pointer-events: none，否则鼠标悬停会触发多次:hover - 如果文字是按钮或链接，主元素需显式设置
tabindex="0"，并用outline: 2px solid transparent保留在聚焦时可见 - 屏幕阅读器默认会读取伪元素内容（即使为空），务必加
aria-hidden="true"到父容器，或在伪元素中写content: ""而非content: attr(data-text) - 别用
z-index: -1把抖动层压到背后：它仍会拦截事件，正确做法是z-index: 1+pointer-events: none
