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

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

DDD
DDDoriginal
2024-11-01 11:23:13830parcourir

How to Create a Left-to-Right Background Color Fill on Hover Using 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!

Déclaration:
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