ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS ホバー効果を使用して左から右への背景色の塗りつぶしを作成する方法

CSS ホバー効果を使用して左から右への背景色の塗りつぶしを作成する方法

Linda Hamilton
リリース: 2024-10-29 02:50:02
オリジナル
764 人が閲覧しました

How to Create a Left-to-Right Background Color Fill with CSS Hover Effects?

CSS を使用した左から右への背景色の塗りつぶしの作成

CSS3 では、トランジションを使用してホバー効果を強化し、動的な視覚効果を作成できます。 。一般的なシナリオの 1 つは、ホバー時に要素の背景を左から右に異なる色で塗りつぶすことです。これを実現するには:

ステップ 1: 線形グラデーションを使用する

線形グラデーションを使用して、背景色の遷移を確立します。 50% で明確に分けて 2 色を定義します (例: 50% の前に赤、50% の後に青)。

ステップ 2: グラデーションのスケールと位置

要素の幅の 2 倍、高さ 100% になるように背景を拡大縮小します (例、background-size: 200% 100%;)。要素の右側にグラデーションを配置します。

ステップ 3: ホバー トランジションを作成します

ホバー時に、背景の位置を「左」に変更します。これをトランジション(例:transition: all 2s easy;)と組み合わせて、位置の変化をアニメーション化します。

コード例:

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

/* On hover */
background-position: left;</code>
ログイン後にコピー

オプションの拡張機能:

トランジションの色を制御するには、背景の幅を 300% に増やし、グラデーションの開始と終了のパーセンテージを微調整します (例: 開始は 34%、終了は 65%)。

ブラウザのサポート:

ブラウザ間の互換性のために、transition プロパティにプレフィックスを付けることを検討してください。

以上がCSS ホバー効果を使用して左から右への背景色の塗りつぶしを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート