Efectuați propriile etichetări de animație cu Checkbox.css
Într-un post recent, am acoperit o bibliotecă de animație distractivă pentru butoanele radio personalizate, alimentat de CSS.
Această bibliotecă gratuită a fost lansată de 720kb și a văzut rapid o follow-up alternativă numită Checkbox.css. Aceasta funcționează într-un mod similar, cu excepția acesteia restylă și animă casetele de selectare HTML.
Această bibliotecă vine ca o suită de biblioteci cu trei scopuri distincte:
Radiobox.css- animații radio personalizateCheckbox.css- personalizate animateChecked.css- stiluri și animă elemente selectate existente (radiouri și căsuțe de selectare)
Toate acestea sunt dezvoltate de aceeași echipă și lucrează în mod similar. Dar va trebui include fiecare bibliotecă în mod individual dacă doriți să obțineți toate efectele.
Luați o privire la GitHub Checkbox.css pentru a vedea unele dintre aceste caracteristici și cum funcționează acestea. În mod implicit, se bazează 2D se transformă împreună cu tranzițiile CSS, în funcție de suportul browserului.
Niciuna dintre aceste biblioteci nu are metode de rezervă JS, așa că într-adevăr lucrați doar pentru animațiile CSS. Dar, o scurtă privire la pagina demo trebuie să vă fie încântată să adăugați aceste animații pe pagina dvs..
Procesul nu ar putea fi mai simplu și mai simplu necesită cunoștințe de codificare puțin sau deloc (deși este întotdeauna util să avem unele).
Odată ce foaia de stil CSS se află pe pagina dvs., trebuie doar să adăugați o clasă la caseta de selectare cu formatul checkbox-x unde “X” reprezintă orice animație doriți. De exemplu, iată codul pentru “a sari” efect de animație:
Cea mai bună parte este modul în care această bibliotecă poate lucrați împreună cu formatul butonului radio, de asemenea. Aș recomanda categoric biblioteca Checked.css dacă doriți animați elementele selectate existente.
Nu lăsa toate aceste dependențe să te sperie. Destul de mult, oricine poate configura biblioteca Checkbox.css sau oricare dintre bibliotecile aferente, toate de la zero, cu un pic copie & lipire.
Și dacă aveți întrebări sau sugestii pentru acest pachet de biblioteci de animație de intrare, încercați să trimiteți mesaje către creatori prin intermediul site-ului lor sau pe Twitter @ 720kb_.
