Penjana Sempadan Gradien Animasi CSS

Sempadan pelangi berputar kelihatan mudah sehingga anda benar-benar cuba membina satu dalam CSS: menganimasikan sudut di dalam conic-gradient() dengan sifat tersuai biasa tidak berguna, kerana penyemak imbas tidak tahu nilai itu adalah sudut dan tidak boleh interpolasi antara 0deg dan 360deg — ia hanya melompat. Penjana ini menggunakan pembetulan sebenar, CSS Properties and Values ​​API: `@property --border-angle { syntax: '<angle>'; nilai awal: 0deg; mewarisi: palsu; }` memberitahu penyemak imbas dengan tepat jenis nilai yang dimiliki oleh harta tersuai, yang membuka kunci interpolasi yang lancar dan mesra GPU merentas peraturan @keyframes.

Cincin itu sendiri ialah ::before pseudo-element bersaiz lebih besar daripada kotak (disisipkan dengan tolak lebar sempadan) dengan latar belakangnya ditetapkan kepada `conic-gradient(from var(--border-angle), ...)` bergelung kembali ke warna pertama supaya sapuan tidak mempunyai jahitan yang kelihatan. Topeng kemudian melakukan kerja membentuk sebenar: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` hanya menyimpan perbezaan berbentuk cincin antara kotak padding dan kotak kandungan, 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 standard, jadi kesannya menunjukkan secara konsisten dan bukannya gagal secara senyap pada satu enjin.

Sokongan jejari sempadan bukanlah sesuatu yang difikirkan semula di atas — unsur pseudo `jejari sempadan: warisi` bermaksud apa sahaja jejari yang anda dail ke dalam kotak dibawa ke gelang secara automatik, jadi butang berbentuk pil atau kad bulat mendapat sempadan bercahaya bulat dan bukannya tepi lurus berdarah daripada sudut melengkung. Ujinya secara langsung: seret peluncur jejari dari segi empat tepat tajam ke pil penuh dan lihat cincin mengikut bentuk pada setiap langkah, iaitu perincian yang memisahkan pelaksanaan sebenar teknik ini daripada tangkapan skrin palsu.

Segala-galanya pada halaman memetakan terus ke kod yang dijana: peluncur lebar ialah ketebalan gelang dan sisipan/padding elemen pseudo, peluncur tempoh ialah tempoh animasi @keyframes, suis arah hanya membalikkan tanda sudut hujung bingkai utama (+360deg atau -360deg), dan setiap hentian kongradasi warna ialah satu hentian warna. Semuanya berjalan dalam penyemak imbas anda tanpa imej, tiada gelung animasi dipacu JavaScript dan tiada perkhidmatan luaran — salin blok CSS dan ia terus berputar di mana-mana sahaja anda menampalnya.