CSS を使用してホバー時に背景色のスライド式変更を作成するにはどうすればよいですか?

スライド アニメーションによる背景色の変換

CSS トランジションを介してホバー時に要素の背景の色相を変更しようとすると、次の課題に直面します。上向きのスクロール効果を実現します。現在の CSS コードでは背景がフェードアウトしますが、滑らかなスライド アニメーションが必要です。

1 つのアプローチは、背景画像またはグラデーションを利用し、背景の位置を注意深く調整することです。この手法を使用すると、背景を下からスライドさせることができます。

次の例を考えてみましょう:

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

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

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

この手法では、最初は背景の上半分が赤、黒が表示されます。下半分にあります。ホバーすると背景が上にスライドし、要素の高さ全体に赤色がスムーズに移行します。

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