ホームページ  >  記事  >  ウェブフロントエンド  >  線形グラデーションによる CSS 遷移: グラデーションが遷移しないのはなぜですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-31 10:13:01846ブラウズ

 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。