通过结合CSS的transition与text-shadow，可实现文字悬停发光等平滑动效。首先设置transition控制text-shadow变化过程，如transition: text-shadow 0.4s ease-in-out；再利用text-shadow定义阴影偏移、模糊半径和颜色，在:hover状态叠加多层阴影，例如text-shadow: 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b，实现由内向外扩散的光晕效果。注意指定具体属性避免性能损耗，深色背景提升对比度，移动端简化阴影以保流畅。
让文字在页面交互中“活”起来，是提升用户体验的小巧思。通过将CSS的transition（过渡）与text-shadow（文字阴影）结合使用，可以轻松实现平滑的文字动效，比如悬停发光、立体浮现或渐变投影等效果。
基本原理：transition 控制变化过程
transition 用于定义CSS属性变化时的动画过渡效果。它能控制过渡时间、缓动方式和延迟等。当文字状态改变（如鼠标悬停）时，transition会平滑地从原始样式过渡到目标样式。
常用写法：
transition: property duration timing-function delay;例如：
立即学习“前端免费学习笔记（深入）”；
transition: text-shadow 0.3s ease-in-out;text-shadow 添加动态视觉层次
text-shadow 可以为文字添加一层或多层阴影，格式为：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;示例：
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
通过在:hover状态下修改text-shadow的模糊值、颜色或增加多层阴影，配合transition就能实现自然的光影动画。
实用案例：发光文字悬停效果
实现一个常见但吸睛的效果——文字默认无阴影，鼠标悬停时逐渐发出柔和光晕。
CSS代码示例：
.glow-text {color: #fff;
font-size: 2rem;
transition: text-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
}
.glow-text:hover {
text-shadow: 0 0 10px #ff6b6b,
0 0 20px #ff6b6b,
0 0 30px #ff6b6b;
}
说明：
- 初始状态未设置
text-shadow，文字干净简洁 - hover时叠加三层红色光晕，由内到外模糊半径递增，模拟发光感
- 使用
cubic-bezier调整缓动曲线，使动画更自然
进阶技巧与注意事项
想要效果更细腻，可以注意以下几点：
- 避免在
transition中使用all，应明确指定text-shadow，防止意外动画 - 多层
text-shadow用逗号分隔，顺序影响渲染层级 - 在深色背景上效果更明显，注意对比度可读性
- 移动设备上慎用复杂阴影，可能影响性能
基本上就这些。掌握 transition 与 text-shadow 的联动，无需JavaScript也能做出富有表现力的文字动效。关键是控制好过渡节奏和阴影层次，让视觉反馈既明显又不突兀。
