Maison > Article > interface Web > Comment puis-je effectuer une transition de dégradés linéaires CSS sur un bouton ?
Transitions CSS avec dégradés linéaires
Un utilisateur rencontre des difficultés pour appliquer des transitions à l'arrière-plan d'un bouton, créé à l'aide d'un dégradé linéaire CSS . Leur code est le suivant :
<code class="css">a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956)); -webkit-transition: background 5s linear; } a.button:hover { -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37)) }</code>
Problème :La transition ne fonctionne pas sur le dégradé de fond du bouton.
Solution :
Malheureusement, les transitions CSS ne peuvent pas être appliquées directement aux dégradés linéaires. Par conséquent, une solution de contournement est nécessaire :
<code class="css">a.button { position: relative; z-index: 9; ... (rest of the CSS) background: linear-gradient(top, green, #a5c956); } .button-helper { position: absolute; z-index: -1; ... (rest of the CSS) background: linear-gradient(top, lime, #89af37); opacity: 0; -webkit-transition: opacity 1s linear; transition: opacity 1s linear; } a.button:hover .button-helper { opacity: 1; }</code>
<code class="html"><a href="#" class="button"> <span class="button-helper"></span> button </a></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!