Bagaimanakah Saya Boleh Menghidupkan Kesan Kilauan Kecerunan Radial dalam CSS dari Kiri ke Kanan?

Menghidupkan Kecerunan Radial dengan CSS

Masalah:

Anda ingin mencipta jejari- kesan "bersinar" kecerunan pada div dan jadikan serlahan putih bergerak dengan lancar dari kiri ke betul.

Penyelesaian:

1. Saiz Gradien Berganda dan 50% Hentian Warna:

   Buat kecerunan jejari yang dua kali ganda saiz div. Tetapkan hentian warna pada separuh nilai asalnya (cth., 4% bukannya 8%, dsb.). Ini memastikan penampilan visual kekal sama.

2. Kedudukan Kecerunan Animasikan:

   Gunakan animasi bingkai utama untuk memanipulasi sifat kedudukan latar belakang. Bermula dengan kedudukan kecerunan di sebelah kanan atas, hidupkan ia ke kiri atas. Dengan menetapkan animasi kepada silih berganti, ia akan berbalik arah.

Contoh Kod:

#shine-div {
  height: 30vh;
  width: 60vw;
  margin: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top,
    #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%,
    #800080 31.25%, #b300b3 50%) top right/200% 200%;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position: top left;
  }
}

Nota: Disebabkan pengiraan sudut terjauh, kecerunan mungkin tidak kelihatan sama seperti definisi asal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Kesan Kilauan Kecerunan Radial dalam CSS dari Kiri ke Kanan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!