CSS generator animiranog gradijentnog obruba
Generirajte glatko rotirajući dugin obrub koji ispravno poštuje border-radius, izgrađen s @property, conic-gradient i mask-composite — kopirajte pravi CSS, gledajte ga kako se vrti uživo.
🔒 U potpunosti se obrađuje u vašem pregledniku — ništa što ovdje unesete nikada se ne učitava.
Rezultat
Rotirajući dugin obrub izgleda jednostavno dok ga stvarno ne pokušate napraviti u CSS-u: animiranje kuta unutar conic-gradient() s običnom prilagođenom značajkom ne čini ništa korisno, jer preglednik ne zna da je vrijednost kut i ne može interpolirati između 0deg i 360deg — samo skoči. Ovaj generator koristi pravo rješenje, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` govori pregledniku točno kakvu vrstu vrijednosti prilagođena značajka sadrži, što omogućuje glatku, GPU-u prilagođenu interpolaciju kroz @keyframes pravilo.
Sam prsten je ::before pseudo-element dimenzioniran veći od okvira (uvučen za minus širinu obruba) s pozadinom postavljenom na `conic-gradient(from var(--border-angle), ...)` koja se vraća na prvu boju tako da prijelaz nema vidljivog šava. Maska zatim obavlja pravi posao oblikovanja: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` zadržava samo razliku u obliku prstena između padding-box i content-box, odbacujući čvrsti gradijentni pravokutnik svugdje drugdje. Safarijev stariji `-webkit-mask-composite: xor` izvodi identičnu operaciju i dolazi uz standardno svojstvo, tako da se efekt prikazuje dosljedno umjesto da tiho ne uspije na jednom pogonu.
Podrška za border-radius nije naknadno dodana zakrpa — `border-radius: inherit` na pseudo-elementu znači da se bilo koji radijus koji postavite na okvir automatski prenosi na prsten, tako da gumb u obliku pilule ili zaobljena kartica dobivaju zaobljeni svjetleći obrub umjesto ravnih rubova koji probijaju iz zakrivljenih uglova. Isprobajte to uživo: povucite klizač radijusa od oštrog pravokutnika do pune pilule i gledajte kako prsten prati oblik u svakom koraku, što je detalj koji razlikuje pravu implementaciju ove tehnike od lažne snimke zaslona.
Sve ostalo na stranici izravno se preslikava na generirani kod: klizač širine je debljina prstena i uvlaka/padding pseudo-elementa, klizač trajanja je @keyframes animation-duration, prekidač smjera jednostavno mijenja predznak krajnjeg kuta ključnog kadra (+360deg ili -360deg), a svaka zaustavna boja je unos odvojen zarezom unutar poziva conic-gradient(). Cijela stvar radi u vašem pregledniku bez slika, bez animacijske petlje pokretane JavaScriptom i bez vanjskih servisa — kopirajte CSS blok i on se nastavlja vrtjeti gdje god ga zalijepite.