Generator animowanych granic gradientu CSS

Obracająca się tęczowa ramka wygląda prosto, dopóki nie spróbujesz jej zbudować w CSS: animowanie kąta wewnątrz conic-gradient() za pomocą zwykłej właściwości niestandardowej nie daje nic przydatnego, ponieważ przeglądarka nie ma pojęcia, że wartość jest kątem i nie może interpolować między 0 stopni a 360 stopni — po prostu przeskakuje. Ten generator wykorzystuje prawdziwą poprawkę, API Właściwości i Wartości CSS: `@property --border-angle { składnia: '<kąt>'; wartość początkowa: 0 stopni; dziedziczy: fałsz; }` informuje przeglądarkę dokładnie, jaki rodzaj wartości posiada właściwość niestandardowa, co odblokowuje płynną, przyjazną dla procesora GPU interpolację w regule @keyframes.

Sam pierścień jest pseudoelementem ::before o rozmiarze większym niż pudełko (wstawka minus szerokość obramowania) z tłem ustawionym na „conic-gradient(from var(--border-angle), ...)” zapętlającym się z powrotem do pierwszego koloru, więc przeciągnięcie nie ma widocznego szwu. Następnie maska ​​wykonuje prawdziwą pracę kształtującą: `maska: gradient liniowy (#000 0 0) pole zawartości, gradient liniowy (#000 0 0); mask-composite: wyklucz;` zachowuje jedynie różnicę w kształcie pierścienia pomiędzy polem dopełnienia a polem zawartości, odrzucając pełny prostokąt gradientu wszędzie indziej. Starsza wersja Safari `-webkit-mask-composite: xor` wykonuje tę samą operację i jest dostarczana wraz ze standardową właściwością, więc efekt jest renderowany spójnie, a nie po cichu na jednym silniku.

Obsługa promienia obramowania nie jest przypadkowym pomysłem — „promień obramowania: dziedziczenie” pseudoelementu oznacza, że ​​dowolny promień, który wybierzesz w polu, jest automatycznie przenoszony na pierścień, więc przycisk w kształcie pigułki lub zaokrąglona karta otrzymuje zaokrągloną, świecącą ramkę zamiast prostych krawędzi wypływających z zakrzywionych rogów. Przetestuj to na żywo: przeciągnij suwak promienia z ostrego prostokąta do pełnej pigułki i obserwuj, jak pierścień podąża za kształtem na każdym kroku, czyli szczegół, który oddziela prawdziwe wdrożenie tej techniki od fałszywego zrzutu ekranu.

Wszystko inne na stronie jest odwzorowywane bezpośrednio na wygenerowany kod: suwak szerokości to grubość pierścienia i wstawka/wypełnienie pseudoelementu, suwak czasu trwania to czas trwania animacji @keyframes, przełącznik kierunku po prostu odwraca znak kąta końcowego klatki kluczowej (+360 stopni lub -360 stopni), a każdy przystanek koloru jest wpisem oddzielonym przecinkami wewnątrz wywołania conic-gradient(). Całość działa w przeglądarce bez obrazów, pętli animacji opartej na JavaScript i usług zewnętrznych — skopiuj blok CSS, a będzie się on obracał wszędzie tam, gdzie go wkleisz.