CSS animuoto gradientinio rėmelio generatorius

Besisukantis vaivorykštinis rėmelis atrodo paprastai, kol iš tikrųjų nepabandai jo sukurti su CSS: kampo animavimas conic-gradient() viduje su paprasta pasirinktine savybe nieko naudingo neduoda, nes naršyklė nežino, kad reikšmė yra kampas, ir negali interpoliuoti tarp 0deg ir 360deg – ji tiesiog šokteli. Šis generatorius naudoja tikrą pataisymą, CSS savybių ir reikšmių API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` tiksliai nurodo naršyklei, kokio tipo reikšmę saugo pasirinktinė savybė, o tai ir suteikia galimybę sklandžiai, GPU spartinamai interpoliacijai @keyframes taisyklėje.

Pats žiedas yra ::before pseudo-elementas, kurio dydis didesnis už bloką (įtrauka atėmus rėmelio plotį), o jo fonas nustatytas į `conic-gradient(from var(--border-angle), ...)`, grįžtantį prie pirmosios spalvos, todėl skleidimas neturi matomos siūlės. Tuomet kaukė atlieka tikrąjį formavimo darbą: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` išlaiko tik žiedo formos skirtumą tarp padding-box ir content-box, atmesdama vientisą gradientinį stačiakampį visur kitur. Senesnė Safari `-webkit-mask-composite: xor` atlieka identišką operaciją ir pateikiama kartu su standartine savybe, todėl efektas atvaizduojamas nuosekliai, o ne tyliai sugenda viename variklyje.

Apvalinimo spindulio palaikymas nėra paskui pridėta detalė – pseudo-elemento `border-radius: inherit` reiškia, kad bet koks spindulys, kurį nustatote blokui, automatiškai perkeliamas žiedui, todėl piliulės formos mygtukas ar suapvalinta kortelė gauna suapvalintą švytintį rėmelį, o ne tiesias briaunas, prasiskverbiančias pro išlenktus kampus. Išbandykite tai gyvai: vilkite spindulio slankiklį nuo aštraus stačiakampio iki pilnos piliulės ir stebėkite, kaip žiedas seka formą kiekviename žingsnyje – tai detalė, kuri skiria tikrą šios technikos įgyvendinimą nuo netikros ekrano kopijos.

Visa kita puslapyje tiesiogiai atitinka sugeneruotą kodą: pločio slankiklis yra žiedo storis ir pseudo-elemento įtrauka / užpildas, trukmės slankiklis yra @keyframes animacijos trukmė (animation-duration), krypties jungiklis tiesiog pakeičia pagrindinio kadro pabaigos kampo ženklą (+360deg arba -360deg), o kiekvienas spalvos sustojimas yra kableliu atskirtas įrašas conic-gradient() iškvietimo viduje. Visa tai veikia jūsų naršyklėje be paveikslėlių, be JavaScript valdomo animacijos ciklo ir be išorinių paslaugų – nusikopijuokite CSS bloką ir jis toliau suksis, kad ir kur jį įklijuotumėte.