線形グラデーションによる CSS 遷移: グラデーションが遷移しないのはなぜですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-31 10:13:01

オリジナル

977 人が閲覧しました

CSS Transition with Linear Gradient: Why Does My Gradient Not Transition?

線形グラデーションを使用した 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 サイトの他の関連記事を参照してください。