Comment puis-je créer un changement de couleur d'arrière-plan coulissant au survol avec CSS ?

Transformation de la couleur d'arrière-plan avec une animation coulissante

En cherchant à modifier la teinte d'arrière-plan d'un élément lors du survol via des transitions CSS, vous faites face au défi de obtenir un effet de défilement vers le haut. Le code CSS actuel atténue l'arrière-plan, mais vous désirez une animation de diapositive fluide.

Une approche consiste à exploiter une image d'arrière-plan ou un dégradé et à ajuster méticuleusement la position de l'arrière-plan. Cette technique vous permet de faire glisser l'arrière-plan depuis le bas.

Considérons l'exemple suivant :

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

Avec cette approche, l'arrière-plan affiche initialement du rouge dans la moitié supérieure et du noir dans la moitié inférieure. Au survol, l'arrière-plan glisse vers le haut, faisant passer en douceur la couleur rouge à toute la hauteur de l'élément.

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!