⭐ 0
🔍
Teksts Attēls PDF un dokumenti Audio Mūzika Elektronika Laiks Komunālie pakalpojumi Validatori Ezotērisks Spēles

CSS Animētu Gradienta Apmaļu Ģenerators

Ģenerējiet vienmērīgi rotējošu varavīksnes gradienta apmali, kas pareizi ievēro border-radius, veidotu ar @property, conic-gradient un mask-composite — nokopējiet īsto CSS un vērojiet tā griešanos dzīvajā priekšskatījumā.

🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.

4px
20px
3s
Apstrādā... 0%

Rezultāts

Rotējoša varavīksnes apmale šķiet vienkārša līdz brīdim, kad mēģināt to uzbūvēt CSS: leņķa animēšana iekš conic-gradient() ar vienkāršu pielāgotu mainīgo nedara neko jēgpilnu, jo pārlūkprogramma nezina, ka vērtība ir leņķis, un nespēj interpolēt starp 0deg un 360deg — tā vienkārši pārlec. Šis ģenerators izmanto īsto risinājumu — CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` pasaka pārlūkprogrammai, kāda tieši veida vērtība ir pielāgotajam mainīgajam, un tieši tas atslēdz vienmērīgu, GPU draudzīgu interpolāciju caur @keyframes norādi.

Pats riņķis ir ::before pseidoelements, kas izmērīts lielāks par lodziņu (ar negatīvu atkāpi, kas vienāda ar apmales platumu), un tā fons ir `conic-gradient(from var(--border-angle), ...)`, kas noslēdzas pie pirmās krāsas, lai pārejai nebūtu redzamas šuves. Tad maska veic īsto formēšanas darbu: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` patur tikai riņķa formas atšķirību starp padding-box un content-box, visur citur atmetot viengabalaino gradienta taisnstūri. Safari vecākā `-webkit-mask-composite: xor` veic identisku operāciju un tiek piegādāta līdzās standarta īpašībai, tāpēc efekts attēlojas konsekventi, nevis klusām neizdodas kādā dzinī.

border-radius atbalsts nav pēdējā brīdī uzsprausta piedeva — pseidoelementa `border-radius: inherit` nozīmē, ka jebkurš rādiuss, kādu iestatāt lodziņam, tiek automātiski pārnests uz riņķi, tādējādi apaļīga poga vai noapaļota karte saņem noapaļotu mirdzošu apmali, nevis taisnstūra stūrus, kas izspiežas ārā no izliektajām malām. Pārbaudiet to dzīvajā režīmā: velciet rādiusa slīdni no asa taisnstūra līdz pilnīgai ovālai formai un vērojiet, kā riņķis seko formai ik uz soļa — tā ir detaļa, kas atdala īstu šī paņēmiena realizāciju no viltus ekrānuzņēmuma.

Viss pārējais lapā tieši korelē ar ģenerēto kodu: platuma slīdnis ir riņķa biezums un pseidoelementa atkāpe/iekšējā atkāpe, ilguma slīdnis ir @keyframes animation-duration, virziena pārslēgs vienkārši apvērš atslēgas kadra beigu leņķa zīmi (+360deg vai -360deg), un katrs krāsas pieturas punkts ir ar komatu atdalīts ieraksts conic-gradient() izsaukumā. 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 turpinās griezties visur, kur to ielīmēsiet.

Patīk šis rīks? Domājat, ka šis produkts ir noderīgs? Redzat tajā potenciālu un vēlaties to atbalstīt?

🛡️
Izpildīts pārlūkā

Jūsu faili un ievadītie dati nekad nepamet šo ierīci. Apstrāde notiek pilnībā bezsaistē. 100% droši.

Pieņemtie formāti un noteikumi

  • Apmales platuma, border-radius un rotācijas ilguma slīdņi, kā arī pulksteņrādītāja virziena / pretējā virziena pārslēgs — visi acumirklī atjauno priekšskatījumu.
  • Krāsu pieturas punktu redaktors 2 līdz 5 gradienta krāsām — pievienojiet, noņemiet vai pārdefinējiet jebkuru pieturas punktu, un conic-gradient pāreja atjaunojas ar katru izmaiņu.
  • Kopējams CSS bloks ar pilno @property reģistrāciju, ::before riņķa norādēm un @keyframes rotāciju — gatavs ielīmēšanai, kā ir.

Galvenās priekšrocības

✓ Rotācija ir patiesi plūdena, jo leņķis ir reģistrēts kā īsts <angle> pielāgots mainīgais ar @property — bez šīs reģistrācijas pārlūkprogrammas nespēj animēt leņķi, kas izmantots iekš conic-gradient(), un tas nevis vienmērīgi griežas, bet vienkārši pārlec.
✓ border-radius tiek ievērots automātiski: riņķa pseidoelements manto kastes rādiusu, tādējādi noapaļota karte saņem noapaļotu mirdzošu apmali, nevis taisnstūrainu, kas lien ārā no stūriem.
✓ Tieši tas CSS, ko redzat priekšskatījumā, ir tieši tas CSS, ko kopējat — tas pats ģenerētais bloks darbina dzīvo griežošos lodziņu un aizpilda kopēšanas paneli, ieskaitot @property, @keyframes un mask norādes.
✓ Gan modernā mask-composite: exclude sintakse, gan Safari -webkit-mask-composite: xor atkāpšanās risinājums tiek piegādāti kopā, tāpēc apmale korekti attēlojas pašreizējās pārlūkprogrammās.

Lietošanas gadījumi

  • • Iekļaujiet cenu kartīti vai aicinājuma pogu uzkrītošā, rotējošā varavīksnes rāmītī bez neviena attēla vai JS animācijas cikla — tikai nokopētu CSS bloku.
  • • Pabīdiet noapaļojuma rādiusa slīdni līdz tabletes formai un pārliecinieties, ka mirdzošais gredzens precīzi seko līkumam, nevis rada taisnstūrainus stūru artefaktus, kas raksturīgi naivām implementācijām.
  • • Samaziniet ilgumu līdz 8–10 sekundēm un izvēlieties divas zīmola krāsas, lai ap izceltu kartīti izveidotu smalku, profesionālu akcentu, nevis skaļu varavīksnes efektu.