如何实现鼠标悬停时linear-gradient颜色的平滑过渡效果？

希望在鼠标悬停时，实现linear-gradient()颜色的平滑过渡，达到类似纯色过渡的自然效果。尝试添加transition: background 1s linear但未生效，附上相关代码：

HTML代码 #

<header>
<nav class="navbar navbar-dark bg-dark" aria-label="navbar">
  <div class="container-fluid justify-content-between">
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftMainNav"
      aria-controls="leftMainNav" aria-label="Toggle left navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="index.php">
      <img src="assets/images/logo-l.png" class="img-fluid" alt="CBS Logo">
      <span class="navbar-brand-text">CherryBerry Studios</span>
    </a>
    <div class="d-flex" style="width:240px;">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" aria-expanded="false">Company</a>

        <ul class="dropdown-menu position-absolute" style="top:55px; width:110px;">
            <li><a class="dropdown-item text-center" href="#">About Us</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Partners</a></li>
            <li>
              <hr class="dropdown-divider ">
            </li>
            <li><a class="dropdown-item text-center" href="#">Affiliates</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Legal Info</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Support</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item text-center" href="#">Our Team</a></li>
          </ul>
        </li>
      </ul>
        </li>
      </ul>
      <button type="button" class="btn btn-menu mt-1 ms-2 me-2" data-bs-toggle="modal"
        data-bs-target="#signupModal">Sign Up</button>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightMainNav"
        aria-controls="rightMainNav" aria-label="Toggle right navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="rightMainNav" aria-labelledby="rightMainNav">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title p-0 m-0 justify-content-middle" id="rightMainNavLabel">Offcanvas</h5>
        <button type="button" class="btn-close btn-close-white justify-content-end" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
      </div>
      <div class="offcanvas-body justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="offcanvas offcanvas-start bg-dark" tabindex="-1" id="leftMainNav" aria-labelledby="leftMainNav">
      <div class="offcanvas-header">
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
          aria-label="Close"></button>
        <h5 class="offcanvas-title" id="leftMainNavLabel">Offcanvas</h5>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav d-flex">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</nav>
</header>

CSS代码（原代码） #

.navbar-brand-text {
  background: -webkit-linear-gradient(green, magenta, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 1s;
}

.navbar-brand-text:hover {
  background: -webkit-linear-gradient(blue, red,);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSS的linear-gradient()属于背景图像（background-image），而非背景颜色（background-color），默认情况下transition无法直接对背景图像的切换进行平滑过渡。可以通过伪元素叠加+透明度过渡的方式实现需求效果：

修改后的代码 #

HTML（仅修改目标span标签）

<span class="navbar-brand-text" data-text="CherryBerry Studios">CherryBerry Studios</span>

CSS

.navbar-brand-text {
  position: relative;
  background: -webkit-linear-gradient(green, magenta, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-brand-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 1s linear;
}

.navbar-brand-text:hover::before {
  opacity: 1;
}

关键说明 #

1. 原问题原因：transition: background仅能作用于背景颜色的变化，无法识别背景图像的切换，所以原代码无过渡效果。
2. 伪元素方案原理：
   • 原元素和伪元素分别承载两种渐变文本，伪元素默认完全透明
   • hover时通过修改伪元素的opacity属性实现平滑淡入，过渡作用在opacity上（CSS过渡支持该属性）
   • attr(data-text)确保伪元素文本与原元素一致，避免内容错位
3. 语法修正：原CSS中-webkit-linear-gradient(blue, red,);多了一个冗余逗号，已删除，避免语法错误。

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