Comment créer un remplissage de couleur d'arrière-plan de gauche à droite en survol à l'aide de CSS ?

Obtention d'un remplissage de couleur d'arrière-plan de gauche à droite au survol à l'aide de CSS

Pour obtenir un remplissage de couleur d'arrière-plan de gauche à droite au survol sur un élément, utilisez un dégradé et une transition linéaires. Commencez par configurer un dégradé linéaire avec deux couleurs, par exemple rouge et bleu, à 50 %. Ensuite, définissez le dégradé pour qu'il soit positionné à droite et doublez la taille de l'élément, par rapport à sa largeur et sa hauteur (par exemple, 200%).

Lorsque l'élément est survolé, modifiez la position de l'arrière-plan pour "gauche". Incorporer « transition : tous les 2 sont faciles ; » pour appliquer une transition en douceur.

Pour les navigateurs qui nécessitent des préfixes de fournisseur, consultez les commentaires sous la question initiale.

Personnalisation supplémentaire

Pour créer un transition de couleur, augmentez la largeur du dégradé à 300 % et ajustez les positions de début (par exemple, 34 %) et de fin (par exemple, 65 %) en conséquence.

Exemple :

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>

HTML :

<code class="html"><div>Hover me</div></code>

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!