CSS过渡（transition）是CSS3提供的属性变化平滑过渡能力，text-shadow是用于设置文字阴影的CSS属性，将二者结合可以制作出丰富且流畅的文字动效，不需要依赖JavaScript就能实现很多视觉效果。
基础概念说明
CSS过渡基础
CSS过渡需要指定两个核心要素：过渡的属性和过渡的时长，可选配置过渡的缓动函数和延迟时间。基本语法如下：
/* 过渡所有变化的属性，时长0.3秒，缓动函数ease */ transition: all 0.3s ease; /* 单独指定过渡text-shadow属性，时长0.5秒，线性缓动 */ transition: text-shadow 0.5s linear;
text-shadow基础
text-shadow的语法为<text-shadow: 水平偏移 垂直偏移 模糊半径 颜色>，可以设置多组阴影值用逗号分隔，实现多层阴影效果。
/* 单个阴影：右移2px，下移2px，模糊3px，黑色 */ text-shadow: 2px 2px 3px #000; /* 多个阴影：发光效果 */ text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
常见文字动效实现
文字发光动效
通过过渡text-shadow的模糊半径和颜色，实现文字从无发光到发光的渐变效果，鼠标悬停时触发动效。
.glow-text {
font-size: 32px;
color: #333;
/* 初始无阴影 */
text-shadow: 0 0 0 transparent;
/* 过渡text-shadow属性，时长0.4秒 */
transition: text-shadow 0.4s ease;
}
.glow-text:hover {
/* 悬停时添加红色发光阴影 */
text-shadow: 0 0 8px #ff4444, 0 0 16px #ff4444, 0 0 24px rgba(255, 68, 68, 0.5);
}
对应的HTML结构如下：
<div class="glow-text">发光文字效果</div>
文字颜色渐变动效
通过多层text-shadow模拟颜色渐变，结合过渡实现颜色切换的动效，这里使用多层不同颜色的阴影叠加实现渐变感。
.gradient-text {
font-size: 32px;
color: #333;
/* 初始渐变阴影：蓝到紫 */
text-shadow: 1px 1px 2px #4facfe, 2px 2px 4px #00f2fe;
transition: text-shadow 0.5s ease;
}
.gradient-text:hover {
/* 悬停切换为橙到红渐变阴影 */
text-shadow: 1px 1px 2px #f6d365, 2px 2px 4px #fda085;
}
文字抖动阴影动效
结合:hover伪类和过渡，让文字阴影在多个偏移值之间切换，模拟轻微的抖动效果，提升文字的活泼感。
.shake-text {
font-size: 32px;
color: #333;
text-shadow: 0 0 0 transparent;
transition: text-shadow 0.1s ease;
}
.shake-text:hover {
/* 利用动画关键帧配合过渡实现连续抖动，这里简化为悬停时循环切换阴影 */
animation: shake 0.3s infinite;
}
@keyframes shake {
0% { text-shadow: 1px 0 0 #ff0000; }
25% { text-shadow: -1px 0 0 #ff0000; }
50% { text-shadow: 0 1px 0 #ff0000; }
75% { text-shadow: 0 -1px 0 #ff0000; }
100% { text-shadow: 1px 0 0 #ff0000; }
}
注意事项
- 多层text-shadow会增加浏览器渲染压力，尽量不要设置超过5层阴影，避免影响页面性能。
- 过渡时长建议设置在0.2秒到0.8秒之间，过短效果不明显，过长会显得拖沓。
- 如果动效需要自动播放，可以结合CSS动画（animation）和text-shadow，过渡更适合触发式的动效场景。
通过合理搭配CSS过渡的缓动函数和text-shadow的阴影参数，还能实现更多个性化的文字动效，开发者可以根据实际需求调整参数值，适配不同的网页设计风格。
CSS过渡text-shadow文字动效CSS动画修改时间：2026-07-22 03:33:24