Generator animowanej ramki gradientowej CSS

Obracająca się tęczowa ramka wygląda na prostą, dopóki nie spróbujesz jej zbudować w CSS: animowanie kąta wewnątrz conic-gradient() za pomocą zwykłej własności niestandardowej nie daje nic pożytecznego, ponieważ przeglądarka nie wie, że wartość jest kątem i nie może interpolować między 0deg a 360deg — po prostu przeskakuje. Ten generator stosuje prawdziwe rozwiązanie, API właściwości i wartości CSS: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` mówi przeglądarce dokładnie, jakiego rodzaju wartość przechowuje własność niestandardowa, co umożliwia płynną, akcelerowaną sprzętowo interpolację w regule @keyframes.

Sam pierścień to pseudoelement ::before przeskalowany tak, aby był większy niż pudełko (wcięty o ujemną szerokość ramki), z tłem ustawionym na `conic-gradient(from var(--border-angle), ...)` zapętlonym z powrotem do pierwszego koloru, aby przebieg nie miał widocznego szwu. Następnie maska wykonuje właściwe kształtowanie: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` zachowuje tylko różnicę w kształcie pierścienia między padding-box a content-box, odrzucając wszędzie indziej jednolity prostokąt gradientu. Starsza składnia Safari `-webkit-mask-composite: xor` wykonuje identyczną operację i jest generowana obok standardowej właściwości, dzięki czemu efekt renderuje się spójnie, zamiast cicho zawieść na jednym silniku.

Obsługa border-radius nie jest doczepionym na siłę dodatkiem — `border-radius: inherit` pseudoelementu oznacza, że jakikolwiek promień ustawisz w pudełku, jest automatycznie przenoszony na pierścień, więc przycisk w kształcie pastylki lub zaokrąglona karta otrzymuje zaokrągloną, świecącą ramkę, a nie proste krawędzie wychodzące poza zakrzywione rogi. Przetestuj to na żywo: przesuń suwak promienia od ostrego prostokąta do pełnej pastylki i obserwuj, jak pierścień podąża za kształtem na każdym kroku — to właśnie ten szczegół odróżnia prawdziwą implementację tej techniki od fałszywego zrzutu ekranu.

Wszystko inne na stronie przekłada się bezpośrednio na wygenerowany kod: suwak szerokości to grubość pierścienia i wartość wcięcia/wypełnienia pseudoelementu, suwak czasu trwania to animation-duration w @keyframes, przełącznik kierunku po prostu odwraca znak kąta końcowego klatki kluczowej (+360deg lub -360deg), a każdy punkt koloru to oddzielony przecinkiem wpis wewnątrz wywołania conic-gradient(). Całość działa w Twojej przeglądarce bez obrazów, bez pętli animacji napędzanej JavaScriptem i bez zewnętrznych usług — skopiuj blok CSS, a będzie się kręcić wszędzie tam, gdzie go wkleisz.