Štýl vlastného zaškrtávacieho políčka Animácia Efekty s Checkbox.css
V nedávnom príspevku som obsadil zábavnú animačnú knižnicu pre vlastné prepínacie tlačidlá, powered by CSS.
Táto bezplatná knižnica bola vydaná 720kb a rýchlo videla a následná alternatíva nazvaná Checkbox.css. To funguje podobným spôsobom, okrem toho restyles a animuje HTML začiarkavacie políčka.
Táto knižnica prichádza ako sada knižníc troch odlišných účelov:
Radiobox.css- vlastné rozhlasové animácieCheckbox.css- vlastné animácie zaškrtávacieho políčkaChecked.css- štýly a animuje existujúce vybrané prvky (rádia a zaškrtávacie políčka)
Všetky tieto sú vyvinuté tým istým tímom a pracujú podobným spôsobom. Ale budete musieť zahrňte každú knižnicu jednotlivo ak chcete získať plné efekty.
Pozrite sa na Checkbox.css GitHub, aby ste si pozreli niektoré z týchto funkcií a ako fungujú. V predvolenom nastavení sa spoliehajú 2D transformuje spolu s prechodmi CSS, v závislosti od podpory prehliadača.
Žiadna z týchto knižníc nie je vybavená záložnými metódami JS, takže naozaj pracovať len pre animácie napájané CSS. Ale jeden krátky pohľad na demo stránke by mal mať radosť pridať tieto animácie na vašu stránku.
Proces nemôže byť jednoduchší a to vyžaduje len malé znalosti o kódovaní (aj keď je vždy užitočné mať niektoré).
Akonáhle je štýl listu CSS na vašej stránke, stačí pridať triedy do vášho políčka s formátom checkbox-x kde “X” predstavuje akúkoľvek animáciu, ktorú chcete. Napríklad tu je kód pre “preskočiť” animovaný efekt:
Najlepšie je, ako môže táto knižnica pracovať v spojení s formátom prepínača, tiež. Chcel by som určite odporučiť knižnicu Checked.css, ak chcete animovať existujúce vybraté prvky.
Nenechajte všetky tieto závislosti vystrašiť. Málokto môže nastaviť knižnicu Checkbox.css alebo ktorúkoľvek z príslušných knižníc, všetko od začiatku s malou kópiou a vložením.
A ak máte otázky alebo návrhy pre tento balík vstupných animačných knižníc skúste zasielať správy tvorcom prostredníctvom svojich stránok alebo na stránkach Twitter @ 720kb_.
