CSS animācijas gradienta robežu ģenerators

Rotējoša varavīksnes apmale izskatās vienkārša, līdz tiešām mēģināt to izveidot CSS: leņķa animēšana iekšpusē conic-gradient() ar vienkāršu pielāgotu rekvizītu nedod neko lietderīgu, jo pārlūkprogrammai nav ne jausmas, ka vērtība ir leņķis, un tā nevar interpolēt starp 0° un 360 grādi — tā vienkārši lec. Šis ģenerators izmanto reālo labojumu, CSS Properties and Values ​​API: `@property --border-angle { sintakse: '<angle>'; sākotnējā vērtība: 0deg; manto: viltus; }` precīzi norāda pārlūkprogrammai, kāda veida vērtība ir pielāgotajam rekvizītam, kas nodrošina vienmērīgu, GPU draudzīgu interpolāciju @keyframes kārtulas ietvaros.

Pats gredzens ir ::befor pseidoelements, kas ir lielāks par lodziņu (ievietots par mīnus apmales platumu), un tā fons ir iestatīts uz "conic-gradient(from var(--border-angle), ...)", kas atgriežas pie pirmās krāsas, lai slaucīšanai nebūtu redzamas šuves. Pēc tam maska ​​veic īsto veidošanas darbu: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); maska-kompozīts: izslēgt;` saglabā tikai gredzenveida atšķirību starp polsterējuma lodziņu un satura lodziņu, izmetot cieto gradienta taisnstūri visur citur. Safari vecākais “-webkit-mask-composite: xor” veic identisku darbību un tiek nosūtīts kopā ar standarta īpašību, tāpēc efekts tiek renderēts konsekventi, nevis klusi nedarbojas vienā dzinējā.

Robežas rādiusa atbalsts nav pārdomāts — pseidoelementa "robežas rādiuss: mantot" nozīmē, ka jebkurš rādiuss, ko ievadāt lodziņā, automātiski tiek pārnests uz gredzenu, tāpēc tabletes formas poga vai noapaļota karte iegūst noapaļotu mirdzošu apmali, nevis taisnas malas, kas izplūst no izliektiem stūriem. Izmēģiniet to tiešraidē: velciet rādiusa slīdni no asa taisnstūra uz pilnu tableti un skatieties, kā gredzens ik uz soļa seko formai, kas ir detaļa, kas atdala reālu šīs tehnikas ieviešanu no viltota ekrānuzņēmuma.

Viss pārējais lapā attiecas tieši uz ģenerēto kodu: platuma slīdnis ir gredzena biezums un pseidoelementa ielaidums/polsterējums, ilguma slīdnis ir @keyframes animācijas ilgums, virziena slēdzis tikai apgriež atslēgas kadra beigu leņķa zīmi (+360° vai -360°), un katra krāsa pietura ir konkrēts izsaukuma ieraksts. Viss darbojas jūsu pārlūkprogrammā bez attēliem, bez JavaScript vadītas animācijas cilpas un bez ārējiem pakalpojumiem — nokopējiet CSS bloku, un tas turpina griezties, lai kur jūs to ielīmētu.