通过 css 动画控制 `linear-gradient` 的角度变化，并配合 `animation-timing-function: linear` 与多关键帧过渡，可实现背景渐变的流畅、无限旋转效果。
在原代码中，仅定义了 0% 和 100% 两个关键帧，且使用 ease-out 缓动函数，导致视觉上出现“跳跃式”转动（即角度突变、缺乏中间过渡），无法体现真正的“旋转感”。CSS 并不支持直接对 background-image（如 linear-gradient）做连续数值插值动画，但可通过在多个关键帧中精细递增角度值，模拟出平滑旋转效果。
✅ 正确做法是：
- 增加中间关键帧（如 25%、50%、75%），使角度逐步变化；
- 使用 animation-timing-function: linear，确保角度变化速度均匀；
- 添加 animation-iteration-count: infinite 实现循环旋转；
- 适当延长 animation-duration（如 6s），避免过快造成眩晕或细节丢失。
以下是优化后的完整 CSS 示例：
@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;
}? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ✅ 角度增量宜小而匀：从 110deg 到 155deg 跨度为 45deg，分 4 段过渡，每段 11.25deg 左右，视觉更连贯；
- ❌ 不要依赖 transform: rotate() 作用于 body —— 它会旋转整个文档流，破坏布局；
- ⚠️ 渐变色停靠点（如 20%、50.5%）必须完全一致，否则动画过程中会出现色带错位或闪烁；
- ? 若需更自然的“持续旋转”感，可将 100% 角度设为 110deg + 360deg = 470deg，利用 CSS 角度自动归一化特性实现真正无缝闭环（进阶技巧）：
/* 更高级的无缝旋转写法（推荐） */
@keyframes Fond_rotatif_seamless {
0% { background: linear-gradient(110deg, ...); }
100% { background: linear-gradient(470deg, ...); } /* 110 + 360 */
}这样浏览器会在动画结束时无缝衔接回起始角度，消除方向突变感，让旋转真正“永不停歇”。
综上，平滑渐变旋转的本质不是“动画背景”，而是用足够密集的角度关键帧 + 线性时序 + 无限循环，欺骗人眼达成流畅视觉体验——这是当前纯 CSS 方案中最可靠、兼容性最佳的实践方式。
