使用@keyframes可实现背景和文字颜色动态变化，通过定义关键帧控制background-color与color属性，结合animation实现循环动画，需注意缓动函数选择、颜色对比度及用户偏好设置，提升视觉效果与无障碍体验。
要实现动态背景颜色变化，可以使用 CSS 的 @keyframes 规则配合 background-color 属性。虽然你提到的是 color，但通常“背景颜色”变化使用的是 background-color。下面分别说明如何正确使用它们实现动画效果。
1. 使用 @keyframes 实现背景色渐变动画
通过定义关键帧来控制元素的 background-color 随时间变化，从而创建平滑的颜色过渡效果。
示例代码：
@keyframes changeBgColor {
0% { background-color: red; }
33% { background-color: yellow; }
66% { background-color: blue; }
100% { background-color: green; }
}
.animated-box {
width: 200px;
height: 200px;
animation: changeBgColor 5s ease-in-out infinite;
}
立即学习“前端免费学习笔记（深入）”；
上面的代码会让一个盒子在 5 秒内循环切换四种背景颜色。
2. 结合 color 属性改变文字颜色
如果还想让文字颜色也动态变化，可以在同一个 @keyframes 中加入 color 属性。
示例：同时改变背景和文字颜色
@keyframes changeColors {
0% {
background-color: black;
color: white;
}
50% {
background-color: white;
color: black;
}
100% {
background-color: navy;
color: yellow;
}
}
.text-box {
padding: 20px;
font-size: 18px;
animation: changeColors 6s linear infinite;
}
这样文字和背景会同步变化，增强视觉效果。
3. 常见技巧与注意事项
- 使用 infinite 让动画无限循环
- 选择合适的缓动函数如 ease-in-out 或 linear 控制动画节奏
- 确保颜色之间有足够的对比度，避免可读性问题
- 若需更流畅效果，可增加关键帧密度（如每 10% 设置一次）
- 考虑用户偏好，可通过 prefers-reduced-motion 减少动画干扰
4. 响应式与用户体验优化
对于注重体验的项目，建议添加媒体查询或系统偏好支持：
@media (prefers-reduced-motion: reduce) {
.animated-box,
.text-box {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
这能尊重用户的系统设置，提升无障碍访问体验。
基本上就这些。掌握 keyframes 和 background-color、color 的结合使用，就能轻松做出吸引人的动态色彩效果。不复杂但容易忽略细节。
