Pourquoi ne puis-je pas effectuer directement la transition d'un dégradé linéaire CSS ?

Transition CSS avec dégradé linéaire

Question

Lorsque vous essayez d'implémenter une transition sur un bouton en utilisant un dégradé linéaire CSS comme arrière-plan, vous peut rencontrer des difficultés. Malgré vos efforts, la transition échoue. Vous vous renseignez sur les erreurs potentielles dans votre code et recherchez des solutions.

Réponse

Malheureusement, les transitions directes de dégradés en CSS ne sont actuellement pas prises en charge.

Pour surmonter cette limitation, un Une alternative pratique consiste à introduire un élément supplémentaire pour restituer le dégradé souhaité et à lui appliquer des transitions d'opacité :

<code class="css">a.button {
  position: relative;
  z-index: 9;
  /* ... Additional style properties ... */
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  z-index: -1;
  /* ... Additional style properties ... */
  background: linear-gradient(top, lime, #89af37);
  opacity: 0;
  transition: opacity 1s linear;
}

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

HTML :

<code class="html"><a href="#" class="button">
  <span class="button-helper"></span>
  button
</a></code>

Dans cette approche, l'élément .button-helper fournit le dégradé et modifie en douceur son opacité, obtenant l'effet souhaité.

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!