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

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

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

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

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

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

コード例

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

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

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

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

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