Stilēt savu izvēles rūtiņu animācijas efektus ar Checkbox.css
Nesenā ziņojumā es iekļāvu jautru animācijas bibliotēku pielāgotām radio pogām, darbojas ar CSS.
Šī bezmaksas bibliotēka tika izlaista ar 720kb un ātri redzēja alternatīva, ko sauc par Checkbox.css. Tas darbojas līdzīgi, izņemot to atjaunot un animēt HTML izvēles rūtiņas.
Šī bibliotēka ir bibliotēku komplekts ar trīs atšķirīgi mērķi:
Radiobox.css- pielāgotas radio animācijasCheckbox.css- pielāgotas izvēles rūtiņu animācijasChecked.css- stili un animē esošos elementus (radio un izvēles rūtiņas)
Tās visas ir izstrādājušas tā pati komanda, un tās darbojas līdzīgi. Bet jums būs nepieciešams iekļaut katru bibliotēku atsevišķi ja vēlaties iegūt pilnīgu efektu.
Esiet laipni pie Checkbox.css GitHub, lai redzētu dažas no šīm funkcijām un to, kā tās darbojas. Pēc noklusējuma viņi paļaujas uz 2D pārveidojas kopā ar CSS pārejām, atkarībā no pārlūka atbalsta.
Nevienā no šīm bibliotēkām nav JS rezerves metožu, tāpēc tās patiešām ir darbojas tikai CSS darbināmām animācijām. Bet, viens ātrs skatījums uz demo lapu, jums vajadzētu būt priecīgam pievienot šīs animācijas jūsu lapai.
Process nevar būt vienkāršāks un vienkāršāks prasa maz kodēšanas zināšanu (lai gan vienmēr ir noderīgi).
Kad CSS stila lapa ir jūsu lapā, vienkārši pievienojiet klases izvēles rūtiņu ar formātu izvēles rūtiņa-x kur “x” ir jebkura animācija, ko vēlaties. Piemēram, šeit ir kods “lēkt” animācijas efekts:
Labākā daļa ir tā, kā šī bibliotēka var strādāt kopā ar radio pogu formātu, arī. Es noteikti gribētu ieteikt bibliotēku Checked.css, ja vēlaties aktivizēt esošos atlasītos elementus.
Neļaujiet visām šīm atkarībām jūs nobiedēt. Diezgan daudz ikviens var iestatīt Checkbox.css bibliotēku vai kādu no saistītajām bibliotēkām, viss no nulles ar nelielu kopiju un ielīmēšanu.
Un, ja jums ir jautājumi vai ieteikumi šai ievadei, animācijas bibliotēkas mēģina sūtīt ziņojumus ar radītājiem, izmantojot vietni vai čivināt @ 720kb_.
