Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Saya Boleh Mengalihkan Kecerunan Linear CSS pada Butang?

Bagaimanakah Saya Boleh Mengalihkan Kecerunan Linear CSS pada Butang?

Barbara Streisand
Barbara Streisandasal
2024-10-31 01:33:29811semak imbas

How Can I Transition CSS Linear Gradients on a Button?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn