CSS Animated Gradient Border Generator

Otočný duhový okraj vypadá jednoduše, dokud se ho ve skutečnosti nepokusíte vytvořit v CSS: animace úhlu uvnitř conic-gradient() s obyčejnou uživatelskou vlastností nepřináší nic užitečného, protože prohlížeč netuší, že hodnota je úhel a nemůže interpolovat mezi 0° a 360° – prostě skáče. Tento generátor používá skutečnou opravu, rozhraní CSS Properties and Values ​​API: `@property --border-angle { syntaxe: '<úhel>'; počáteční hodnota: 0 stupňů; dědí: nepravda; }` říká prohlížeči přesně, jakou hodnotu má vlastní vlastnost, což odemyká hladkou interpolaci příznivou pro GPU napříč pravidlem @keyframes.

Samotný prsten je pseudoprvek ::before o velikosti větší než pole (vložený mínus šířka okraje) s pozadím nastaveným na `conic-gradient(from var(--border-angle), ...)` ve smyčce zpět na první barvu, takže tažení nemá žádný viditelný šev. Maska pak dělá skutečnou tvarovací práci: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` zachová pouze prstencový rozdíl mezi vycpávkovým rámečkem a rámečkem obsahu a všude jinde zahodí plný obdélník s přechodem. Starší `-webkit-mask-composite: xor` od Safari provádí stejnou operaci a dodává se spolu se standardní vlastností, takže efekt se vykresluje konzistentně, spíše než tiše selhávající na jednom enginu.

Podpora rádiusu ohraničení není dodatečným nápadem přišroubovaným navrch – „poloměr ohraničení: převzít“ pseudoprvku znamená, že jakýkoli rádius, který vytočíte do krabičky, se automaticky přenese na kroužek, takže tlačítko ve tvaru pilulky nebo zaoblená karta získá zaoblený zářící okraj namísto rovných hran vystupujících ze zakřivených rohů. Otestujte si to naživo: přetáhněte posuvník poloměru z ostrého obdélníku na plnou pilulku a sledujte, jak prsten sleduje tvar na každém kroku, což je detail, který odděluje skutečnou implementaci této techniky od falešného snímku obrazovky.

Vše ostatní na stránce mapuje přímo na vygenerovaný kód: posuvník šířky je tloušťka prstence a vložka/vycpávka pseudoprvku, posuvník doby trvání je @keyframes animation-duration, směrový přepínač pouze překlopí znaménko koncového úhlu klíčového snímku (+360 stupňů nebo -360 stupňů) a každá zarážka barvy je vstupním znakem čárka-oddělená čárkou. Celá věc 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čí, kamkoli jej vložíte.