Bagaimana untuk Mencipta Kesan Kilauan Gradien Radial Animasi dengan CSS?

Cara Menghidupkan Kesan Kilauan Kecerunan dengan CSS

Soalan:

Pengguna berusaha untuk cipta kesan kilauan kecerunan jejari animasi untuk kotak div, serupa dengan sorotan yang bergerak dari kiri ke betul. Walau bagaimanapun, mereka tidak menemui sebarang sumber yang memberikan hasil yang diingini dan tidak pasti tentang pendekatan terbaik.

Jawapan:

Penyelesaian menggunakan manipulasi kecerunan dan teknik animasi untuk mencapai kesan yang diingini. Prinsip teras adalah untuk menduplikasi kecerunan dan melaraskan nilai hentian warna sebanyak separuh untuk mengekalkan rupa visual kecerunan asal. Dengan seterusnya menghidupkan kedudukan kecerunan dari kiri ke kanan, kesan bersinar dicapai.

Pelaksanaan melibatkan langkah berikut:

1. Buat kecerunan jejari dengan warna dan kedudukan yang diingini, memastikan bahawa warna pertama menduduki 0% dan warna kedua menduduki 4%, seperti yang ditunjukkan dalam CSS kod:

background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;

2. Letakkan kecerunan menggunakan sifat kedudukan latar belakang. Secara lalai, kedudukan ditetapkan ke penjuru kanan sebelah atas.
3. Buat animasi menggunakan bingkai utama untuk mengalihkan kecerunan dari kiri ke kanan. Animasi to rule dalam colorChange menetapkan kedudukan akhir kecerunan, iaitu sudut kiri atas.

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

Dengan melaksanakan pendekatan ini, kesan kilauan kecerunan boleh dianimasikan untuk bergerak dengan lancar dari kiri ke kanan, mencipta serlahan yang diingini yang terpancar merentasi kotak div.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Kilauan Gradien Radial Animasi dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!