Comment créer une transition de couleur d'arrière-plan coulissante depuis le bas avec CSS ?

Comment faire la transition de la couleur d'arrière-plan à partir du bas

Lorsque vous essayez de changer la couleur d'arrière-plan d'un élément au survol à l'aide de transitions CSS, un peut rencontrer le problème de l'arrière-plan qui s'estompe plutôt que de glisser vers le haut. Bien qu'il soit possible d'obtenir l'effet de fondu à l'aide du code fourni, une approche différente est nécessaire pour obtenir l'animation de glissement souhaitée.

Une solution consiste à utiliser une image d'arrière-plan ou un dégradé et à ajuster progressivement la position de l'arrière-plan. Cette méthode crée l'illusion de l'arrière-plan glissant vers le haut :

.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>

Dans ce scénario, l'élément reçoit une image d'arrière-plan avec un dégradé linéaire, créant la transition verticale souhaitée. Lorsque l'élément est survolé, la position de l'arrière-plan est décalée vers le haut, produisant l'effet d'un arrière-plan glissant vers le haut depuis le bas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!