CSS 線形グラデーションを直接遷移できないのはなぜですか?

線形グラデーションを使用した CSS トランジション

質問

背景として CSS 線形グラデーションを使用してボタンにトランジションを実装しようとすると、困難に遭遇するかもしれません。努力にもかかわらず、移行は実行されません。コード内の潜在的なエラーについて問い合わせて、解決策を探します。

回答

残念ながら、CSS でのグラデーションの直接遷移は現在サポートされていません。

この制限を克服するには、実用的な代替案には、目的のグラデーションをレンダリングする追加要素を導入し、それに不透明度遷移を適用することが含まれます。

<code class="css">a.button {
  position: relative;
  z-index: 9;
  /* ... Additional style properties ... */
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  /* ... Additional style properties ... */
  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  transition: opacity 1s linear;
}

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

HTML:

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

このアプローチでは、.button-helper 要素が提供します。グラデーションを適用し、不透明度を滑らかに変化させて、目的の効果を実現します。

以上がCSS 線形グラデーションを直接遷移できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。