Peralihan CSS dengan Kecerunan Linear: Mengapa Kecerunan Saya Tidak Beralih?

Peralihan CSS dengan Kecerunan Linear: Kesalahan Berpotensi

Apabila cuba menambah peralihan pada butang dengan latar belakang kecerunan linear CSS, ia mungkin menunjukkan kekurangan kesan yang tidak dijangka. Percanggahan ini berpunca daripada had semasa dalam peralihan kecerunan.

Daripada cuba mengalihkan kecerunan secara langsung, penyelesaian melibatkan memperkenalkan elemen tambahan:

<code class="css">a.button {
  background: linear-gradient(top, green, #a5c956);
}

.button-helper {
  position: absolute;
  background: linear-gradient(top, lime, #89af37);
  transition: opacity 1s linear;
}

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

Elemen pembantu ini mempunyai linearnya sendiri kecerunan dan kelegapan yang disesuaikan. Peralihan akan menogol kelegapan antara 0 dan 1 pada tuding, mewujudkan ilusi peralihan kecerunan.

Atas ialah kandungan terperinci Peralihan CSS dengan Kecerunan Linear: Mengapa Kecerunan Saya Tidak Beralih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!