Penjana Latar Belakang Kecerunan Animasi CSS

Cipta latar belakang kecerunan animasi secara dalam talian, menyokong pelbagai warna, arah animasi dan pratetap, jana kod CSS dengan satu klik

Laporan pepijat

Mod pelaksanaan pelayar: Data anda diproses dalam penyemak imbas dan tidak dimuat naik ke pelayan.

Kelajuan dan kestabilan: Kelajuan pemprosesan bergantung pada peranti dan pelayar anda. Untuk kerja kelompok besar, versi desktop mungkin lebih stabil.

Memuatkan alat, sila tunggu...

Jika alat dalam talian tidak dapat dimuatkan atau dijalankan, cuba alat desktop. https://tools.yikeaigc.com/

Penggunaan Alat

Kembali ke versi lama

Pilih skema warna, laras animasi, kemudian salin atau muat turun kod. Pratetap boleh digunakan terus sebagai contoh, atau terus ubah warna, hentian, arah, kelajuan dan tujuan output. Semua pratonton, penjanaan dan simpanan tetapan dibuat di halaman ini.

Pratonton langsung CSS Keyframes Teks / Sempadan / Latar Tetapan boleh disimpan

Bilangan warna-

Kaedah animasi-

Tempoh-

Tujuan output-

Tetapan warna

Lebih cepat bermula dengan contoh. Hentian warna mempengaruhi rentak peralihan gradien; disyorkan kekalkan 2-6 warna.

Contoh pelan Klik akan menggantikan warna semasa

Asas gradien Linear sesuai untuk latar web, jejari untuk efek sorotan, kon untuk sempadan atau lencana

Jenis kecerunan

Sudut gradien135°

135°

Pusat jejari / kon

Hentian warna Perlu kekalkan 2 warna, boleh tetapkan hingga 8 warna

Parameter animasi

Disyorkan kelajuan aliran lebih perlahan sebagai latar halaman. Jika perlu kurangkan gerakan, hidupkan kod serasi kurangkan gerakan.

Kaedah animasi Pilih logik jana Keyframes berbeza

Arah gerakan Akan menjejaskan keyframe background-position

Kelajuan & gelung Lebih besar saiz latar, lebih jelas gerakan warna

Tempoh animasi10s

10s

Saiz latar400%

400%

Lengkung animasi

Gelung tanpa had Main ulang-alik Jeda bila hover Serasi kurangkan gerakan

Jana eksport

Selepas menetapkan nama kelas dan senario, salin CSS ke fail gaya projek, kemudian tambah nama kelas pada elemen sasaran.

Tetapan aplikasi Skema warna sama boleh menjana kesan latar, teks atau sempadan

Nama kelas CSS

Tujuan output

Had min tinggi bekas (px)

Bucu bulat(px)

Lebar sempadan (px)

Latar dalaman sempadan

Kod CSS dijana

Contoh HTML

Pratonton langsung

Animated Gradient Laraskan warna, arah dan kelajuan; kesan dikemas kini serta-merta. Sesuai untuk hero laman, kawasan butang, latar halaman kempen dan kad visual. CSS Ready

Jenis kecerunan-

Arah-

Saiz-

Nama kelas-

Arahan

Arahan Penggunaan Perisian

Pilih skema warna: Klik skema contoh dalam “Tetapan Warna”, atau tambah, padam, laraskan warna dan titik henti secara manual.
Tetapkan jenis gradien: Pilih gradien linear, radial atau kon, dan laraskan sudut serta kedudukan pusat mengikut keperluan.
Konfigurasikan parameter animasi: Tetapkan cara aliran, arah pergerakan, tempoh, saiz latar belakang, lengkung animasi dan cara gelung dalam “Parameter Animasi”.
Pilih kegunaan output: Pilih bekas latar belakang, teks gradien atau sempadan gradien dalam “Jana Eksport”, dan tetapkan parameter seperti nama kelas CSS, bucu bulat dan sempadan.
Pratonton kesan: Di sebelah kanan, anda boleh menukar mod pratonton latar belakang, kad, teks dan sempadan. Jana kod selepas mengesahkan kesannya.
Salin atau muat turun kod: Klik “Salin CSS”, “Salin HTML” atau “Muat Turun CSS” untuk menggunakan kod pada elemen halaman.
Simpan tetapan: Klik “Simpan Tetapan” untuk mengekalkan parameter semasa supaya mudah diteruskan pada pengeditan seterusnya.

Soalan Lazim

J: Salin kod CSS ke dalam fail gaya, kemudian tambahkan nama kelas dalam HTML contoh pada elemen yang perlu memaparkan gradien.

J: Gradien linear sesuai untuk latar belakang halaman dan sepanduk; gradien radial sesuai untuk kesan sorotan dan sebaran lembut; gradien kon sesuai untuk sempadan, lencana dan visual dengan rasa putaran.

J: Anda boleh membesarkan saiz latar belakang, menambah bilangan warna, melaraskan titik henti warna, atau memilih cara animasi seperti aliran pepenjuru dan aliran pernafasan.

J: Boleh. Pilih “Teks Gradien” dalam kegunaan output, dan alat ini akan menjana kod CSS yang mengandungi background-clip:text.

Jawapan: Latar belakang halaman biasa boleh digunakan seperti biasa. Jika terdapat banyak animasi pada halaman, disarankan untuk memanjangkan tempoh animasi, mengurangkan bilangan warna, dan mengaktifkan kod keserasian untuk mengurangkan kesan dinamik.