17370845950

通过 css 动画控制 `linear-gradient` 的角度变化，配合多关键帧、`linear` 缓动函数与无限循环，可实现流畅自然的渐变背景旋转效果。

要让 CSS 渐变背景实现真正平滑的旋转动画，核心在于：不能仅依赖两个关键帧（0% → 100%）做角度跳变，否则浏览器会进行插值计算，但因 background 是非可动画属性（CSS 规范中 background 本身不可直接动画），实际生效的是 background-image —— 而 linear-gradient() 中的角度值（如 110deg）属于可动画的 类型，因此只要确保只改变角度、保持颜色停靠点（color stops）完全一致，就能触发硬件加速的高效插值。

✅ 正确做法是：

• 在 @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 ≥ 2025）均支持 linear-gradient() 角度动画；旧版 IE 不支持，无需考虑；
• 如需暂停/交互控制，可通过 JS 切换 animation-play-state。

最终效果：背景渐变以稳定角速度持续旋转，色彩带流动自然，无跳跃、无闪烁，完美适配登录页、仪表盘或创意首页等场景。