标题阴影跳动效果的实现思路

“标题阴影跳动”看上去像立体呼吸，其实是多层 text-shadow 配合关键帧插值的结果。

1. 视觉目标先定义

这类效果通常追求三点：

1. 文本主体稳定可读；
2. 阴影在周期内有“近-远”变化；
3. 幅度可控，不抢正文注意力。

2. 为什么要用多层阴影

单层阴影只能得到“黑边”感。
多层阴影可以同时模拟：

• 近距离投影（增强厚度）
• 远距离软阴影（增强空间感）
• 轻微冷暖辉光（增强质感）

例如一组常见层次：

• 0 2px 12px rgba(0,0,0,.3)：近层硬阴影
• 0 8px 22px rgba(0,0,0,.2)：远层软阴影
• 0 0 16px rgba(255,255,255,.08)：轻微高光

3. 跳动感来自“中点峰值”

关键帧通常只需要三个区间：

• 0% / 100%：基准态
• 50%：峰值态

峰值态里略微提高：

• 阴影半径
• 阴影偏移
• （可选）文字 scale 或 translateY

这样能形成“呼吸一下”的感觉。

4. 控制“自然感”的三个参数

4.1 动画时长

太短会焦躁，太长会无感。
标题动效常在 3s ~ 6s 区间更自然。

4.2 缓动函数

ease-in-out 比 linear 更像真实呼吸。
线性会让视觉节奏偏机械。

4.3 峰值幅度

建议“先小后大，再回收”。
如果阴影半径和位移都过大，会出现“抖动感”而不是“呼吸感”。

5. 与流光并存时怎么避免打架

标题同时有“流光”时，阴影跳动必须克制：

• 降低阴影峰值透明度；
• 避免流光和阴影都在同一时刻达到峰值；
• 保证文字底色足够稳定（可读性优先）。

6. 可访问性与兼容性

建议始终加上：

• prefers-reduced-motion: reduce 降级策略；
• 在降级时关闭跳动，只保留静态阴影。

这样既照顾对动态敏感的用户，也能保证页面语义与信息传达不受影响。

7. 一句话总结

标题阴影跳动不是“把阴影调大”，而是“按节奏调层次”。
把层次、节奏和幅度控制好，立体感才会高级而不突兀。