使用CSS transition实现文字颜色平滑过渡，设置默认色、悬停色及过渡时间即可。2. 通过CSS变量管理颜色更易维护，适合主题统一调整。3. 结合background-clip与渐变背景可实现文字颜色流动效果，增强视觉交互。核心为transition与color配合，适用于链接、按钮等场景，推荐过渡时间0.3s–0.5s。
实现文字颜色在鼠标悬停（hover）时平滑过渡，关键在于使用 CSS 的 transition 属性配合 color 变化。只要设置好初始颜色、悬停颜色和过渡时间，就能让文字颜色自然渐变。
1. 基础 hover 颜色过渡
这是最常见的方式：设置默认文字颜色，然后在 hover 状态下改变颜色，并通过 transition 控制过渡效果。
.text-transition {
color: #000;
transition: color 0.3s ease;
}
<p>.text-transition:hover {
color: #f00;
}</p>说明：
- transition: color 0.3s ease; 表示只对 color 属性做 0.3 秒的缓动过渡。
- 悬停时 color 从黑色 (#000) 渐变到红色 (#f00)。
2. 使用 CSS 变量增强可维护性
利用自定义属性（CSS 变量）可以更方便地统一管理颜色主题，也便于后期修改。
.text-var {
--text-color: #333;
--text-hover: #007acc;
color: var(--text-color);
transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
<p>.text-var:hover {
color: var(--text-hover);
}</p>这种方式适合组件化开发，只需更改变量即可全局调整配色。
立即学习“前端免费学习笔记（深入）”；
3. 结合背景与文字颜色过渡（进阶效果）
有时希望文字颜色变化的同时，背景也有渐变感，可以用 background-clip 和 gradient 实现更炫的效果。
.gradient-text {
color: #666;
background-image: linear-gradient(45deg, #ff7a00, #ef007e);
background-size: 100% 100%;
background-position: 0 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 0.4s ease;
}
<p>.gradient-text:hover {
background-position: 100% 0;
}</p>这个技巧将渐变背景“剪裁”为文字形状，通过移动 background-position 实现颜色流动的视觉效果。
基本上就这些。核心是 transition + color，简单有效。搭配 CSS 变量或背景剪裁能做出更丰富的交互反馈，适用于导航链接、按钮文字等场景。注意控制过渡时间不要太长，一般 0.3s–0.5s 最自然。
