⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS-animeeritud gradiendiga äärise generaator

Loo sujuvalt pöörlev vikerkaarevärviline gradientäär, mis arvestab korrektselt ääreraadiust, kasutades @property, conic-gradient ja mask-composite tehnikaid – kopeeri päris CSS ja vaata seda reaalajas pöörlemas.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

4px
20px
3s
Töötlen... 0%

Tulemus

Pöörlev vikerkaareääris tundub lihtne, kuni proovid seda CSS-is ehitada: nurga animeerimine conic-gradient() sees tavalise kohandatud atribuudiga ei tee midagi kasulikku, sest brauseril pole aimugi, et väärtus on nurk, ega suuda interpoleerida 0kraadi ja 360kraadi vahel – lihtsalt hüppab. See generaator kasutab tegelikku lahendust, CSS Properties and Values API-t: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` ütleb brauserile täpselt, mis tüüpi väärtust kohandatud atribuut hoiab, ning see avabki sujuva, GPU-sõbraliku interpoleerimise @keyframes reegli kaudu.

Rõngas ise on ::before pseudo-element, mille suurus on kastist suurem (taandega miinus äärise laius) ning mille taustaks on seatud `conic-gradient(from var(--border-angle), ...)`, mis tsüklib tagasi esimese värvini, nii et pühkimisel pole nähtavat õmblust. Seejärel teeb mask tegeliku kujuandmise töö: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` hoiab alles ainult rõngakujulise erinevuse padding-box-i ja content-box-i vahel, eemaldades ühtlase gradiendi ristküliku igal pool mujal. Safari vanem `-webkit-mask-composite: xor` teostab identse operatsiooni ja on standardomaduse kõrval kaasas, nii et efekt renderdub järjepidevalt, mitte ei jäta ühel mootoril hääletult vahele.

Ääreraadiuse tugi pole peale poogitud järelmõte – pseudo-elemendi `border-radius: inherit` tähendab, et ükskõik millise raadiuse sa kastile valid, kandub see automaatselt rõngale üle, nii et tabletikujuline nupp või ümar kaart saab ümara särava äärise, mitte sirgeid servi, mis kumeratest nurkadest välja veritseksid. Testi seda otse-eetris: lohista raadiuseliugurit teravast ristkülikust täieliku tabletini ja jälgi, kuidas rõngas igal sammul kuju järgib – see on detail, mis eraldab selle tehnika tegelikku teostust võltsitud kuvatõmmisest.

Kõik muu lehel vastendub otse loodud koodile: laiuseliugur on rõnga paksus ja pseudo-elemendi taane/polsterdus, kiiruseliugur on @keyframes animatsiooni kestus, suunalüliti lihtsalt muudab võtmeadra lõppnurga märki (+360kraadi või -360kraadi) ning iga värvipunkt on komaga eraldatud kirje conic-gradient() kutse sees. Kogu kupatus jookseb sinu brauseris ilma piltide, JavaScriptil põhineva animatsioonitsükli ja väliste teenusteta – kopeeri CSS-plokk ja see jätkab pöörlemist igal pool, kuhu selle kleebid.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Äärise laiuse, ääreraadiuse ja pöörlemiskiiruse liugurid ning päripäeva/vastupäeva lüliti – kõik need uuendavad reaalajas eelvaadet silmapilkselt.
  • Värvipunkti redaktor 2 kuni 5 gradiendivärvi jaoks – lisa, eemalda või vali uuesti ükskõik milline punkt ning conic-gradient-i üleminek uueneb iga muudatusega.
  • Kopeeritav CSS-plokk koos täieliku @property registreeringu, ::before rõnga reeglite ja @keyframes pöörlemisega – valmis kleepimiseks sellisel kujul nagu on.

Peamised eelised

✓ Pöörlemine on tõeliselt sujuv, sest nurk on registreeritud päris <angle> tüüpi kohandatud atribuudina @property abil – ilma selle registreeringuta ei suuda brauserid animeerida nurka, mida kasutatakse conic-gradient() sees, ja see lihtsalt hüppab sujuva pöörlemise asemel.
✓ Ääreraadiust arvestatakse automaatselt: pseudo-element rõngas pärib kasti raadiuse, nii et ümar kaart saab ümara särava äärise, mitte ristkülikukujulise äärise, mis nurkadest välja torkab.
✓ Täpselt see CSS, mida eelvaates näed, ongi täpselt see CSS, mille kopeerid – sama loodud plokk juhib nii reaalajas pöörlevat kasti kui täidab kopeerimispaneeli, sealhulgas @property/@keyframes/mask reeglid.
✓ Nii tänapäevane mask-composite: exclude süntaks kui ka Safari -webkit-mask-composite: xor varuvariant tarnitakse koos, nii et ääris renderdub korrektselt kõigis uuemates brauserites.

Kasutusjuhud

  • • Tõmba hinnakaardile või tegevusnupule pilkupüüdev pöörlev vikerkaarevärviline ääris ilma ühegi pildi või JS-i animatsioonitsüklita — lihtsalt kopeeri CSS-i plokk.
  • • Keera äärise raadiuse liugur tabletikujuliseks ja vaata, kuidas helendav ring järgib kõverat täpselt, mitte ei tekita ristkülikukujulisi nurgaartefakte nagu naiivsed lahendused.
  • • Aeglusta kestus 8–10 sekundini ja vali kaks brändivärvi, et saada esiletõstetud kaardi ümber peen ja professionaalne esiletoomine, mitte karjuv vikerkaareefekt.