⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS Animert Gradient Border Generator

Generer en jevnt roterende regnbuegradientkant som korrekt respekterer kantradius, bygget med @property, conic-gradient og mask-composite – kopier den ekte CSS, se den snurre live.

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

Resultat

En roterende regnbuegrense ser enkel ut til du faktisk prøver å bygge en i CSS: animering av en vinkel inne i conic-gradient() med en vanlig egendefinert egenskap gjør ingenting nyttig, fordi nettleseren ikke aner at verdien er en vinkel og kan ikke interpolere mellom 0deg og 360deg - den hopper bare. Denne generatoren bruker den virkelige rettelsen, CSS Properties and Values ​​API: `@property --border-angle { syntaks: '<angle>'; initial-verdi: 0deg; arver: falsk; }` forteller nettleseren nøyaktig hva slags verdi den egendefinerte egenskapen har, som er det som låser opp jevn, GPU-vennlig interpolasjon over en @keyframes-regel.

Selve ringen er et ::before pseudo-element som er større enn boksen (innsatt med minus kantbredden) med bakgrunnen satt til `conic-gradient(from var(--border-angle), ...)` som går tilbake til den første fargen slik at sveipen ikke har noen synlig søm. En maske gjør så det virkelige formingsarbeidet: `maske: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` beholder bare den ringformede forskjellen mellom polstringsboksen og innholdsboksen, og forkaster det solide gradientrektangelet alle andre steder. Safaris eldre `-webkit-mask-composite: xor` utfører den samme operasjonen og sendes sammen med standardegenskapen, slik at effekten gjengis konsekvent i stedet for å svikte stille på én motor.

Border-radius-støtte er ikke en ettertanke boltet på toppen - pseudo-elementets `border-radius: herit` betyr at den radiusen du slår inn i boksen, bæres inn på ringen automatisk, så en pilleformet knapp eller et avrundet kort får en avrundet glødende kant i stedet for rette kanter som blør ut av buede hjørner. Test det live: dra radiusglideren fra et skarpt rektangel til en hel pille og se ringen følge formen ved hvert trinn, som er detaljen som skiller en reell implementering av denne teknikken fra et falskt skjermbilde.

Alt annet på siden tilordnes direkte til den genererte koden: breddeglidebryteren er ringens tykkelse og pseudoelementets innfelt/polstring, varighetsglidebryteren er @keyframes animasjon-varighet, retningsbryteren snur bare tegnet på nøkkelbildens endevinkel (+360deg eller -360deg i hver farge er en og 360 graders stopp), conic-gradient() kall. Det hele kjører i nettleseren din uten bilder, ingen JavaScript-drevet animasjonssløyfe og ingen eksterne tjenester – kopier CSS-blokken og den fortsetter å snurre hvor enn du limer den inn.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Skyveknapper for kantbredde, kantradius og rotasjonsvarighet pluss en retningsbryter med klokken/mot klokken, som alle oppdaterer live forhåndsvisningen umiddelbart.
  • Et fargestoppredigeringsprogram for 2 til 5 gradientfarger – legg til, fjern eller repigér et hvilket som helst stopp, og konisk gradient-sveip oppdateres ved hver endring.
  • Kopierbar CSS-blokk med den fullstendige @property-registreringen, ::before-ring-reglene og @keyframes-rotasjonen, klar til å lime inn som den er.

Viktige fordeler

✓ Rotasjonen er virkelig jevn fordi vinkelen er registrert som en ekte <angle> egendefinert egenskap med @property — uten den registreringen kan ikke nettlesere animere en vinkel som brukes inne i conic-gradient(), og den klikker bare i stedet for å snurre.
✓ Border-radius respekteres automatisk: ring-pseudo-elementet arver boksens radius, så et avrundet kort får en avrundet glødende kant i stedet for en rektangulær som stikker ut av hjørnene.
✓ Den eksakte CSS-en du forhåndsviser er den nøyaktige CSS-en du kopierer – den samme genererte blokken driver den levende spinnende boksen og fyller kopipanelet, inkludert @property/@keyframes/mask-regler.
✓ Både den moderne mask-composite: ekskluder syntaks og Safaris -webkit-mask-composite: xor fallback sendes sammen, slik at kantlinjen gjengis riktig på tvers av gjeldende nettlesere.

Brukssaker

  • • Pakk inn et priskort eller CTA-knapp i en iøynefallende, spinnende regnbuekant uten et enkelt bilde eller JS-animasjonsløkke – bare den kopierte CSS-blokken.
  • • Slå grense-radius-glidebryteren opp til en pilleform og bekreft at den glødende ringen følger kurven perfekt, i stedet for de rektangulære hjørneartefaktene som naive implementeringer produserer.
  • • Senk varigheten ned til 8-10 sekunder og velg to merkefarger for et subtilt, profesjonelt høydepunkt rundt et fremhevet kort i stedet for en kraftig regnbueeffekt.