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

CSS-i animeeritud gradiendi piiride generaator

Looge sujuvalt pöörlev vikerkaare gradiendi ääris, mis austab õigesti piiri raadiust, koostatud @property, koonusegradiendi ja maskikomposiidiga – kopeerige tõeline CSS ja vaadake selle keerlemist otseülekandes.

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

Tulemus

Pöörlev vikerkaarepiir näeb lihtne välja seni, kuni proovite seda CSS-is luua: nurga animeerimine conic-gradient() sees tavalise kohandatud atribuudiga ei too midagi kasulikku, sest brauseril pole aimugi, et väärtus on nurk ja ei saa interpoleerida 0° ja 360° vahel – see lihtsalt hüppab. See generaator kasutab tegelikku parandust, CSS Properties and Values ​​API: `@property --border-angle { süntaks: '<nurk>'; algväärtus: 0deg; pärib: vale; }` ütleb brauserile täpselt, millist väärtust kohandatud atribuut sisaldab, mis avab sujuva, GPU-sõbraliku interpolatsiooni @keyframes reeglis.

Rõngas ise on ::befor pseudoelement, mille suurus on suurem kui kast (sisestatud miinus äärise laius), mille taustaks on seatud `conic-gradient(from var(--border-angle), ...)`, mis liigub tagasi esimese värvini, nii et pühkmel pole nähtavat õmblust. Seejärel teeb mask tegelikku kujundamistööd: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-komposiit: välistab;` säilitab ainult rõngakujulise erinevuse polsterduskasti ja sisukasti vahel, jättes kõrvale tahke gradiendi ristküliku kõikjal mujal. Safari vanem '-webkit-mask-composite: xor' teostab identset toimingut ja edastatakse koos standardse omadusega, nii et efekt kuvatakse järjekindlalt, mitte vaikselt ühel mootoril.

Piiriraadiuse tugi ei ole järelmõte, mis on külge kinnitatud – pseudoelemendi "piiriraadius: pärimine" tähendab, et mis tahes raadius, mille kasti valite, kantakse automaatselt rõngasse, nii et pillikujuline nupp või ümar kaart saab kumeratest nurkadest välja voolavate sirgete asemel ümardatud helendava äärise. Testige seda otseülekandes: lohistage raadiuse liugur teravalt ristkülikult täispille ja vaadake, kuidas rõngas järgib igal sammul kuju, mis on detail, mis eraldab selle tehnika tegeliku teostuse võltsitud ekraanipildist.

Kõik muu lehel vastandub otse loodud koodile: laiuse liugur on rõnga paksus ja pseudoelemendi sisestus/täidis, kestuse liugur on @keyframes animatsiooni kestus, suunalüliti pöörab lihtsalt võtmekaadri lõpu nurga märgi (+360 kraadi või -360 kraadi) ja iga värvipeatus on konkreetne sissekanne-dient the(seicparated). Kogu asi töötab teie brauseris ilma piltide, JavaScripti juhitud animatsioonitsükli ja väliste teenusteta – kopeerige CSS-plokk ja see pöörleb edasi, kuhu iganes selle kleepite.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Äärise laiuse, äärise raadiuse ja pöörlemise kestuse liugurid ning päripäeva/vastupäeva lüliti, mis kõik värskendavad otseülekannet koheselt.
  • Värvipeatusredaktor 2–5 gradiendivärvi jaoks – lisage, eemaldage või valige uuesti mis tahes peatus ja koonusegradient värskendab iga muudatuse korral.
  • Kopeeritav CSS-i plokk koos täieliku @atribuudi registreerimisega, ::enne helina reeglitega ja @keyframes pööramisega, valmis kleepimiseks nii nagu on.

Peamised eelised

✓ Pööramine on tõeliselt sujuv, kuna nurk on registreeritud @property tõelise <angle> kohandatud atribuudina – ilma selle registreerimiseta ei saa brauserid animeerida nurka, mida kasutatakse conic-gradient() sees ja see lihtsalt klõpsab pöörlemise asemel.
✓ Piiriraadiust arvestatakse automaatselt: rõnga pseudoelement pärib kasti raadiuse, nii et ümardatud kaart saab nurkadest välja paistva ristkülikukujulise asemel ümara helendava äärise.
✓ Täpne CSS, mille eelvaadet näete, on täpselt see CSS, mille kopeerite – sama genereeritud plokk juhib reaalajas pöörlevat kasti ja täidab kopeerimispaneeli, kaasa arvatud @property/@keyframes/mask reeglid.
✓ Nii moodne mask-komposiit: välista süntaks kui ka Safari -webkit-mask-composite: xor backback tarnitakse koos, nii et ääris renderdatakse praegustes brauserites õigesti.

Kasutusjuhtumid

  • • Mähi hinnakaart või CTA-nupp pilkupüüdvasse keerlevasse vikerkaarepiirkonda ilma ühegi kujutiseta või JS-animatsioonisilmuseta – vaid kopeeritud CSS-i plokk.
  • • Valige äärise raadiuse liugur kuni pilu kujuni ja veenduge, et helendav rõngas järgib ideaalselt kõverat, mitte aga naiivsete teostuste tekitatud ristkülikukujuliste nurkade artefaktide asemel.
  • • Vähendage kestust 8–10 sekundini ja valige kaks brändivärvi, et saada esiletõstetud kaardi ümber peen ja professionaalne esiletõst, mitte valju vikerkaareefekti.