CSS を使用してホバー時にスライドする背景色のアニメーションを作成するにはどうすればよいですか?

スライド背景カラー アニメーション

CSS トランジションを使用して、ホバー時のスライド背景カラー アニメーションを作成する際に課題が発生しました。フェード効果を実現できますが、背景を下から上にスクロールさせたいと考えています。

解決策: 背景画像を使用する

スライドを実現するにはつまり、CSS トランジションだけでは十分ではありません。代わりに、グラデーションなどの背景画像を作成し、時間の経過とともにその位置を調整する必要があります。その方法は次のとおりです:

コード例:

.box {
    width: 200px; 
    height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

HTMLマークアップ:

<div class="box"></div>

説明:

• .box クラスは、サイズ、グラデーション イメージ、遷移期間などの背景プロパティを定義します。 .
• ホバーすると、background-position プロパティが -100% に調整され、グラデーションが発生します。画像を上にスライドさせて、下部の赤い色を表示します。
• グラデーション画像を使用すると、一方の端からもう一方の端までスムーズに色の遷移が発生します。

代替案アプローチ:

グラデーション イメージのアプローチはうまく機能しますが、目的の背景と目的の要素を個別に作成することも検討できます。 CSS トランジションを使用して上にスクロールします。ただし、この方法には追加のマークアップと複雑さが伴う場合があります。

以上がCSS を使用してホバー時にスライドする背景色のアニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。