hover颜色突兀需加transition: background-color 0.3s ease;，且初始与hover状态必须同为rgb()整数格式，transition须写在默认状态中。
hover颜色突兀是因为没加transition
直接写 background-color: #ff6b6b; 到 background-color: #4ecdc4;，浏览器默认没有过渡，瞬间切换就显得生硬。必须显式声明 transition 才能触发平滑变化。
推荐写法：transition: background-color 0.3s ease; —— 注意三个部分缺一不可：属性名、时长、缓动函数。
-
background-color要写全，不能简写成all（会意外触发其他属性过渡，比如边框或阴影抖动） - 时长建议 0.2s–0.4s：太短像没过渡，太长像卡顿
-
ease比linear更自然；若要更柔和可试ease-in-out
rgb比十六进制更适合过渡动画
十六进制颜色在 CSS 中会被浏览器转成 RGB 计算，但中间过程不透明，某些旧版浏览器（如 Safari 13 之前）对 #ff6b6b → #4ecdc4 的插值可能跳步或偏色。用 rgb() 显式定义，能让过渡路径更可控。
示例对比：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: rgb(255, 107, 107);
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgb(78, 205, 196);
}
- 避免用
rgba()除非真要改透明度；alpha 变化会叠加在颜色过渡上，容易发灰或闪烁 - RGB 值务必为整数，不要写
rgb(255.5, ...)，CSS 不支持小数 - 可用开发者工具实时拖动 RGB 滑块观察渐变是否线性，验证过渡是否符合预期
hover失效或过渡不触发的常见原因
写了 transition 却没效果？大概率是这些细节漏了：
- 初始状态和
:hover状态的background-color类型不一致，比如一边是rgb(255,0,0)，另一边是transparent或inherit—— 浏览器无法插值，直接跳变 - 按钮本身有
background-image，它会覆盖background-color，导致颜色过渡被遮住 - 父容器设置了
overflow: hidden且按钮带圆角，transition过程中可能触发重绘异常，表现为闪烁或卡顿 - 使用了 CSS 预处理器（如 Sass）时，
&:hover嵌套层级过深，编译后选择器权重不足，被其他样式覆盖
想更精细控制过渡节奏？试试自定义贝塞尔曲线
ease 是 cubic-bezier(0.25, 0.1, 0.25, 1)，适合大多数场景；但若按钮交互偏“轻快”或“沉稳”，可以手动调参：
例如让颜色先慢后快再慢（模拟物理惯性）：transition: background-color 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
- 在线调试推荐用 cubic-bezier.com，拖动锚点实时看效果
- 避免
y值超过 1（如cubic-bezier(0,2,1,-1)），会导致颜色短暂“超调”，视觉上像反向闪一下 - 移动端要注意：部分安卓 WebView 对非标准贝塞尔支持不稳定，保守起见优先用
ease或ease-in-out
