Transition CSS avec dégradé linéaire : pourquoi mon dégradé ne fait-il pas de transition ?

Transition CSS avec dégradé linéaire : un piège potentiel

Lorsque vous essayez d'ajouter une transition à un bouton avec un arrière-plan dégradé linéaire CSS, il peut présenter un manque d’effet inattendu. Cet écart provient de la limitation actuelle dans la transition des dégradés.

Au lieu d'essayer de faire la transition directement du dégradé, une solution de contournement consiste à introduire un élément supplémentaire :

<code class="css">a.button {
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  background: linear-gradient(top, lime, #89af37);
  transition: opacity 1s linear;
}

a.button:hover .button-helper {
  opacity: 1;
}</code>

Cet élément d'assistance possède son propre élément linéaire. dégradé et opacité adaptée. La transition fera basculer l'opacité entre 0 et 1 au survol, créant l'illusion d'une transition dégradée.

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!