通过 css 动画控制 `linear-gradient` 的角度变化，配合多关键帧、`linear` 缓动函数与无限循环，可实现流畅自然的渐变背景旋转效果。
要让 CSS 渐变背景实现真正平滑的旋转动画，核心在于：不能仅依赖两个关键帧（0% → 100%）做角度跳变，否则浏览器会进行插值计算，但因 background 是非可动画属性（CSS 规范中 background 本身不可直接动画），实际生效的是 background-image —— 而 linear-gradient() 中的角度值（如 110deg）属于可动画的
✅ 正确做法是：
- 在 @keyframes 中定义 多个中间角度关键帧（如 0%、25%、50%、75%、100%），避免大跨度突变；
- 使用 animation-timing-function: linear —— 保证角速度恒定，视觉上才是“匀速旋转”；
- 添加 animation-iteration-count: infinite 实现连续循环；
- 适当延长 animation-duration（如 6s 而非 1.5s），降低感知卡顿；
- 关键：所有关键帧中的渐变颜色、色标位置（20%、20.5%、50% 等）必须严格一致，仅角度变化，否则会出现颜色闪烁或过渡断裂。
以下是优化后的完整代码示例：
@keyframes Fond_rotatif {
0% {
background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
}
25% {
background: linear-gradient(125deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
}
50% {
background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
}
75% {
background: linear-gradient(145deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
}
100% {
background: linear-gradient(155deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
}
}
body {
margin: 0; /* 避免默认 body 边距干扰全屏背景 */
min-height: 100vh;
background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
animation: Fond_rotatif 6s linear infinite;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 ease-out 或其他非线性缓动函数——它会让旋转在起始/结束处明显减速，破坏“旋转感”；
- 避免在动画中修改色标位置（如把 20% 改成 22%），否则将触发整条渐变重绘，导致性能下降和闪烁；
- 若需更细腻控制，可增至 10+ 关键帧（如每 10° 一帧），但通常 4–5 帧已足够平滑；
- 现代浏览器（Chrome/Firefox/Safari ≥ 2022）均支持 linear-gradient() 角度动画；旧版 IE 不支持，无需考虑；
- 如需暂停/交互控制，可通过 JS 切换 animation-play-state。
最终效果：背景渐变以稳定角速度持续旋转，色彩带流动自然，无跳跃、无闪烁，完美适配登录页、仪表盘或创意首页等场景。
