CSS animovaný generátor okrajov prechodov

Otočný dúhový okraj vyzerá jednoducho, kým sa ho skutočne nepokúsite vytvoriť v CSS: animácia uhla vo vnútri conic-gradient() s obyčajnou vlastnou vlastnosťou neprináša nič užitočné, pretože prehliadač netuší, že hodnota je uhol a nemôže interpolovať medzi 0° a 360° – jednoducho skáče. Tento generátor používa skutočnú opravu, rozhranie CSS Properties and Values ​​API: `@property --border-angle { syntax: '<uhol>'; počiatočná hodnota: 0 stupňov; dedí: nepravé; }` presne povie prehliadaču, akú hodnotu má vlastná vlastnosť, čo odomkne hladkú interpoláciu vhodnú pre GPU cez pravidlo @keyframes.

Samotný prsteň je ::pred pseudoprvkom s veľkosťou väčšou ako rámček (vložený mínus šírka okraja) s pozadím nastaveným na `conic-gradient(from var(--border-angle), ...)` v slučke späť na prvú farbu, takže zametanie nemá žiadny viditeľný šev. Maska potom vykoná skutočnú tvarovaciu prácu: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maska-kompozit: vylúčiť;` zachová len rozdiel v tvare prstenca medzi výplňovým rámčekom a rámčekom obsahu, pričom všade inde zahodí plný obdĺžnik s prechodom. Starší súbor `-webkit-mask-composite: xor` od Safari vykonáva rovnakú operáciu a dodáva sa spolu so štandardnou vlastnosťou, takže efekt sa vykresľuje konzistentne a nie ticho zlyháva na jednom engine.

Podpora polomeru okraja nie je dodatočne priskrutkovaná navrch – „polomer okraja: zdediť“ pseudoprvku znamená, že akýkoľvek polomer, ktorý vytočíte do poľa, sa automaticky prenesie na prstenec, takže tlačidlo v tvare pilulky alebo zaoblená karta dostane zaoblený žiarivý okraj namiesto rovných hrán vyčnievajúcich zo zakrivených rohov. Otestujte si to naživo: presuňte posúvač polomeru z ostrého obdĺžnika na plnú pilulku a sledujte, ako prsteň sleduje tvar na každom kroku, čo je detail, ktorý oddeľuje skutočnú implementáciu tejto techniky od falošnej snímky obrazovky.

Všetko ostatné na stránke sa namapuje priamo na vygenerovaný kód: posúvač šírky predstavuje hrúbku prsteňa a vloženie/výplň pseudoprvku, posúvač trvania je dĺžka animácie @keyframes, prepínač smeru len preklopí znamienko koncového uhla kľúčovej snímky (+360 stupňov alebo -360 stupňov) a každá zarážka farby je vstupný znak vo vnútri znaku čiarka-oddelený. Celá vec beží vo vašom prehliadači bez obrázkov, bez animačnej slučky riadenej JavaScriptom a bez externých služieb – skopírujte blok CSS a bude sa točiť, kamkoľvek ho vložíte.