Generátor animovaného gradientového okraje v CSS
Vygenerujte si plynule se otáčející duhový gradientový okraj, který správně respektuje border-radius, postavený na @property, conic-gradient a mask-composite – zkopírujte si reálné CSS a sledujte, jak se točí naživo.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
Otáčející se duhový okraj vypadá jednoduše, dokud ho nezkusíte postavit v CSS: animování úhlu uvnitř conic-gradient() pomocí obyčejné vlastní vlastnosti nedělá nic užitečného, protože prohlížeč vůbec netuší, že hodnota je úhel, a nedokáže interpolovat mezi 0deg a 360deg – jenom přeskakuje. Tento generátor používá skutečné řešení, API pro vlastnosti a hodnoty CSS: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` prohlížeči přesně sděluje, jaký typ hodnoty vlastní vlastnost drží, což odemyká plynulou, grafickou kartou akcelerovanou interpolaci napříč pravidlem @keyframes.
Samotný prstenec je pseudo-element ::before nastavený větší než rámeček (odsazený zápornou šířkou okraje) s pozadím definovaným jako `conic-gradient(from var(--border-angle), ...)` zacykleným zpět k první barvě, takže barevný pruh nemá viditelný šev. Maska pak dělá hlavní tvarovací práci: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` ponechá pouze prstencový rozdíl mezi padding-box a content-box, všude jinde pevný gradientový obdélník zahodí. Starší `-webkit-mask-composite: xor` pro Safari provádí identickou operaci a je připojeno vedle standardní vlastnosti, takže efekt se vykresluje konzistentně, místo aby na jednom enginu tiše selhal.
Podpora border-radius není dodatečná nášivka – `border-radius: inherit` pseudo-elementu znamená, že jakýkoli poloměr nastavíte na rámeček, automaticky se přenese na prstenec, takže tlačítko ve tvaru pilulky nebo zaoblená karta dostanou zaoblený zářící okraj namísto rovných hran vykukujících zaoblenými rohy. Vyzkoušejte naživo: táhněte posuvníkem poloměru od ostrého obdélníku k plné pilulce a sledujte, jak prstenec kopíruje tvar při každém kroku, což je detail, který odlišuje opravdovou implementaci této techniky od falešného snímku obrazovky.
Vše ostatní na stránce se přímo mapuje na generovaný kód: posuvník šířky je tloušťka prstence a vnitřní odsazení pseudo-elementu, posuvník trvání je animation-duration v @keyframes, přepínač směru jenom přehodí znaménko cílového úhlu snímku (+360deg nebo -360deg) a každá barevná zastávka je položka oddělená čárkou uvnitř volání conic-gradient(). Celý proces běží ve vašem prohlížeči bez obrázků, bez animační smyčky řízené JavaScriptem a bez externích služeb – zkopírujte blok CSS a bude se točit, ať už ho vložíte kamkoli.