text-shadow动画需用@keyframes显式定义偏移量和模糊半径帧，不可直接transition；须统一光源方向、递变阴影颜色、适配retina屏单位，并注意字体加载时机与伪元素替代方案的可访问性问题。
text-shadow 动画必须用 transition 或 animation，不能直接 transition text-shadow 本身
直接对 text-shadow 做 transition 在大多数浏览器里会失效或跳变——因为阴影值是离散的函数参数组合，不是连续可插值的属性。真正能平滑过渡的是「偏移量」和「模糊半径」这两个数值型部分，但必须包裹在 @keyframes 中显式定义帧。
常见错误现象：transition: text-shadow 0.3s 写了但 hover 时阴影“啪”一下突变，没有渐变过程。
- 正确做法：用
@keyframes分别控制每层阴影的h-offset、v-offset、blur-radius - 推荐写法：只动偏移量（如从
0 0→2px 2px），模糊半径保持为0或固定小值（如1px），避免渲染抖动 - 性能注意：超过 3 层动画阴影 + 模糊 > 2px，在低端安卓机上容易掉帧
多层阴影动态扩展的关键是光源方向一致性
所谓“立体光影扩展”，本质是模拟光源靠近时投影拉长、变淡的过程。如果各层阴影的偏移方向不统一（比如一层往右下，一层往左上），动画一动就变成“文字在乱晃”，而不是“浮出来”。
- 统一光源方向：假设光从左上方来，所有阴影的
h-offset和v-offset都应同号且比例接近（如1px 1px、2px 2px、3px 3px） - 颜色要递变：越远的阴影越透明、越接近背景色，例如
rgba(0,0,0,0.2)→rgba(0,0,0,0.08)，不能全用纯黑 - 避免混用 HSL 和 RGB：同一组动画里混写
hsl(0,0%,20%)和#000，Chrome 可能插值出意外灰阶
Retina 屏上动画发虚？单位和 blur-radius 是罪魁祸首
在 2x/3x 屏幕上，text-shadow: 2px 2px 2px #000 渲染出的模糊边缘实际占 4–6 物理像素，抗锯齿过度导致“毛边感”，尤其动画过程中更明显。
- 解决方案：把偏移量和 blur 改用
rem或em，例如0.125rem 0.125rem 0.125rem（对应 2px @16px font-size） - 更稳妥的做法：blur-radius 设为
0，靠增加阴影层数（如 4 层）来模拟深度，动画只动偏移量 - 媒体查询兜底：
@media (-webkit-min-device-pixel-ratio: 2) { ... }单独调低 blur 值
伪元素 + transform 是替代方案，但要注意 z-index 和可访问性
当 text-shadow 动画卡顿或效果受限（比如想让“厚度”随时间增长），可用 ::before/::after 复制文字层，再用 transform: translateZ() 拉开距离。但这不是纯阴影，而是真 3D 分层。
- 必须加
transform-style: preserve-3d到父容器，否则子层会被压平 -
z-index对伪元素无效，层级靠transform: translateZ()的数值大小决定（正数在前，负数在后） - 屏幕阅读器可能重复读取伪元素内容，需加
aria-hidden="true"或content-visibility: hidden - 移动端 Safari 对
translateZ()文字渲染有闪烁 bug，建议加backface-visibility: hidden
text-shadow 动画若在 Web Font 还没就绪时就开始，会先以系统字体跑一遍动画，字体替换后又重绘一次，造成视觉跳闪。务必用 font-display: swap + document.fonts.load 控制动画启动时机。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
