CSS animacinis gradiento kraštinių generatorius
Sukurkite sklandžiai besisukantį vaivorykštės gradiento kraštą, kuris tinkamai atsižvelgia į kraštinės spindulį, sukurtą naudojant @property, kūginį gradientą ir kaukės sudėtį – nukopijuokite tikrąjį CSS ir stebėkite, kaip jis sukasi tiesiogiai.
Rezultatas
Besisukanti vaivorykštės kraštinė atrodo paprasta, kol iš tikrųjų nemėginate jos sukurti naudojant CSS: kampo animavimas conic-gradient() viduje naudojant paprastą tinkintą ypatybę neduoda nieko naudingo, nes naršyklė neįsivaizduoja, kad reikšmė yra kampas ir negali interpoliuoti nuo 0 iki 360 laipsnių – ji tiesiog šokinėja. Šis generatorius naudoja tikrąjį pataisymą, CSS ypatybių ir verčių API: `@property --border-angle { sintaksė: '<kampas>'; pradinė vertė: 0deg; paveldi: netikras; }` tiksliai nurodo naršyklei, kokią vertę turi tinkinta ypatybė, o tai atrakina sklandžią, GPU palankią interpoliaciją pagal @keyframes taisyklę.
Pats žiedas yra ::befor pseudoelementas, kurio dydis yra didesnis nei dėžutė (įdėta atėmus kraštinės plotį), o jo fonas nustatytas į „conic-gradient(from var(--border-angle), ...)“ ir grįžta į pirmąją spalvą, todėl nubraukimas neturi matomos siūlės. Tada kaukė atlieka tikrąjį formavimo darbą: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maskuoklis kompozitas: neįtraukti;“ išlaiko tik žiedo formos skirtumą tarp užpildymo dėžutės ir turinio dėžutės, pašalindamas vientisą gradiento stačiakampį visur kitur. Senesnis „Safari“ „-webkit-mask-composite“: xor atlieka identišką operaciją ir pristatomas kartu su standartine savybe, todėl efektas rodomas nuosekliai, o ne tyliai sugenda viename variklyje.
Krašto spindulio palaikymas nėra likimas – pseudoelemento „ribinis spindulys: paveldėti“ reiškia, kad bet koks spindulys, kurį surinkote į dėžutę, automatiškai perkeliamas į žiedą, todėl piliulės formos mygtukas arba suapvalinta kortelė gauna suapvalintą švytintį kraštelį, o ne tiesius kraštus, išplaukiančius iš lenktų kampų. Išbandykite tiesiogiai: vilkite spindulio slankiklį nuo aštraus stačiakampio iki pilnos piliulės ir stebėkite, kaip žiedas seka formą kiekviename žingsnyje – tai detalė, skirianti tikrą šios technikos įgyvendinimą nuo netikros ekrano kopijos.
Visa kita puslapyje nukreipiama tiesiai į sugeneruotą kodą: pločio slankiklis yra žiedo storis ir pseudoelemento įterpimas / užpildymas, trukmės slankiklis yra @keyframes animacijos trukmė, krypties jungiklis tiesiog apverčia pagrindinio kadro pabaigos kampo ženklą (+360 laipsnių arba -360 laipsnių), o kiekviena spalvų stotelė yra įvestis-dient. Visa tai veikia jūsų naršyklėje be vaizdų, be „JavaScript“ pagrįstos animacijos ciklo ir jokių išorinių paslaugų – nukopijuokite CSS bloką ir jis sukasi, kad ir kur jį įklijuotumėte.
Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.
Priimami formatai ir taisyklės
- Kraštinės pločio, kraštinės spindulio ir sukimosi trukmės slankikliai bei krypties pagal laikrodžio rodyklę / prieš laikrodžio rodyklę jungiklis – visa tai akimirksniu atnaujina tiesioginę peržiūrą.
- Spalvų sustabdymo redaktorius, skirtas 2–5 gradiento spalvoms – pridėkite, pašalinkite arba iš naujo pažymėkite bet kurį stabdymą, o kūginio gradiento atnaujinimai atnaujinami kiekvieną kartą pakeitus.
- Kopijuojamas CSS blokas su visa @ypatybės registracija, ::prieš skambėjimo taisyklėmis ir @keyframes pasukimu, paruoštas įklijuoti tokį, koks yra.
Pagrindiniai privalumai
Naudojimo atvejai
- • Apvyniokite kainų kortelę arba raginimo veikti mygtuką į akį traukiantį besisukantį vaivorykštės kraštą be vieno vaizdo ar JS animacijos kilpos – tik nukopijuoto CSS bloko.
- • Surinkite kraštinės spindulio slankiklį iki piliulės formos ir įsitikinkite, kad švytintis žiedas puikiai seka kreivę, o ne stačiakampio kampo artefaktus, kuriuos sukuria naiviai įgyvendinimai.
- • Sumažinkite trukmę iki 8–10 s ir pasirinkite dvi prekės ženklo spalvas, kad išryškintumėte subtilų ir profesionalų vaizdą, o ne garsų vaivorykštės efektą.
Įvertinkite šį įrankį
