text-shadow呼吸动画必须用@keyframes定义多阶段关键帧（如0%弱光→50%强光→100%回落），配合ease-in-out、alternate和infinite实现自然循环；避免linear、少于三帧或全局will-change；需适配prefers-reduced-motion。
text-shadow 动画必须用 @keyframes 定义关键帧
直接在 transition 里写 text-shadow 只能做 hover 等状态切换，无法实现周期性呼吸效果。真正“呼吸”需要 @keyframes 控制多阶段变化，比如从弱光到强光再回落。
常见错误是只写两帧（0% 和 100%），导致动画生硬。实际建议至少三帧：起始弱光 → 中间强光 → 回落弱光，让视觉有“吸气-呼气”节奏感。
-
0%：设为text-shadow: 0 0 5px rgba(255, 107, 107, 0.4)（低模糊、低透明度） -
50%：增强为0 0 20px rgba(255, 107, 107, 0.8), 0 0 30px rgba(255, 107, 107, 0.6) -
100%：回落至0 0 5px rgba(255, 107, 107, 0.4)，与起点一致形成循环
animation 属性要配好 timing-function 和 direction
呼吸效果最怕卡顿或突兀收尾。animation-timing-function 推荐用 cubic-bezier(0.25, 0.8, 0.25, 1) 或 ease-in-out，比默认的 ease 更柔和；animation-direction 必须设为 alternate，否则每次循环都从头猛亮一次，失去呼吸感。
完整写法示例：animation: pulse-glow 2.8s ease-in-out infinite alternate;
- 周期选
2.5–3.2s较自然，太快像闪烁，太慢显迟滞 - 避免用
linear，它会让亮度变化匀速，缺乏“渐强→渐弱”的生理呼吸联想 - 不要漏掉
infinite，否则只动一次就停住
多层 text-shadow 的写法和性能坑
发光强度靠叠加层数，但不是越多越好。浏览器渲染每层 text-shadow 都要走一次高斯模糊，4–6 层是视觉与性能的平衡点。超过 8 层在低端设备上可能掉帧，尤其配合 animation 时。
典型写法：text-shadow: 0 0 8px #ff6b6b, 0 0 16px #ff6b6b, 0 0 24px #ff6b6b; —— 每层只增模糊值，颜色一致，模拟光晕扩散。
- 别混用大差异颜色（如同时写
#ff0和#00f），容易在中间帧出现脏色过渡 - 用
rgba()控制透明度比改颜色更安全，例如rgba(255, 107, 107, 0.7) - 深色背景上效果更明显，浅底+亮字+红光易发灰，可换紫红/青蓝系提升对比
prefers-reduced-motion 和 will-change 要手动加
现代项目不能忽略可访问性。@media (prefers-reduced-motion: reduce) 下应关闭动画，否则对眩晕用户不友好。另外，text-shadow 动画不属于 GPU 加速属性，默认走 CPU 渲染，加 will-change: text-shadow 会提示浏览器提前优化图层，但仅在必要时启用（比如动画频繁且元素固定）。
- 推荐写法：
.pulse-text { will-change: text-shadow; }+ 媒体查询降级 - 降级 CSS 示例：
@media (prefers-reduced-motion: reduce) { .pulse-text { animation: none; text-shadow: 0 0 10px rgba(255, 107, 107, 0.6); } } - 别全局加
will-change，滥用会导致内存占用升高，尤其页面文字多时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
