transition 不能直接作用于 color 实现渐变效果，因 color 是离散属性且不支持渐变色间插值；需用 background-image + background-clip: text + text-fill-color: transparent 实现文字渐变悬停，且仅 webkit 内核支持。
transition 不能直接作用于 color 渐变
很多人写 transition: color 0.3s，鼠标悬停时却看不到颜色“渐变”，只看到突变——这是因为 CSS 的 color 是离散属性，浏览器不支持在两个不同渐变色（比如 linear-gradient）之间插值过渡。真正能平滑过渡的，是纯色之间的切换。
用 background-clip + text-fill-color 实现文字渐变悬停
想让文字本身显示为渐变色，并且悬停时“渐变方向/色标”变化，得绕过 color，改用背景图 + 文字裁剪。核心是两步：用 background-image 设渐变，再用 background-clip: text 和 text-fill-color: transparent 把背景“贴”到文字上。
实操建议：
- 必须加
-webkit-background-clip: text和-webkit-text-fill-color: transparent，目前仅 WebKit 内核（Chrome/Safari/Edge）稳定支持，Firefox 仍不支持background-clip: text -
transition要写在background-image上，但注意：不是所有渐变都能过渡——只有相同类型、相同色标数量的linear-gradient才能平滑插值（例如都用 2 个色标，起始角从 45deg → 135deg 可过渡；但linear→radial不行） - 示例写法：
h1 { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background 0.4s ease; } h1:hover { background: linear-gradient(135deg, #ff6b6b, #4ecdc4); }
纯色过渡更稳妥，别硬套渐变
如果项目需兼容 Firefox 或追求 100% 稳定，直接放弃文字本体渐变，改用纯色 color 过渡是最省心的选择。它无兼容性问题、性能好、写法直白。
常见错误现象：
- 写了
transition: color 0.3s却没生效 → 检查是否被!important或更高优先级样式覆盖，或父元素设置了color但子元素未继承 - 悬停后颜色“闪一下”才过渡 → 可能是初始状态没设
color（比如只在:hover里写了），务必在默认状态就声明基础色 - 过渡太慢/太快 →
transition-timing-function影响感知，ease比linear更自然，别盲目堆时长
transition 触发依赖真实属性变更
CSS 动画不会因为“看起来变了”就触发，而是严格比对计算后的属性值。比如你用 JS 动态改了 class，但新 class 里 color 值和旧的一样（哪怕写法不同，如 #f00 vs red），就不会触发过渡。
容易踩的坑：
- 预处理器（如 Sass）编译后颜色值归一化，导致 hover 前后实际值相同 → 用 DevTools 查看 computed 样式确认
- 使用 CSS 自定义属性（
--text-color）时，没在根或组件级提前定义初始值，导致首次渲染无过渡起点 -
transition写在伪元素（如::before）上，但该伪元素默认display: none，悬停才block→ display 变更无法过渡，得换用opacity或transform
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
