CSS Animerad Gradient Border Generator

En roterande regnbågskant ser enkel ut tills du faktiskt försöker bygga en i CSS: att animera en vinkel inuti conic-gradient() med en vanlig anpassad egenskap gör inget användbart, eftersom webbläsaren inte har någon aning om att värdet är en vinkel och kan inte interpolera mellan 0deg och 360deg - den hoppar bara. Den här generatorn använder den verkliga fixen, CSS Properties and Values ​​API: `@property --border-angle { syntax: '<vinkel>'; initial-värde: 0deg; ärver: falskt; }` talar om för webbläsaren exakt vilken typ av värde den anpassade egenskapen har, vilket är det som låser upp smidig, GPU-vänlig interpolation över en @keyframes-regel.

Själva ringen är ett ::before pseudo-element som är större än rutan (insatt med minus kantbredden) med bakgrunden inställd på `conic-gradient(from var(--border-angle), ...)` som går tillbaka till den första färgen så att svepet inte har någon synlig söm. En mask utför sedan det verkliga formningsarbetet: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` behåller endast den ringformade skillnaden mellan padding-boxen och content-boxen, och kasserar den solida gradientrektangeln överallt. Safaris äldre `-webkit-mask-composite: xor` utför identisk operation och skickas tillsammans med standardegenskapen, så effekten återges konsekvent snarare än att misslyckas tyst på en motor.

Border-radie-stöd är inte en eftertanke fastskruvad på toppen - pseudoelementets `border-radius: inherit` betyder att vilken radie du än slår in i lådan förs in på ringen automatiskt, så en pillerformad knapp eller ett rundat kort får en rundad glödande kant istället för att raka kanter blöder ut ur böjda hörn. Testa det live: dra radiereglaget från en skarp rektangel till ett helt piller och se ringen följa formen vid varje steg, vilket är detaljen som skiljer en verklig implementering av denna teknik från en falsk skärmdump.

Allt annat på sidan mappas direkt till den genererade koden: breddreglaget är ringens tjocklek och pseudoelementets insättning/utfyllnad, varaktighetsreglaget är @keyframes animation-duration, riktningsomkopplaren vänder bara tecknet på nyckelbildrutans slutvinkel (+360deg eller -360deg är en och 360 graders stopp i varje färg), conic-gradient()-anrop. Det hela körs i din webbläsare utan bilder, ingen JavaScript-driven animationsslinga och inga externa tjänster – kopiera CSS-blocket och det fortsätter att snurra var du än klistrar in det.