如何为Div实现渐变背景的淡入淡出过渡效果？

问题根源 #

你遇到的问题是浏览器不支持直接在两个不同的background-image值之间过渡——linear-gradient()本质是生成背景图像，而非单纯的颜色值。你初始状态用了纯白渐变（和纯色等价），hover时切换为彩色渐变，这相当于替换了整个背景图像，而transition无法对图像类属性做插值过渡，所以没有动画效果。

解决方案一：用伪元素叠加+Opacity过渡（推荐，适配原有边框结构） #

利用额外的伪元素承载hover渐变背景，通过过渡opacity实现淡入效果，完美契合你现有渐变边框的结构：

.base-action-card {
  padding: 1rem;
  position: relative;
  z-index: 0;
  height: 200px;
  width: 200px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  cursor: pointer;
  background: white;
  overflow: hidden; /* 确保伪元素圆角与容器一致 */

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1FC1FA 0%, #4b67f2 100%);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  /* 新增伪元素承载hover渐变背景 */
  &::after {
    content: "";
    position: absolute;
    z-index: -2; /* 置于边框伪元素下方，不遮挡渐变边框 */
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #1FC1FA 0%, #4b67f2 100%);
    opacity: 0;
    transition: opacity 0.3s ease; /* 过渡透明度实现淡入 */
  }

  &:hover, &:active {
    &::after {
      opacity: 1;
    }
  }
}

解决方案二：单渐变+Background Position过渡（无需额外伪元素） #

将两种状态合并为一个垂直拼接的渐变，通过过渡background-position切换显示区域：

.base-action-card {
  padding: 1rem;
  position: relative;
  z-index: 0;
  height: 200px;
  width: 200px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  cursor: pointer;
  /* 拼接纯白与彩色渐变，初始显示纯白区域 */
  background: linear-gradient(180deg, white 0%, white 50%, #1FC1FA 50%, #4b67f2 100%);
  background-size: 100% 200%; /* 高度设为容器的2倍 */
  background-position: 0 0;
  transition: background-position 0.3s ease;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1FC1FA 0%, #4b67f2 100%);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  &:hover, &:active {
    background-position: 0 100%; /* 切换到彩色渐变区域 */
  }
}

关键原理 #

transition仅支持对可插值的属性（如颜色、长度、opacity、transform等）进行平滑过渡。而linear-gradient()属于background-image，是生成的位图资源，两个不同的图像之间无法自动计算中间帧，因此直接过渡background属性无效。

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