Penjana Sempadan Kecerunan Animasi CSS

Sempadan pelangi berputar kelihatan mudah sehingga anda benar-benar cuba membinanya dalam CSS: menganimasikan sudut di dalam conic-gradient() dengan sifat tersuai biasa tidak melakukan apa-apa yang berguna, kerana pelayar tidak tahu nilainya adalah sudut dan tidak boleh menginterpolasi antara 0deg dan 360deg — ia hanya melompat. Penjana ini menggunakan pembetulan sebenar, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` memberitahu pelayar dengan tepat jenis nilai yang dipegang oleh sifat tersuai, yang membuka kunci interpolasi licin mesra GPU merentas peraturan @keyframes.

Gelang itu sendiri adalah unsur pseudo ::before yang bersaiz lebih besar daripada kotak (sisip tolak lebar sempadan) dengan latar belakangnya ditetapkan kepada `conic-gradient(from var(--border-angle), ...)` yang bergelung kembali ke warna pertama supaya sapuan tidak mempunyai sambungan yang kelihatan. Mask kemudian melakukan kerja pembentukan sebenar: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` menyimpan hanya perbezaan berbentuk gelang antara padding-box dan content-box, membuang segi empat tepat kecerunan pepejal di tempat lain. `-webkit-mask-composite: xor` Safari yang lebih lama melakukan operasi yang sama dan dihantar bersama sifat piawai, jadi kesannya dipaparkan secara konsisten dan bukannya gagal secara senyap pada satu enjin.

Sokongan border-radius bukanlah tambahan selepas difikirkan yang ditampal di atas — `border-radius: inherit` unsur pseudo bermaksud apa jua jejari yang anda dail ke dalam kotak akan dibawa ke gelang secara automatik, jadi butang berbentuk pil atau kad bulat mendapat sempadan bercahaya bulat dan bukannya tepi lurus yang berdarah keluar dari penjuru melengkung. Uji secara langsung: seret gelangsar jejari dari segi empat tepat tajam ke pil penuh dan lihat gelang mengikut bentuk pada setiap langkah, iaitu perincian yang membezakan pelaksanaan sebenar teknik ini daripada tangkapan skrin palsu.

Semua yang lain pada halaman memetakan terus kepada kod yang dijana: gelangsar lebar adalah ketebalan gelang dan sisip/padding unsur pseudo, gelangsar tempoh adalah @keyframes animation-duration, suis arah hanya membalikkan tanda sudut akhir kerangka utama (+360deg atau -360deg), dan setiap hentian warna adalah entri yang dipisahkan koma di dalam panggilan conic-gradient(). Keseluruhan perkara berjalan dalam pelayar anda tanpa imej, tanpa gelung animasi dipacu JavaScript dan tanpa perkhidmatan luaran — salin blok CSS dan ia terus berputar di mana-mana sahaja anda menampalnya.