CSS-generator för animerad gradientkant

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 vet att värdet är en vinkel och inte kan interpolera mellan 0 deg och 360 deg — den hoppar bara. Denna generator använder den riktiga lösningen, CSS Properties and Values API: @property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; } talar om för webbläsaren exakt vilken typ av värde den anpassade egenskapen innehåller, vilket är det som möjliggör mjuk, GPU-vänlig interpolation över en @keyframes-regel.

Själva ringen är ett ::before-pseudoelement som är dimensionerat större än boxen (insatt med minus kanttjockleken) med dess bakgrund satt till `conic-gradient(from var(--border-angle), ...)` som loopar tillbaka till den första färgen så att svepet inte får någon synlig skarv. En mask gö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-box och content-box, och kastar bort den solida gradientrektangeln överallt annars. Safaris äldre `-webkit-mask-composite: xor` utför samma operation och levereras tillsammans med standardegenskapen, så effekten renderas konsekvent istället för att tyst misslyckas i en motor.

Stöd för border-radius är inte en efterkonstruktion som bultas på ovanpå — pseudoelementets `border-radius: inherit` innebär att vilken radie du än anger i boxen automatiskt överförs till ringen, så en pillerformad knapp eller ett rundat kort får en rundad glödande kant istället för raka kanter som blöder ut ur kurvade hörn. Testa det live: dra radiereglaget från en skarp rektangel till ett helt piller och se ringen följa formen i varje steg, vilket är den detalj som skiljer en riktig implementation av denna teknik från en fejkad skärmdump.

Allt annat på sidan mappas direkt till den genererade koden: tjockleksreglaget är ringens tjocklek och pseudoelementets inset/padding, varaktighetsreglaget är @keyframes animation-duration, riktningsomkopplaren vänder bara tecknet för nyckelbildens slutvinkel (+360deg eller -360deg), och varje färgstopp är ett kommaseparerat element inuti conic-gradient()-anropet. Hela saken körs i din webbläsare utan bilder, utan JavaScript-driven animationsloop och utan externa tjänster — kopiera CSS-blocket så fortsätter det snurra vart du än klistrar in det.