如何在按鈕上轉換 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中文網其他相關文章！