⭐ 0
🔍
Besedilo Slika PDF in dokumenti Avdio Glasba elektronika Čas Pripomočki Validatorji Ezoterika igre

Generator animiranega robnega preliva CSS

Ustvarite gladko vrteč se rob z mavričnim prelivom, ki pravilno upošteva robni radij, zgrajen z @property, conic-gradient in mask-composite – kopirajte pravi CSS in ga opazujte vrtenje v živo.

🔒 V celoti obdelano v vašem brskalniku – nič, kar tukaj vnesete, ni nikoli naloženo.

4px
20px
3s
Obdelava ... 0%

Rezultat

Vrteč se mavrični rob deluje preprosto, dokler ga ne poskusite zgraditi v CSS-ju: animiranje kota znotraj conic-gradient() z navadno lastnostjo po meri ne naredi ničesar uporabnega, ker brskalnik ne ve, da je vrednost kot, in ne more interpolirati med 0deg in 360deg – samo preskoči. Ta generator uporablja pravo rešitev, API lastnosti in vrednosti CSS: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` brskalniku natančno pove, kakšno vrsto vrednosti lastnost po meri hrani, kar omogoča gladko, grafično pospešeno interpolacijo prek pravila @keyframes.

Sam obroč je psevdoelement ::before, velikostno večji od okvira (zamik za minus širino roba) z ozadjem, nastavljenim na `conic-gradient(from var(--border-angle), ...)`, ki se zanka nazaj na prvo barvo, tako da preliv 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 padding-box in content-box, trdni pravokotnik preliva pa zavrže povsod drugje. Starejša Safarijeva `-webkit-mask-composite: xor` izvede enako operacijo in je zapisana skupaj s standardno lastnostjo, tako da se učinek dosledno upodablja, namesto da bi na enem pogonu tiho odpovedal.

Podpora robnemu radiju ni poznejši dodatek – `border-radius: inherit` na psevdoelementu pomeni, da se kakršen koli radij, ki ga nastavite na okviru, samodejno prenese na obroč, tako da gumb v obliki tablete ali zaobljena kartica dobi zaobljen svetleč rob in ne ravnih robov, ki štrlijo iz ukrivljenih vogalov. Preizkusite v živo: povlecite drsnik radija od ostrega pravokotnika do popolne tablete in opazujte, kako obroč sledi obliki na vsakem koraku – to je podrobnost, ki loči dejansko izvedbo te tehnike od ponarejenega posnetka zaslona.

Vse ostalo na strani se neposredno preslika v generirano kodo: drsnik širine je debelina obroča in zamik/odmik psevdoelementa, drsnik trajanja je trajanje animacije @keyframes, stikalo za smer samo obrne predznak končnega kota ključne sličice (+360deg ali -360deg), vsaka barvna postaja pa je z vejico ločen vnos znotraj klica conic-gradient(). Vse skupaj teče v vašem brskalniku brez slik, brez animacijske zanke, ki bi jo poganjal JavaScript, in brez zunanjih storitev – kopirajte blok CSS in vrtenje se nadaljuje, kamor koli ga prilepite.

Uživate v tem orodju? Se vam zdi izdelek uporaben? Vidite v njem potencial in ga želite podpreti?

🛡️
Izvaja se v brskalniku

Vaše datoteke in vnosi nikoli ne zapustijo te naprave. Obdelava poteka povsem brez povezave. 100-odstotno varno.

Sprejeti formati in pravila

  • Drsniki za širino roba, robni radij in trajanje vrtenja ter stikalo za smer (v smeri urinega kazalca/obratno), ki takoj posodobijo živi predogled.
  • Urejevalnik barvnih postaj za 2 do 5 barv preliva – dodajte, odstranite ali na novo izberite katero koli postajo in preliv conic-gradient se posodobi ob vsaki spremembi.
  • Blok CSS za kopiranje s celotno registracijo @property, pravili za obroč ::before in vrtenjem @keyframes, pripravljen za prilepitev brez sprememb.

Ključne prednosti

✓ Vrtenje je povsem gladko, ker je kot registriran kot prava lastnost po meri <angle> z uporabo @property – brez te registracije brskalniki ne morejo animirati kota, uporabljenega znotraj conic-gradient(), in namesto vrtenja pride do preskoka.
✓ Robni radij se upošteva samodejno: psevdoelement obroča podeduje radij okvira, tako da zaobljena kartica dobi zaobljen svetleč rob in ne pravokotnega, ki štrli iz vogalov.
✓ CSS, ki ga vidite v predogledu, je točno tisti CSS, ki ga kopirate – isti generirani blok poganja živo vrtenje okvirja in polni ploščo za kopiranje, vključno s pravili @property, @keyframes in mask.
✓ Sodobna sintaksa mask-composite: exclude in Safarijeva nadomestna -webkit-mask-composite: xor sta vključeni skupaj, tako da se rob pravilno izriše v vseh trenutnih brskalnikih.

Primeri uporabe

  • • Ovijte cenovno kartico ali gumb s pozivom k dejanju v privlačen vrteč mavrični rob brez ene same slike ali JS-animacijske zanke – samo skopirajte blok CSS.
  • • Pomaknite drsnik za zaokrožitev robov do oblike tablete in se prepričajte, da žareč obroč popolnoma sledi krivulji, namesto da bi ustvaril pravokotne artefakte v kotih, značilne za naivne izvedbe.
  • • Upočasnite trajanje na 8–10 s in izberite dve barvi blagovne znamke za subtilen, profesionalen poudarek okoli izpostavljene kartice, namesto glasnega mavričnega učinka.