Comment puis-je créer une animation de couleur d'arrière-plan coulissante en survol avec CSS ?

Animation de couleur d'arrière-plan coulissante

Vous avez rencontré un défi en créant une animation de couleur d'arrière-plan coulissante au survol à l'aide de transitions CSS. Bien que vous puissiez obtenir un effet de fondu, vous cherchez à faire défiler l'arrière-plan vers le haut.

Solution : Utiliser une image d'arrière-plan

Pour réaliser la diapositive effet, les transitions CSS seules ne suffisent pas. Au lieu de cela, vous devrez créer une image d'arrière-plan, telle qu'un dégradé, et ajuster sa position au fil du temps. Voici comment procéder :

Exemple de code :

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

Marquage HTML :

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

Explication :

• La classe .box définit les propriétés de l'arrière-plan, y compris la taille, l'image dégradée et la durée de la transition.
• Au survol, la propriété background-position est ajustée à -100 %, ce qui fait glisser l'image dégradée vers le haut, révélant la couleur rouge au niveau de l'arrière-plan. en bas.
• L'utilisation d'une image dégradée permet à la transition de couleur de se produire en douceur d'un bout à l'autre.

Alternative Approche :

Bien que l'approche de l'image dégradée fonctionne bien, vous pouvez également envisager de créer un élément séparé avec l'arrière-plan souhaité et d'utiliser des transitions CSS pour le faire défiler vers le haut. Cependant, cette méthode peut impliquer un balisage et une complexité supplémentaires.

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!