ボタン上の 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 中国語 Web サイトの他の関連記事を参照してください。