Generator de margini cu gradient animat CSS

Un chenar curcubeu rotativ pare simplu până când încercați să construiți unul în CSS: animarea unui unghi în interiorul conic-gradient() cu o proprietate personalizată simplă nu face nimic util, deoarece browserul nu are idee că valoarea este un unghi și nu poate interpola între 0deg și 360deg - doar sare. Acest generator folosește corecția reală, CSS Properties and Values ​​API: `@property --border-angle { sintaxă: '<angle>'; valoarea inițială: 0deg; moștenește: fals; }` spune browserului exact ce fel de valoare deține proprietatea personalizată, care este ceea ce deblochează interpolarea lină, prietenoasă cu GPU-ul printr-o regulă @keyframes.

Inelul în sine este un pseudo-element ::înainte de dimensiuni mai mari decât caseta (inserat cu minus lățimea chenarului) cu fundalul setat la `conic-gradient(from var(--border-angle), ...)` care se întoarce la prima culoare, astfel încât măturarea nu are cusătură vizibilă. O mască face apoi munca reală de modelare: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` păstrează doar diferența în formă de inel dintre padding-box și content-box, eliminând dreptunghiul cu gradient solid peste tot în altă parte. Vechiul `-webkit-mask-composite: xor` din Safari efectuează operația identică și se livrează împreună cu proprietatea standard, astfel încât efectul este redat în mod constant, mai degrabă decât să eșueze în tăcere pe un motor.

Suportul pentru raza chenarului nu este un lucru înșurubat deasupra — „raza chenarului: moștenire” al pseudo-elementului înseamnă că orice rază pe care o formați în cutie este transportată automat pe inel, astfel încât un buton în formă de pastilă sau un card rotunjit primește o margine strălucitoare rotunjită în loc de margini drepte care ies din colțurile curbe. Testați-l live: trageți glisorul de rază dintr-un dreptunghi ascuțit la o pastilă plină și urmăriți cum inelul urmărește forma la fiecare pas, care este detaliul care separă o implementare reală a acestei tehnici de o captură de ecran falsă.

Orice altceva de pe pagină se mapează direct pe codul generat: glisorul de lățime este grosimea inelului și inserția/padding-ul pseudo-elementului, glisorul de durată este durata de animație @keyframes, comutatorul de direcție doar răstoarnă semnul unghiului de sfârșit al cadrului cheie (+360 de grade sau -360 de grade), iar în interiorul fiecărei culori se blochează gradientul separat. suna. Întregul lucru rulează în browserul dvs. fără imagini, fără buclă de animație bazată pe JavaScript și fără servicii externe - copiați blocul CSS și se învârte în continuare oriunde îl inserați.