線形グラデーションによる CSS 遷移: グラデーションが遷移しないのはなぜですか?

線形グラデーションを使用した CSS トランジション: 潜在的な落とし穴

CSS 線形グラデーションの背景を持つボタンにトランジションを追加しようとすると、予期せぬ効果が得られない場合があります。この不一致は、グラデーションの遷移における現在の制限に起因します。

グラデーションを直接遷移しようとする代わりに、次の追加要素を導入することが回避策となります。

<code class="css">a.button {
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  background: linear-gradient(top, lime, #89af37);
  transition: opacity 1s linear;
}

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

このヘルパー要素は独自の線形要素を持っています。グラデーションと調整された不透明度。トランジションはホバー時に不透明度を 0 と 1 の間で切り替え、グラデーショントランジションのような錯覚を生み出します。

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