17370845950

通过 css 动画控制 `linear-gradient` 的角度变化，并配合 `animation-timing-function: linear` 与多关键帧插值，可实现流畅、无限循环的渐变背景旋转效果。

要让 CSS 渐变背景“平滑旋转”，核心在于：不能仅依赖两端角度差（如 110deg → 135deg）做简单过渡，因为 background 属性本身是非可动画属性（CSS 规范中 background 是 shorthand，其子属性 background-image 不支持直接插值动画）。但幸运的是，linear-gradient() 中的角度值（如 135deg）属于可动画数值类型——只要我们在 @keyframes 中只改变渐变角度，保持颜色停靠点（color stops）完全一致，现代浏览器（Chrome/Firefox/Safari ≥ v104）即可对角度进行硬件加速的平滑插值。

✅ 正确做法：多关键帧 + 线性时序 + 无限循环

以下为优化后的完整方案（已适配您的 HTML 结构）：

@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;
}

? 关键改进说明：✅ 增加中间关键帧（25% / 50% / 75%）：避免角度突变，提供更细腻的过渡路径；✅ animation-timing-function: linear：消除 ease-out 导致的速度不均（起快收慢），确保匀速旋转；✅ animation-iteration-count: infinite（简写为 infinite）：实现无缝循环；✅ animation: ... 合并写法：更简洁且兼容性更好；✅ 添加 min-height: 100vh 和 margin: 0：保障背景在所有设备上完整渲染。

⚠️ 注意事项

• ❌ 不要尝试动画 background-image 或整个 background shorthand —— 浏览器会跳帧或直接不动画；
• ✅ 必须严格保持各关键帧中除角度外的所有参数一致（颜色、色标位置、单位等），否则将触发“离散切换”而非平滑插值；
• ? 兼容性提示：该方案在 Chrome 100+、Firefox 102+、Safari 16.4+ 中表现最佳；旧版 Safari 可能需添加 -webkit- 前缀（但现代项目通常无需）；
• ? 进阶建议：若需真正“无限连续旋转”（如 0deg → 360deg → 720deg），可改用 background: conic-gradient(...) 配合 transform: rotate() 容器遮罩方案，但本例中线性渐变角度动画已足够高效。

通过以上调整，您的页面背景将呈现稳定、匀速、视觉柔和的渐变旋转效果，既保持性能，又提升用户体验。