Bagaimana untuk Mencapai Peralihan Gradien Lancar pada Butang Hover dalam CSS?

Peralihan CSS dengan Kecerunan Linear

Isu:
Menggabungkan peralihan kepada butang dengan latar belakang kecerunan linear menggunakan CSS membuktikan mencabar.

Latar Belakang:

a.butang {
latar belakang: -webkit-gradient(linear, kiri atas, kiri bawah , hentian warna(0%, @hijau), hentian warna(100%, #a5c956));
-webkit-transition: latar belakang 5s linear;
}

a.button:hover {
-webkit-gradient(linear, kiri atas, kiri bawah, warna -berhenti(0%, @greenhover), hentian warna(100%, #89af37))
}

Penyelesaian:

Malangnya, sokongan penyemak imbas untuk peralihan kecerunan masih tiada. Oleh itu, penyelesaian berikut menyediakan penyelesaian:

<br>a.butang {<br> kedudukan: relatif;<br> z-index: 9;<br> paparan: inline-block ;<br> pelapik: 0 10px;<br> latar belakang: -webkit-gradient(linear, 0 0, 0 100%, daripada(hijau), kepada(#a5c956));<br> latar belakang: -webkit-linear-gradient(atas, hijau, #a5c956);<br> latar belakang: -moz-linear-gradient(atas, hijau, #a5c956);<br> latar belakang: -o-linear-gradient(atas, hijau, #a5c956);<br> latar belakang: kecerunan linear(atas, hijau, #a5c956);<br>}</p>
<p>.pembantu butang {<br> kedudukan: mutlak;<br> indeks z: -1;<br> atas : 0;<br> kiri: 0;<br> lebar: 100%;<br> tinggi: 100%;<br> kelegapan: 0;<br> latar belakang: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));<br> background: -webkit-linear -kecerunan(atas, kapur, #89af37);<br> latar belakang: -moz-linear-gradient(atas, kapur, #89af37);<br> latar belakang: -o-linear-gradient(atas, kapur, #89af37);<br> latar belakang: linear-gradient(atas, kapur, #89af37);<br> -webkit-transition: kelegapan 1s linear;<br> -moz-transition: kelegapan 1s linear;<br> -o-transition: kelegapan 1s linear;<br> peralihan: kelegapan 1s linear;<br>}</p>
<p>a.button:hover .button-helper {<br> kelegapan: 1;<br>}<br>

button

Kaedah ini menggunakan elemen tambahan dengan kecerunan yang dikehendaki dan mengalihkan kelegapannya, membenarkan rupa perubahan warna yang licin pada tuding.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Peralihan Gradien Lancar pada Butang Hover dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!