霓虹呼吸效果需用多层text-shadow配合@keyframes动画实现，内层保轮廓、外层造光晕，通过切换预设阴影组合模拟膨胀收缩；为防卡顿应优先动画伪元素或drop-shadow，并强制will-change；必须适配prefers-reduced-motion及wcag规范。
用 text-shadow 搭配 @keyframes 实现基础霓虹呼吸效果
霓虹灯文字的核心是多层、高模糊度的 text-shadow，配合透明度与模糊半径的周期性变化模拟“呼吸”。不能只靠单层阴影，否则只有亮灭切换，没有光晕膨胀收缩感。
关键点在于：内层阴影（小偏移+中等模糊）保持文字轮廓清晰，外层阴影（大偏移+高模糊+低透明度）负责营造光晕扩散。动画需同时控制 opacity 和 text-shadow 的模糊值（通过修改 blur-radius 实现，但注意——CSS 不允许直接动画化 text-shadow 的单个属性，所以得用多组预设阴影切换）。
实操建议：
- 定义至少 3 层
text-shadow：例如0 0 5px #fff, 0 0 10px #0ff, 0 0 20px #0ff - 动画中用
@keyframes切换两套阴影组合：一套偏“收”（模糊小、透明度高），一套偏“放”（模糊大、透明度略低） - 避免在
body或全局字体上滥用，呼吸频率建议设为3s–6s，太快易眩晕
解决 Chrome/Firefox 中 text-shadow 动画卡顿或不触发的问题
部分浏览器（尤其是旧版 Chrome）对 text-shadow 的批量重绘优化不足，直接在 @keyframes 里写多组不同 text-shadow 值，可能被降级为每帧重排，导致掉帧甚至静止。
更可靠的做法是固定 text-shadow 不变，仅动画 color 和伪元素叠加层：
- 给文字本身设一个带基础辉光的
text-shadow（如0 0 8px #0af） - 用
::before伪元素绝对定位覆盖文字，内容为空，但设置更强的text-shadow+opacity动画 - 把动画绑定到伪元素上，主文字不动，减少重绘压力
- 务必加
will-change: opacity到伪元素，提示浏览器提前升格图层
用 filter: drop-shadow() 替代部分 text-shadow 提升兼容性与性能
drop-shadow() 是 filter 函数，作用于整个元素（包括文字轮廓），对 SVG 文字或含描边的文字更可控，且在 Safari 中动画表现比 text-shadow 更稳。
但它不能像 text-shadow 那样做多层独立偏移，所以适合“单色强光晕”场景。若需蓝→紫渐变霓虹，仍得回到 text-shadow 多层方案。
实操要点：
-
filter: drop-shadow(0 0 12px #f0f)可替代最外层发散阴影 - 不要和
text-shadow混用同一元素——两者叠加可能产生不可预期的混合光效 - 动画
filter时，注意它会触发全元素重绘，transform类属性优先走 GPU，但filter在低端设备上仍可能掉帧
移动端适配与可访问性必须绕开的坑
呼吸动画在 iOS Safari 上默认会被系统“降低动画帧率”策略压制；更严重的是，WCAG 2.1 明确禁止 3 秒内闪烁超过 3 次的动画，否则可能诱发光敏性癫痫。
上线前必须处理：
- 用
@media (prefers-reduced-motion: reduce)全局禁用呼吸动画，回退为静态辉光 - 避免使用红/蓝高频交替（如
#f00↔#00f），改用同色系明暗变化（如#0af↔#05a） - 不要让动画绑定在
:hover上再触发——触屏设备无 hover，且自动播放容易误触 - 测试真机：iPhone SE（A13）上 6s 呼吸周期基本流畅，但 2s 周期就会明显卡顿
真正难的不是做出光效，而是让光效在不干扰阅读、不触发系统限制、不违背无障碍规范的前提下存在。动效越炫，约束条件越多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
