⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator Perbatasan Gradien Animasi CSS

Hasilkan batas gradien pelangi yang berputar mulus dan mengikuti radius batas dengan benar, dibuat dengan @property, conic-gradient, dan mask-composite — salin CSS asli, saksikan berputar secara langsung.

4px
20px
3s
Memproses... 0%

Hasil

Perbatasan pelangi yang berputar terlihat sederhana sampai Anda benar-benar mencoba membuatnya di CSS: menganimasikan sudut di dalam conic-gradient() dengan properti khusus biasa tidak ada gunanya, karena browser tidak tahu bahwa nilainya adalah sudut dan tidak dapat melakukan interpolasi antara 0deg dan 360deg — ia hanya melompat. Generator ini menggunakan perbaikan sebenarnya, CSS Properties and Values ​​API: `@property --border-angle { sintaks: '<angle>'; nilai awal: 0deg; mewarisi: salah; }` memberi tahu browser jenis nilai apa yang dimiliki properti khusus, yang akan menghasilkan interpolasi yang lancar dan ramah GPU di seluruh aturan @keyframes.

Cincin itu sendiri adalah elemen semu ::sebelum yang berukuran lebih besar dari kotak (dimasukkan dikurangi lebar tepi) dengan latar belakangnya disetel ke `conic-gradient(from var(--border-angle), ...)` yang mengulang kembali ke warna pertama sehingga sapuan tidak memiliki jahitan yang terlihat. Mask kemudian melakukan pekerjaan pembentukan sebenarnya: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: kecualikan;` hanya menyimpan perbedaan berbentuk cincin antara kotak padding dan kotak konten, membuang persegi panjang gradien padat di tempat lain. `-webkit-mask-composite: xor` Safari yang lebih lama melakukan operasi yang sama dan dikirimkan bersama properti standar, sehingga efeknya dirender secara konsisten daripada gagal secara diam-diam di satu mesin.

Dukungan radius batas bukanlah sebuah renungan yang dicantumkan di atas — `radius-batas: warisan` dari elemen semu berarti berapa pun radius yang Anda masukkan ke dalam kotak akan dibawa ke dalam ring secara otomatis, sehingga tombol berbentuk pil atau kartu bundar akan mendapatkan batas yang membulat dan bersinar, bukan tepi lurus yang keluar dari sudut melengkung. Uji langsung: seret penggeser radius dari persegi panjang tajam ke pil penuh dan lihat cincin mengikuti bentuk di setiap langkah, yang merupakan detail yang memisahkan penerapan nyata teknik ini dari tangkapan layar palsu.

Segala sesuatu yang lain di halaman dipetakan langsung ke kode yang dihasilkan: penggeser lebar adalah ketebalan cincin dan inset/padding elemen semu, penggeser durasi adalah durasi animasi @keyframes, tombol arah hanya membalik tanda sudut akhir bingkai utama (+360 derajat atau -360 derajat), dan setiap perhentian warna adalah entri yang dipisahkan koma di dalam panggilan conic-gradient(). Semuanya berjalan di browser Anda tanpa gambar, tanpa loop animasi berbasis JavaScript, dan tanpa layanan eksternal — salin blok CSS dan blok tersebut terus berputar di mana pun Anda menempelkannya.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Penggeser lebar batas, radius batas, dan durasi rotasi ditambah tombol arah searah jarum jam/berlawanan arah jarum jam, semuanya memperbarui pratinjau langsung secara instan.
  • Editor penghentian warna untuk 2 hingga 5 warna gradien — menambah, menghapus, atau memilih ulang penghentian apa pun dan sapuan gradien berbentuk kerucut diperbarui pada setiap perubahan.
  • Blok CSS yang dapat disalin dengan registrasi @property lengkap, aturan dering ::before, dan rotasi @keyframes, siap ditempel apa adanya.

Manfaat Utama

✓ Rotasinya benar-benar mulus karena sudutnya didaftarkan sebagai properti khusus <angle> asli dengan @property — tanpa registrasi tersebut, browser tidak dapat menganimasikan sudut yang digunakan di dalam conic-gradient() dan sudut tersebut hanya patah dan tidak berputar.
✓ Jari-jari batas dipatuhi secara otomatis: elemen semu cincin mewarisi jari-jari kotak, sehingga kartu yang berbentuk bulat mendapatkan garis tepi yang membulat dan bercahaya, bukan yang berbentuk persegi panjang yang menyembul dari sudut.
✓ CSS persis yang Anda pratinjau adalah CSS persis yang Anda salin — blok yang dihasilkan sama menggerakkan kotak pemintalan langsung dan mengisi panel penyalinan, termasuk aturan @property/@keyframes/mask.
✓ Baik sintaksis mask-composite: kecualikan modern maupun fallback -webkit-mask-composite: xor Safari dikirimkan bersama-sama, sehingga batas ditampilkan dengan benar di seluruh browser saat ini.

Kasus Penggunaan

  • • Bungkus kartu harga atau tombol CTA dalam bingkai pelangi berputar yang menarik tanpa satu gambar pun atau loop animasi JS — hanya blok CSS yang disalin.
  • • Putar penggeser radius batas ke bentuk pil dan pastikan cincin bercahaya mengikuti kurva dengan sempurna, alih-alih artefak sudut persegi panjang yang dihasilkan oleh implementasi naif.
  • • Perlambat durasinya menjadi 8-10 detik dan pilih dua warna merek untuk mendapatkan sorotan yang halus dan profesional di sekitar kartu unggulan, bukan efek pelangi yang mencolok.