CSS-Generator für animierte Verlaufsränder

Ein rotierender Regenbogenrahmen sieht einfach aus, bis Sie tatsächlich versuchen, einen in CSS zu erstellen: Das Animieren eines Winkels innerhalb von conic-gradient() mit einer einfachen benutzerdefinierten Eigenschaft hat keinen Sinn, da der Browser keine Ahnung hat, dass es sich bei dem Wert um einen Winkel handelt, und nicht zwischen 0 Grad und 360 Grad interpolieren kann – er springt nur. Dieser Generator verwendet die eigentliche Lösung, die CSS Properties and Values ​​API: `@property --border-angle { syntax: '<angle>'; Anfangswert: 0deg; erbt: false; }` teilt dem Browser genau mit, welche Art von Wert die benutzerdefinierte Eigenschaft enthält, was eine reibungslose, GPU-freundliche Interpolation über eine @keyframes-Regel ermöglicht.

Der Ring selbst ist ein ::before-Pseudoelement, das größer ist als die Box (Einschub minus der Rahmenbreite), dessen Hintergrund auf „conic-gradient(from var(--border-angle), ...)“ eingestellt ist und zur ersten Farbe zurückschleift, sodass der Sweep keine sichtbare Naht aufweist. Eine Maske erledigt dann die eigentliche Formungsarbeit: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;` behält nur den ringförmigen Unterschied zwischen der Füllbox und der Inhaltsbox bei und verwirft das durchgezogene Farbverlaufsrechteck überall sonst. Safaris älteres „-webkit-mask-composite: xor“ führt den identischen Vorgang aus und wird zusammen mit der Standardeigenschaft ausgeliefert, sodass der Effekt konsistent gerendert wird und nicht stillschweigend auf einer Engine fehlschlägt.

Die Unterstützung des Randradius ist kein nachträglich aufgeschraubter Einfall – das „border-radius: inherit“ des Pseudoelements bedeutet, dass der Radius, den Sie in das Feld eingeben, automatisch auf den Ring übertragen wird, sodass ein pillenförmiger Knopf oder eine abgerundete Karte einen abgerundeten, leuchtenden Rand erhält, anstatt gerade Kanten, die aus gebogenen Ecken hervorgehen. Testen Sie es live: Ziehen Sie den Radius-Schieberegler von einem scharfen Rechteck zu einer vollen Pille und beobachten Sie, wie der Ring bei jedem Schritt der Form folgt. Dies ist das Detail, das eine echte Implementierung dieser Technik von einem gefälschten Screenshot unterscheidet.

Alles andere auf der Seite wird direkt dem generierten Code zugeordnet: Der Breitenschieberegler gibt die Dicke des Rings und den Einschub/Abstand des Pseudoelements an, der Dauerschieberegler ist die @keyframes-Animationsdauer, der Richtungsschalter dreht lediglich das Vorzeichen des Endwinkels des Keyframes um (+360 Grad oder -360 Grad) und jeder Farbstopp ist ein durch Kommas getrennter Eintrag innerhalb des conic-gradient()-Aufrufs. Das Ganze läuft in Ihrem Browser ohne Bilder, ohne JavaScript-gesteuerte Animationsschleife und ohne externe Dienste – kopieren Sie den CSS-Block und er dreht sich überall dort weiter, wo Sie ihn einfügen.