Generator Garis Tepi Gradasi Animasi CSS

Garis tepi pelangi berputar tampak sederhana sampai Anda benar-benar mencoba membuatnya di CSS: menganimasikan sudut di dalam conic-gradient() dengan properti kustom biasa tidak menghasilkan apa-apa, karena browser tidak tahu bahwa nilai itu adalah sudut dan tidak bisa menginterpolasi antara 0deg dan 360deg — ia hanya melompat. Generator ini menggunakan solusi yang sebenarnya, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` memberi tahu browser persis jenis nilai yang dipegang properti kustom, yang membuka interpolasi mulus dan ramah GPU melalui aturan @keyframes.

Cincinnya sendiri adalah pseudo-element ::before yang berukuran lebih besar dari kotak (diinset sebesar minus lebar garis tepi) dengan latar belakang diatur ke `conic-gradient(from var(--border-angle), ...)` kembali ke warna pertama sehingga sapuan tidak memiliki jahitan yang terlihat. Sebuah mask kemudian melakukan pembentukan sesungguhnya: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` hanya menyisakan perbedaan berbentuk cincin antara padding-box dan content-box, membuang persegi gradasi padat di tempat lain. -webkit-mask-composite: xor milik Safari versi lama melakukan operasi yang identik dan disertakan bersama properti standar, sehingga efeknya dirender secara konsisten alih-alih gagal diam-diam di satu mesin.

Dukungan border-radius bukan tambahan yang ditempelkan di atas — `border-radius: inherit` pada pseudo-element berarti radius apa pun yang Anda berikan ke kotak akan otomatis dibawa ke cincin, sehingga tombol berbentuk pil atau kartu melengkung mendapat garis tepi bercahaya yang melengkung, bukan ujung lurus yang keluar dari sudut lengkung. Uji langsung: geser pengatur radius dari persegi tajam ke bentuk pil penuh dan lihat cincin mengikuti bentuk di setiap langkah, detail yang membedakan implementasi nyata teknik ini dari tangkapan layar palsu.

Segala sesuatu di halaman ini dipetakan langsung ke kode yang dihasilkan: penggeser lebar adalah ketebalan cincin dan inset/padding pseudo-element, penggeser durasi adalah animation-duration @keyframes, saklar arah hanya membalik tanda sudut akhir keyframe (+360deg atau -360deg), dan setiap titik warna adalah entri yang dipisahkan koma di dalam pemanggilan conic-gradient(). Seluruhnya berjalan di browser Anda tanpa gambar, tanpa loop animasi berbasis JavaScript, dan tanpa layanan eksternal — salin blok CSS-nya dan ia akan terus berputar di mana pun Anda menempelkannya.