通过结合text-shadow与@keyframes可实现文字阴影的平滑动画。1. 使用@keyframes定义阴影的模糊半径、颜色等参数变化，如发光放大效果；2. 支持多层阴影同步动画，如双层脉动增强立体感；3. 可联动动画颜色与偏移，实现投影漂移等动态效果；4. 注意保持颜色格式一致、避免省略关键帧中的阴影层，并合理使用will-change提升性能，确保动画流畅兼容。
文字阴影的平滑变化可以通过结合 text-shadow 属性与 @keyframes 实现。虽然 text-shadow 本身支持 CSS 过渡，但在某些情况下直接使用 transition 可能无法达到理想效果，尤其是多层阴影或颜色变化时。使用 @keyframes 能更精确控制动画过程。
1. 基础语法：text-shadow 与 keyframes 结合
text-shadow 接受多个参数：水平偏移、垂直偏移、模糊半径、颜色。在 @keyframes 中定义这些值的变化，可实现动态效果。
@keyframes glow {
0% {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
100% {
text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}
}
.animated-text {
font-size: 2rem;
color: #fff;
animation: glow 1.5s ease-in-out infinite alternate;
}
2. 多层阴影动态变化
可以同时改变多层阴影，比如内光晕加外扩散，增强立体感。
示例：双层阴影脉动效果
@keyframes pulseShadow {
0% {
text-shadow:
0 0 8px gold,
0 0 12px goldenrod;
}
50% {
text-shadow:
0 0 15px gold,
0 0 20px goldenrod;
}
100% {
text-shadow:
0 0 10px gold,
0 0 15px goldenrod;
}
}
.pulse-text {
color: orange;
font-weight: bold;
animation: pulseShadow 2s ease-in-out infinite;
}
3. 颜色与位置联动过渡
不只是模糊值，颜色和偏移也可以动画化，制造漂浮或投影移动效果。
立即学习“前端免费学习笔记（深入）”；
示例：文字投影缓慢漂移
@keyframes floatShadow {
0% {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
50% {
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
}
100% {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
}
.float-text {
color: #333;
animation: floatShadow 3s ease-in-out infinite alternate;
}
4. 注意事项与兼容性
尽管现代浏览器广泛支持 text-shadow 动画，仍需注意以下几点：
- 避免在低性能设备上运行过多复杂动画，影响渲染
- 确保
rgba或hsla颜色格式一致，防止插值异常 - 不要省略中间关键帧中的任意一层阴影，否则可能引起闪烁
- 可配合
will-change: text-shadow提升动画性能（谨慎使用）
基本上就这些。只要结构清晰，@keyframes 能让 text-shadow 实现自然流畅的视觉过渡，适合用在标题、按钮或提示文字中增强交互感。不复杂但容易忽略细节。
