如何用css transition制作文字阴影渐变-css教程-PHP中文网

如何用css transition制作文字阴影渐变

P粉602998670

发布： 2025-09-24 12:55:01

原创

278人浏览过

答案：通过CSS transition与text-shadow配合，设置初始和悬停状态的阴影值，可实现文字阴影渐变动画。需用rgba透明色占位确保过渡生效，推荐使用多层阴影与cubic-bezier缓动函数增强视觉效果，避免阴影层数突变以保证平滑插值。

如何用css transition制作文字阴影渐变

要实现文字阴影的渐变效果，可以通过 CSS 的 transition 配合 text-shadow 属性来完成。虽然 text-shadow 本身不能直接用 transition 平滑过渡到另一种阴影状态，但只要正确设置起始和结束状态，就能实现自然的渐变动画。

1. 基础结构：设置文字和默认阴影

先给文字设置一个基础的 text-shadow，并定义过渡属性。初始状态可以是无阴影或轻微阴影。

<div class="shadow-text">悬停我</div>

登录后复制

.shadow-text {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0); /* 初始无阴影 */
  transition: text-shadow 0.5s ease;
}

登录后复制

2. 定义悬停状态：添加明显的文字阴影

当鼠标悬停时，改变 text-shadow 的值，transition 会自动补间动画。

.shadow-text:hover {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

登录后复制

3. 进阶：多层阴影与彩色渐变效果

你可以叠加多层阴影，模拟发光或立体渐变效果，并让这些阴影一起平滑出现。

绘影字幕

视频字幕制作神器、轻松编辑影片

查看详情

立即学习“前端免费学习笔记（深入）”；

.shadow-text {
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: text-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>.shadow-text:hover {
text-shadow: 
0 0 5px rgba(255, 255, 255, 0.8),
0 0 10px rgba(0, 255, 255, 0.6),
0 0 20px rgba(0, 255, 255, 0.4),
0 0 30px rgba(0, 255, 255, 0.2);
}</p>

登录后复制