Генератор на CSS анимирани градиентни граници

Въртящата се граница на дъгата изглежда проста, докато всъщност не опитате да изградите такава в CSS: анимирането на ъгъл вътре в conic-gradient() с обикновено потребителско свойство не прави нищо полезно, защото браузърът няма представа, че стойността е ъгъл и не може да интерполира между 0deg и 360deg — просто скача. Този генератор използва истинската корекция, CSS Properties and Values ​​API: `@property --border-angle { синтаксис: '<angle>'; първоначална стойност: 0deg; наследява: невярно; }` казва на браузъра какъв точно вид стойност съдържа персонализираното свойство, което отключва плавна, удобна за 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;` запазва само пръстеновидната разлика между полето за подпълване и полето за съдържание, изхвърляйки плътния правоъгълник с градиент навсякъде другаде. По-старият `-webkit-mask-composite: xor` на Safari изпълнява идентичната операция и се доставя заедно със стандартното свойство, така че ефектът се изобразява последователно, вместо да се повреди тихо на един двигател.

Поддръжката на Border-radius не е последваща мисъл, закрепена отгоре — „border-radius: inherit“ на псевдо-елемента означава, че какъвто и радиус да наберете в полето, се пренася автоматично върху пръстена, така че бутон с форма на хапче или заоблена карта получава заоблена светеща рамка вместо прави ръбове, излизащи от извитите ъгли. Тествайте го на живо: плъзнете плъзгача на радиуса от остър правоъгълник до пълно хапче и гледайте как пръстенът следва формата на всяка стъпка, което е детайлът, който разделя истинското изпълнение на тази техника от фалшивата екранна снимка.

Всичко останало на страницата се картографира директно върху генерирания код: плъзгачът за ширина е дебелината на пръстена и вмъкването/подложката на псевдо-елемента, плъзгачът за продължителност е @keyframes animation-duration, превключвателят за посока просто обръща знака на крайния ъгъл на ключовия кадър (+360deg или -360deg) и всеки цветен ограничител е запис, разделен със запетая вътре conic-gradient() извикване. Цялото нещо работи във вашия браузър без изображения, без цикъл на анимация, управляван от JavaScript, и без външни услуги — копирайте CSS блока и той продължава да се върти, където и да го поставите.