CSS ホバー効果で背景色を左から右に塗りつぶす方法

CSS を使用して背景色を左から右に塗りつぶす

CSS では、線形グラデーションを利用し、背景の位置をアニメーション化することで、魅力的なホバー効果を作成できます。この方法では、ホバー時に要素の背景を左から右に新しい色で塗りつぶすことができます。

線形グラデーションと背景サイズ

重要なのは、次のことを使用することです。 2 色で構成される線形グラデーションの背景を設定し、背景サイズを要素の幅の 2 倍に設定します。これにより、2 つの色の間でシームレスなトランジションを作成できます。

背景の配置とアニメーション

最初に、背景を右に配置して、左端の色から始めます。ホバーすると、背景の位置が左に変更され、右端の色が表示されます。トランジションを段階的にするには、transition:all 2s easy; を追加します。 property.

コード例

<code class="css">div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}</code>

トランジションのカスタマイズ

トランジションの開始点と終了点を制御するには、線形グラデーションのパーセンテージを調整します。たとえば、要素の幅の 34% から 65% に移行する構成を次に示します。

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

この手法を実装すると、エレガントで人目を引くホバー効果を簡単に作成でき、ユーザー エクスペリエンスを向上させることができます。 Web アプリケーションを作成し、デザイン全体の視覚的な魅力を高めます。

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