Comment créer un remplissage de couleur d'arrière-plan de gauche à droite avec des effets de survol CSS ?

Création d'un remplissage de couleur d'arrière-plan de gauche à droite avec CSS

En CSS3, les effets de survol peuvent être améliorés à l'aide de transitions pour créer des effets visuels dynamiques . Un scénario courant consiste à remplir l'arrière-plan d'un élément de gauche à droite avec une couleur différente lors du survol. Pour y parvenir :

Étape 1 : Utilisez un dégradé linéaire

Utilisez un dégradé linéaire pour établir la transition de couleur d'arrière-plan. Définissez deux couleurs avec une division claire à 50 % (par exemple, rouge avant 50 %, bleu après 50 %).

Étape 2 : mettre à l'échelle et positionner le dégradé

Redimensionnez l'arrière-plan pour qu'il soit égal à deux fois la largeur de l'élément et à 100 % de sa hauteur (par exemple, background-size : 200 % 100 % ;). Positionnez le dégradé à droite de l'élément.

Étape 3 : Créez la transition de survol

En survol, modifiez la position de l'arrière-plan à « gauche ». Associez cela à une transition (par exemple, transition : tous les 2 sont facilités ;) pour animer le changement de position.

Exemple de code :

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

/* On hover */
background-position: left;</code>

Améliorations facultatives :

Pour contrôler la couleur de la transition, augmentez la largeur de l'arrière-plan à 300 % et affinez les pourcentages de début et de fin du dégradé (par exemple, 34 % pour le début, 65 % pour la fin).

Prise en charge des navigateurs :

Envisagez de préfixer la propriété de transition pour une compatibilité entre navigateurs.

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!