如何为页面加载时的body线性渐变背景添加淡入效果

我来帮你搞定这个页面加载时线性渐变背景淡入的问题！你遇到的核心困扰是CSS transition无法直接对线性渐变背景做平滑过渡——因为线性渐变属于background-image类型，浏览器没法像处理纯色（background-color）那样，在两种渐变/无渐变状态之间生成过渡帧，所以直接切换会显得生硬甚至没效果。

下面给你两个实用的解决方案：

方案一：用伪元素叠加实现淡入（推荐） #

这个方法通过给body加一个全屏伪元素，初始完全透明，加载后过渡它的opacity来实现渐变背景的淡入，兼容性好且效果平滑：

代码实现 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
  $("body").addClass("fade-in-gradient");
});
</script>

<style>
body {
  position: relative;
  background: #ffffff; /* 设置初始背景色，和渐变淡入衔接更自然 */
  min-height: 100vh; /* 确保body占满视口高度 */
}

/* 用伪元素承载渐变背景 */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, red, yellow);
  opacity: 0;
  transition: opacity 1s ease-in-out; /* 这里控制淡入动画的时长和曲线 */
  z-index: -1; /* 把伪元素放在内容下方，不影响页面元素 */
}

/* 加载完成后添加类，触发淡入 */
body.fade-in-gradient::before {
  opacity: 1;
}
</style>

方案二：用Keyframes实现平滑淡入 #

如果你更倾向于用CSS动画，也可以通过伪元素的opacity动画来实现，不需要JS触发的话可以直接自动执行：

body {
  position: relative;
  background: #ffffff;
  min-height: 100vh;
}

body::before {
  content: "";
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  background: linear-gradient(30deg, red, yellow);
  opacity: 0;
  animation: fadeInGradient 1s ease forwards; /* forwards让动画停在最后一帧 */
  z-index: -1;
}

@keyframes fadeInGradient {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

如果要通过JS（比如onload）触发动画，只需要给body添加包含动画的类即可，和方案一的JS逻辑类似。

为什么你原来的方法无效？ #

你之前尝试的transition: background 1s对纯色背景有效，是因为纯色属于background-color属性，浏览器可以在两种颜色值之间计算过渡帧；但线性渐变是background-image，浏览器无法在“无图像”和“渐变图像”之间生成过渡效果，所以直接切换会没有动画。而直接用Keyframes切换渐变背景的话，本质是图像替换，没有中间过渡帧，所以效果生硬。

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