为何移动端仍可见渐变动画过渡？已调慢动画并缩小背景尺寸

核心原因 #

问题本质是背景缩放比例与屏幕尺寸的匹配度差异：大屏上200% 200%的背景，相对屏幕的变化幅度占比小；但小屏宽度窄，同样的背景位置移动，对应到屏幕可见区域的颜色变化幅度会被放大——哪怕动画时长拉到200s，视觉上的过渡感依然明显。background-attachment: fixed只是固定背景与视口的关系，无法改变这种比例带来的视觉差异。

具体解决方案 #

1. 缩小背景缩放比例

把background-size从200% 200%调小，比如110% 110%或120% 120%，这样背景移动的范围大幅缩小，视觉上的颜色过渡会变得非常平缓：

@media (max-width: 900px) {
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(300deg, #32de84, #4FFFB0);
    background-size: 110% 110%; /* 降低背景缩放比例 */
    animation: gradient-animation 200s ease-in-out infinite;
  }

  @keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

2. 调整渐变角度适配小屏

将渐变角度改为垂直方向（比如90deg），这样横向移动背景时，小屏上的颜色过渡会更隐蔽——因为垂直渐变的颜色分布是纵向的，横向位置变化对可见区域的颜色影响更小：

background: linear-gradient(90deg, #32de84, #4FFFB0); /* 改为垂直渐变 */

3. 完全移除小屏动画

如果不需要小屏上的渐变动画，直接在媒体查询中去掉动画属性，改用静态渐变：

@media (max-width: 900px) {
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(300deg, #32de84, #4FFFB0);
    /* 移除动画相关属性 */
  }
}

内容的提问来源于stack exchange，提问作者Nevin Arushan