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

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

このシナリオでは、要素に線形グラデーションの背景画像が与えられ、目的の垂直遷移が作成されます。要素の上にマウスを置くと、背景の位置が上に移動し、背景が下から上にスライドする効果が生じます。

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