CSS トランジションはホバー時に上にスライドする背景色を作成できますか?

CSS トランジションを使用してホバー時に背景色をスライドアップする方法

質問:

を使用してホバー時に要素の背景色をスライドアップできますかCSS トランジション?

背景を使用した可能な解決策画像:

背景色をスライドアップするには、次の設定で背景画像またはグラデーションを使用することを検討してください:

.element {
    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;
}

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

このアプローチには、1 つの色から徐々に色が薄くなる背景画像を設定することが含まれます。別の。次に、background-position プロパティを調整して、ホバー時に画像を上にスライドさせ、目的の背景色の遷移を表示します。

別のスライド要素を使用した代替ソリューション:

別の方法として、別の要素を作成することもできます。目的の背景色に変更し、JavaScript を使用してカーソルを上にスライドさせます。ただし、一般に、ターゲット要素に背景画像を直接使用する方が、パフォーマンスとシンプルさの点でより効率的なソリューションであると考えられています。

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