CSS を使用して背景色のスムーズなスライド遷移を作成する方法

アニメーション背景カラー スライド トランジションの作成

質問:

CSS トランジションを使用して、スライド トランジションをスムーズに上にスライドさせるにはどうすればよいですか?ホバー時の要素の背景色。下から色をスクロールする効果を与えます。要素?

答え:

背景色を変更する従来のトランジションでは、フェード効果のみがサポートされています。スライド効果を作成するには、別のアプローチが必要です。 1 つの方法は、背景画像またはグラデーションを利用して、その位置を徐々に調整することです:

.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%;
}

この例では:

• .box 要素は、次のような線形グラデーションで定義されています。水平方向の赤と黒の分割。
• 初期背景位置を 0 ～ 100% に設定すると、グラデーションが非表示になります。
• ホバーすると、背景の位置が 0 0 にアニメーション化され、下から徐々にグラデーションが表示されます。

このテクニックは、背景色の変更にスムーズなスライド効果を提供します。 。このアプローチは、特定の背景のグラデーションや画像が必要な場合にうまく機能し、標準のフェーディング トランジションよりもカスタマイズできることは注目に値します。

以上がCSS を使用して背景色のスムーズなスライド遷移を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。