Bagaimanakah Saya Boleh Mengalihkan Kecerunan Linear CSS pada Butang?

Peralihan CSS dengan Kecerunan Linear

Seorang pengguna menghadapi kesukaran untuk menggunakan peralihan pada latar belakang butang, yang dicipta menggunakan kecerunan linear CSS . Kod mereka adalah seperti berikut:

<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>

Masalah: Peralihan tidak berfungsi pada kecerunan latar belakang butang.

Penyelesaian:

Malangnya, peralihan CSS tidak boleh digunakan terus pada kecerunan linear. Oleh itu, penyelesaian adalah perlu:

1. Buat elemen tambahan dengan kecerunan yang diingini.
2. Letakkan elemen di belakang butang (menggunakan indeks z negatif) dan tutup kawasan yang sama.
3. Tetapkan kelegapan awal elemen kecerunan kepada 0.
4. Gunakan peralihan CSS pada sifat kelegapan untuk pudar secara beransur-ansur dalam elemen kecerunan pada tuding.

<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>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalihkan Kecerunan Linear CSS pada Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!