Generator animiranega gradientnega roba CSS

Vrtljiva mavrična obroba je videti preprosta, dokler je dejansko ne poskusite zgraditi v CSS: animiranje kota znotraj conic-gradient() z navadno lastnostjo po meri ne naredi nič uporabnega, ker brskalnik nima pojma, da je vrednost kot, in ne more interpolirati med 0deg in 360deg - samo skoči. Ta generator uporablja pravi popravek, API za lastnosti in vrednosti CSS: `@property --border-angle { sintaksa: '<angle>'; začetna vrednost: 0deg; deduje: false; }` brskalniku natančno pove, kakšno vrednost ima lastnost po meri, kar odklene gladko, GPE-ju prijazno interpolacijo v pravilu @keyframes.

Obroč sam je psevdoelement ::before, ki je večji od polja (vstavljen za minus širino obrobe) z ozadjem, nastavljenim na `conic-gradient(from var(--border-angle), ...)`, ki se vrne nazaj na prvo barvo, tako da zamah nima vidnega šiva. Maska nato opravi pravo oblikovanje: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` ohrani samo razliko v obliki obroča med poljem za oblazinjenje in poljem vsebine, povsod drugod pa zavrže pravokotnik s polnim prelivom. Safarijev starejši `-webkit-mask-composite: xor` izvaja enako operacijo in se pošilja skupaj s standardno lastnostjo, tako da se učinek upodablja dosledno, namesto da tiho odpove na enem motorju.

Podpora za radij obrobe ni naknadna misel, pritrjena na vrh — `border-radius: inherit` psevdoelementa pomeni, da se ne glede na radij, ki ga vnesete v polje, samodejno prenese na obroč, tako da gumb v obliki tabletke ali zaobljena kartica dobi zaobljeno svetlečo obrobo namesto ravnih robov, ki izhajajo iz ukrivljenih vogalov. Preizkusite v živo: povlecite drsnik polmera z ostrega pravokotnika na polno pilulo in opazujte, kako obroč sledi obliki na vsakem koraku, kar je detajl, ki loči pravo izvedbo te tehnike od lažnega posnetka zaslona.

Vse ostalo na strani se preslika neposredno na ustvarjeno kodo: drsnik za širino je debelina obroča in vložek/oblazinjenje psevdoelementa, drsnik za trajanje je @keyframes animation-duration, stikalo za smer samo obrne znak končnega kota ključne sličice (+360 stopinj ali -360 stopinj), vsaka barvna postaja pa je z vejicami ločen vnos znotraj klic conic-gradient(). Celotna stvar deluje v vašem brskalniku brez slik, brez animacijske zanke, ki jo poganja JavaScript, in brez zunanjih storitev – kopirajte blok CSS in vrti se naprej, kamor koli ga prilepite.