Rumah  >  Artikel  >  hujung hadapan web  >  Peralihan CSS dengan Kecerunan Linear: Mengapa Kecerunan Saya Tidak Beralih?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-31 10:13:01846semak imbas

 CSS Transition with Linear Gradient: Why Does My Gradient Not Transition?

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!

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