ЦСС генератор анимираних ивица градијента

Ротирајућа дугина ивица изгледа једноставно док заправо не покушате да је направите у ЦСС-у: анимирање угла унутар цониц-градиент() са обичним прилагођеним својством не чини ништа корисно, јер претраживач нема појма да је вредност угао и не може да интерполира између 0 степени и 360 степени – само скаче. Овај генератор користи праву исправку, АПИ својстава и вредности ЦСС-а: `@проперти --бордер-англе { синтакса: '<угао>'; почетна вредност: 0дег; наслеђује: лажно; }` говори претраживачу какву тачно вредност има прилагођено својство, што је оно што откључава глатку интерполацију прилагођену ГПУ-у у правилу @кеифрамес.

Сам прстен је псеудоелемент ::бефоре који је већи од оквира (уметнут минус ширина ивице) са позадином постављеном на `конусни градијент(од вар(--бордер-англе), ...)` који се враћа на прву боју тако да потез нема видљиви шав. Маска тада обавља прави посао обликовања: `маска: линеар-градиент(#000 0 0) цонтент-бок, линеар-градиент(#000 0 0); маск-цомпосите: екцлуде;` задржава само разлику у облику прстена између поља за попуњавање и оквира за садржај, одбацујући чврсти правоугаоник градијента свуда другде. Сафари-јев старији `-вебкит-маск-цомпосите: кор` обавља идентичну операцију и испоручује се заједно са стандардним својством, тако да се ефекат приказује доследно, а не тихо на једном мотору.

Подршка за радијус ивице није накнадна мисао причвршћена на врху — „гранични радијус: наследи“ псеудоелемента значи да се било који радијус који унесете у кутију аутоматски преноси на прстен, тако да дугме у облику пилуле или заобљена картица добијају заобљене светлеће ивице уместо равних ивица које излазе из закривљених углова. Тестирајте уживо: превуците клизач радијуса са оштрог правоугаоника на пуну таблету и гледајте како прстен прати облик на сваком кораку, што је детаљ који одваја стварну примену ове технике од лажног снимка екрана.

Све остало на страници се пресликава директно на генерисани код: клизач ширине је дебљина прстена и уметак/допуна псеудо-елемента, клизач за трајање је @кеифрамес трајање анимације, прекидач правца само окреће знак крајњег угла кључног кадра (+360 степени), а сваки унос бојом је одвојен од 360 дег. цониц-градиент() позив. Цела ствар ради у вашем претраживачу без слика, без петље анимације вођене ЈаваСцрипт-ом и без спољних услуга — копирајте ЦСС блок и он се врти где год да га налепите.