Comment créer une transition de couleur d'arrière-plan coulissante en douceur avec CSS ?

Création d'une transition de diapositive de couleur d'arrière-plan animée

Question :

Comment puis-je utiliser les transitions CSS pour faire glisser en douceur le couleur de fond d'un élément au survol, donnant l'effet de faire défiler la couleur depuis le bas de l'écran. élément ?

Réponse :

Les transitions traditionnelles pour changer la couleur d'arrière-plan ne prennent en charge que les effets de fondu. Pour créer un effet glissant, une approche alternative est nécessaire. Une solution consiste à utiliser une image d'arrière-plan ou un dégradé et à ajuster progressivement sa position :

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

Dans cet exemple :

• L'élément .box est défini avec un dégradé linéaire qui crée une séparation horizontale rouge et noire.
• En définissant la position initiale de l'arrière-plan sur 0 -100 %, le dégradé est masqué entièrement.
• Au survol, la position de l'arrière-plan est animée à 0 0, révélant progressivement le dégradé à partir du bas.

Cette technique fournit un effet de glissement fluide pour le changement de couleur d'arrière-plan. . Il convient de noter que cette approche fonctionne bien si vous souhaitez un dégradé ou une image d'arrière-plan spécifique, permettant une plus grande personnalisation que la transition de fondu standard.

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!