CSS animirani gradijentni generator obruba

Rotirajući dugin obrub izgleda jednostavno dok ga zapravo ne pokušate izgraditi u CSS-u: animiranje kuta unutar conic-gradient() s običnim prilagođenim svojstvom ne čini ništa korisno, jer preglednik nema pojma da je vrijednost kut i ne može interpolirati između 0deg i 360deg — samo skače. Ovaj generator koristi pravi popravak, CSS Properties and Values ​​API: `@property --border-angle { sintaksa: '<kut>'; početna-vrijednost: 0deg; nasljeđuje: lažno; }` govori pregledniku točno kakvu vrijednost ima prilagođeno svojstvo, što je ono što otključava glatku interpolaciju prilagođenu GPU-u kroz pravilo @keyframes.

Sam prsten je pseudoelement ::before veličine veće od okvira (umetnut za minus širinu obruba) s pozadinom postavljenom na `conic-gradient(from var(--border-angle), ...)` koja se vraća na prvu boju tako da potez nema vidljiv šav. Maska zatim obavlja pravi posao oblikovanja: `mask: linearni gradijent(#000 0 0) content-box, linearni gradijent(#000 0 0); mask-composite: exclude;` zadržava samo razliku u obliku prstena između padding-box-a i content-box-a, odbacujući puni gradijentni pravokutnik svugdje drugdje. Safarijev stariji `-webkit-mask-composite: xor` izvodi identičnu operaciju i isporučuje se zajedno sa standardnim svojstvom, tako da se efekt renderira dosljedno, umjesto da tiho otkaže na jednom motoru.

Podrška za rubni radijus nije naknadna misao pričvršćena na vrhu — `border-radius: inherit` pseudoelementa znači da se bilo koji radijus koji unesete u okvir automatski prenosi na prsten, tako da gumb u obliku tablete ili zaobljena kartica dobivaju zaobljeni svijetleći rub umjesto ravnih rubova koji izlaze iz zakrivljenih kutova. Testirajte uživo: povucite klizač radijusa od oštrog pravokutnika do pune pilule i gledajte kako prsten prati oblik na svakom koraku, što je detalj koji odvaja stvarnu implementaciju ove tehnike od lažne snimke zaslona.

Sve ostalo na stranici preslikava se izravno na generirani kod: klizač širine je debljina prstena i umetak/ispuna pseudoelementa, klizač trajanja je @keyframes animation-duration, prekidač smjera samo okreće predznak krajnjeg kuta ključnog kadra (+360 stupnjeva ili -360 stupnjeva), a svaki graničnik boje je unos odvojen zarezom unutar conic-gradient() poziv. Cijela stvar radi u vašem pregledniku bez slika, bez petlje animacije vođene JavaScriptom i bez vanjskih usluga — kopirajte CSS blok i on se vrti gdje god ga zalijepite.