在网页开发中，使用CSS让元素的背景颜色在状态变化时平滑改变是很常见的需求。通过 transition 属性监听 background-color 的变化，就可以在不写JavaScript的情况下实现柔和的视觉过渡效果。
一、transition基础写法
transition 是一个简写属性，用来定义元素从一种样式变为另一种样式时的过渡行为。针对背景颜色，我们只需关注 background-color 这一属性。
1. 基本语法
下面这段代码让 div 在背景色变化时用零点三秒完成过渡：
.box {
background-color: #ffffff;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #3498db;
}
当鼠标移入 .box 时，背景会从白色渐变为蓝色，移出时反向过渡。
2. 分开写各个参数
也可以把过渡参数拆开写，含义更清晰：
.btn {
background-color: #2ecc71;
transition-property: background-color;
transition-duration: 0.4s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
.btn:active {
background-color: #27ae60;
}
二、timing-function 的选择
transition-timing-function 决定颜色变化的速度曲线。常用值有 ease、linear、ease-in、ease-out 和 ease-in-out。比如做提示框出现，用 ease-out 会显得更自然。
| 函数值 | 效果说明 |
|---|---|
| ease | 开始慢，中间快，结束慢，默认选项 |
| linear | 匀速变化 |
| ease-in | 开始慢，后面逐渐加快 |
三、用类切换触发过渡
除了 hover，还可以通过添加或删除 class 来改变背景色，transition 同样生效。
<style>
.card {
background-color: #f1f1f1;
transition: background-color 0.5s ease;
}
.card.active {
background-color: #e74c3c;
}
</style>
<div class="card" id="myCard">内容</div>
<button onclick="document.getElementById('myCard').classList.toggle('active')">
切换背景
</button>
点击按钮后，card 的背景色会在半秒内变为红色，再次点击恢复。
四、常见误区
- 没有初始 background-color：若元素未设初始背景，浏览器可能无法计算过渡起点。
- 过渡属性写错：应写 background-color 而非 background，否则会连背景图位置一起过渡。
- 在 display 切换时无效：从 none 到 block 的元素无法做进入过渡，可改用 visibility。
五、小结
使用 CSS 的 transition 配合 background-color 是实现背景颜色过渡最简单可靠的方式。记住指定过渡属性、时长与曲线，并避免上述误区，就能轻松完成大多数界面交互动效。
CSStransitionbackground-color修改时间：2026-07-30 19:15:25