CSS генератор анимиране градијентне ивице
Генеришите глатко ротирајућу ивицу дугиних боја која правилно поштује border-radius, изграђену помоћу @property, conic-gradient и mask-composite — копирајте прави CSS, гледајте је како се окреће уживо.
🔒 У потпуности се обрађује у вашем претраживачу — ништа што овде унесете се никада не отпрема.
Резултат
Ротирајућа ивица дугиних боја изгледа једноставно док заправо не покушате да је направите у CSS-у: анимирање угла унутар conic-gradient() са обичним прилагођеним својством не ради ништа корисно, јер прегледач нема појма да је вредност угао и не може да интерполира између 0deg и 360deg — само прескаче. Овај генератор користи право решење, CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` говори прегледачу тачно коју врсту вредности прилагођено својство садржи, што омогућава глатку, GPU-прилагођену интерполацију преко @keyframes правила.
Сам прстен је ::before псеудо-елемент димензионисан већи од кутије (увучен за минус ширину ивице) са позадином постављеном на `conic-gradient(from var(--border-angle), ...)` која се враћа на почетну боју тако да прелаз нема видљиви шав. Маска затим обавља право обликовање: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` задржава само разлику у облику прстена између padding-box и content-box, одбацујући пуни градијентни правоугаоник свуда другде. Старија Safari-јева `-webkit-mask-composite: xor` обавља идентичну операцију и долази уз стандардно својство, тако да се ефекат приказује доследно уместо да нечујно не успе на једном покретачу.
Подршка за border-radius није накнадна мисао прикачена на врх — `border-radius: inherit` псеудо-елемента значи да се било које заобљење које подесите на кутији аутоматски преноси на прстен, тако да дугме у облику пилуле или заобљена картица добија заобљену светлећу ивицу уместо правих ивица које крваре из закривљених углова. Тестирајте уживо: повуците клизач за заобљење од оштрог правоугаоника до потпуне пилуле и гледајте како прстен прати облик у сваком кораку, што је детаљ који раздваја стварну имплементацију ове технике од лажног снимка екрана.
Све остало на страници директно се пресликава у генерисани код: клизач ширине је дебљина прстена и увлачење/одстојање псеудо-елемента, клизач трајања је @keyframes animation-duration, прекидач смера само мења предзнак крајњег угла кључног кадра (+360deg или -360deg), а свака градијентна тачка је унос одвојен зарезом унутар позива conic-gradient(). Цела ствар ради у вашем прегледачу без слика, без петље анимације вођене JavaScript-ом и без спољних сервиса — копирајте CSS блок и он наставља да се окреће где год га налепите.