CSS渐变背景hover过渡失效，如何实现颜色平滑过渡？

你的代码过渡不生效的核心原因在于早期CSS不支持渐变属性的过渡，但现代浏览器已经原生支持结构一致的CSS渐变过渡，只需调整代码即可实现效果：

现代浏览器解决方案 #

简化CSS代码，移除hover状态下的冗余属性，仅修改颜色变量，并确保过渡目标正确：

.heart {
  --c: red;
  width: 200px;
  aspect-ratio: 1;
  background:
    radial-gradient(at 70% 31%, var(--c) 29%, #0000 30%),
    radial-gradient(at 30% 31%, var(--c) 29%, #0000 30%),
    linear-gradient(var(--c) 0 0) bottom/100% 50% no-repeat;
  clip-path: polygon(-43% 0, 50% 91%, 143% 0);
  /* 精确过渡background属性，避免过渡不必要的属性 */
  transition: background 0.5s ease;
}

.heart:hover {
  --c: blue;
}

原理说明 #

• 现代浏览器（Chrome 111+、Firefox 113+、Safari 16.4+）已支持对结构完全一致的渐变进行过渡，只要渐变的层数、位置、语法规则不变，仅通过CSS变量修改颜色值，浏览器就能识别并执行平滑过渡。
• 移除hover状态下的冗余属性，让元素继承初始状态的布局和背景结构，仅触发颜色变量的变化，确保过渡逻辑清晰。

兼容旧版浏览器方案 #

如果需要兼容不支持渐变过渡的旧版浏览器，可以通过伪元素叠加两个不同颜色的心形，过渡伪元素的透明度实现切换效果：

.heart {
  width: 200px;
  aspect-ratio: 1;
  position: relative;
  clip-path: polygon(-43% 0, 50% 91%, 143% 0);
}

.heart::before,
.heart::after {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity 0.5s ease;
}

/* 默认显示红色心形 */
.heart::before {
  background:
    radial-gradient(at 70% 31%, red 29%, #0000 30%),
    radial-gradient(at 30% 31%, red 29%, #0000 30%),
    linear-gradient(red 0 0) bottom/100% 50% no-repeat;
}

/* hover时显示蓝色心形 */
.heart::after {
  background:
    radial-gradient(at 70% 31%, blue 29%, #0000 30%),
    radial-gradient(at 30% 31%, blue 29%, #0000 30%),
    linear-gradient(blue 0 0) bottom/100% 50% no-repeat;
  opacity: 0;
}

.heart:hover::after {
  opacity: 1;
}

原理说明 #

通过两个伪元素分别渲染红色和蓝色心形，默认隐藏蓝色心形（opacity: 0），hover时切换其透明度为1，利用opacity过渡实现平滑的颜色切换，兼容所有支持CSS伪元素和opacity过渡的浏览器。

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