Генератор на 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` на псевдоелемента означава, че какъвто и радиус да зададете на кутията, той автоматично се пренася върху пръстена, така че бутон с форма на капсула или заоблена карта получава заоблена светеща рамка, вместо прави ръбове, които излизат от извитите ъгли. Тествайте го на живо: плъзнете плъзгача за радиус от остър правоъгълник до пълна капсула и гледайте как пръстенът следва формата на всяка стъпка — точно този детайл разделя истинската реализация на тази техника от фалшивата снимка.

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