如何在按钮上转换 CSS 线性渐变？

具有线性渐变的 CSS 过渡

用户在将过渡应用于使用 CSS 线性渐变创建的按钮背景时遇到困难。他们的代码如下：

<code class="css">a.button {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956));
  -webkit-transition: background 5s linear;
}

a.button:hover {
  -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37))
}</code>

问题：过渡不适用于按钮的背景渐变。

解决方案：

遗憾的是，CSS 过渡不能直接应用于线性渐变。因此，需要一种解决方法：

1. 创建具有所需渐变的附加元素。
2. 将元素放置在按钮后面（使用负 z 索引）并覆盖相同区域。
3. 将渐变元素的初始不透明度设置为 0。
4. 在不透明度属性上使用 CSS 过渡，以在悬停时逐渐淡入渐变元素。

<code class="css">a.button {
  position: relative;
  z-index: 9;
  ... (rest of the CSS)

  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  ... (rest of the CSS)

  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

<code class="html"><a href="#" class="button">
  <span class="button-helper"></span>
  button
</a></code>

以上是如何在按钮上转换 CSS 线性渐变？的详细内容。更多信息请关注PHP中文网其他相关文章！