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

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

DDD
Libérer: 2024-11-27 00:04:11
original
588 Les gens l'ont consulté

How Can I Create a Sliding Background Color Change on Hover with 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%;
}
Copier après la connexion
<div class="box"></div>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal