霓虹灯闪烁的核心是 animation + filter 组合纯 CSS 实现，需外扩高斯模糊、色相变化与亮度抖动，配合 isolation: isolate、自定义贝塞尔曲线及无障碍适配。
霓虹灯闪烁的核心是 animation + filter 组合
纯 CSS 实现霓虹效果，不靠图片、不靠 SVG，关键就两条：animation 控制明暗/色相节奏，filter 提供发光与色彩偏移。浏览器原生支持好，但别指望它在 IE 或旧版 Safari 上跑起来。
常见错误是只加 text-shadow 或只用 box-shadow 模拟发光——那只是“毛边”，不是真正透光的霓虹感。真霓虹得有外扩高斯模糊 + 高饱和度色相变化 + 亮度抖动。
-
filter: blur(2px) brightness(1.8) saturate(2)是基础发光层，blur 值太小没辉光，太大变糊；brightness 超过 1.5 容易过曝，saturate 建议 1.8–2.5 之间 - 动画必须用
@keyframes分段控制：0% 和 100% 保持主色，中间（比如 50%）插入色相偏移（hue-rotate(30deg)）和亮度微调，否则就是单调闪烁 - 别给
filter直接加transition——它不触发硬件加速，会卡顿；必须走animation+will-change: filter提前提示渲染引擎
如何避免闪烁发虚或文字变粗
滤镜叠加后文字边缘“化开”、笔画变粗，本质是 blur() 影响了整个元素盒模型，而字体本身没重绘。这不是 bug，是预期行为——但可以收束。
典型错误是把 filter 加在 <p> 或 <div> 外层容器上，结果整块区域都糊了。正确做法是只包裹文字内容，用 <span> 包住要发光的字，再单独设 display: inline-block 和 isolation: isolate。
立即学习“前端免费学习笔记（深入）”；
-
isolation: isolate强制创建独立层叠上下文，防止父级滤镜污染子元素渲染 -
backface-visibility: hidden和transform: translateZ(0)在部分 Chrome 版本里能缓解模糊溢出（尤其配合blur()时） - 字体选等宽或高对比无衬线体（如
font-family: 'JetBrains Mono', monospace），避免宋体类字体在模糊后结构崩解
animation-timing-function 决定霓虹是否“有呼吸感”
用 ease-in-out 做霓虹闪烁，看起来像灯泡通电—熄灭—通电，机械又廉价。真实霓虹管有余晖衰减、气体电离延迟，得用自定义贝塞尔曲线模拟这种非线性响应。
常见错误是套用默认缓动，或者写成 cubic-bezier(0.4, 0, 0.2, 1) 这种通用值——它适合页面过渡，不适合光效。霓虹需要更陡的起始上升 + 更缓的回落。
- 推荐曲线：
cubic-bezier(0.15, 0.8, 0.3, 1.1)—— 开头快亮，结尾慢暗，带点过冲感 - 动画周期别设太短（
animation-duration: 1.2s是甜点，低于 0.8s 易致视觉疲劳，高于 2s 就不像在闪了） - 加
animation-iteration-count: infinite同时配animation-direction: alternate，让色相变化来回摆，比单向循环更自然
移动端和深色模式下的兼容陷阱
手机上滤镜性能掉得厉害，尤其 iOS Safari 对 filter + animation 的复合渲染优化差，容易掉帧甚至白屏。深色模式下，brightness() 和 saturate() 可能被系统级色彩管理覆盖，导致颜色失真。
最常被忽略的是：没检测 prefers-reduced-motion。用户开了“减少动画”，你的霓虹还在狂闪，不仅违无障碍规范，还会引发眩晕。
- 务必加媒体查询：
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } } - iOS 上用
-webkit-filter前缀已非必需（iOS 15.4+ 全支持标准filter），但blur()值超过 4px 就可能触发降级为软件渲染 - 深色模式适配建议：用
@media (prefers-color-scheme: dark)单独调低brightness()值（比如从 1.8 → 1.4），避免过曝刺眼
霓虹效果真正的难点不在怎么亮，而在怎么“不一直亮”——节奏、衰减、环境适配，漏掉任何一环，就只是个晃眼的 bug。
