Style Your Own Checkbox Animacije Učinki s Checkbox.css

V nedavnem postu sem pokril zabavno knjižnico animacije za radijske gumbe po meri, uporablja CSS.

To brezplačno knjižnico je izdal 720kb in hitro videl a alternativa, imenovana Checkbox.css. To deluje na podoben način, razen restyles in animira potrditvena polja HTML.

Ta knjižnica je na voljo kot zbirka knjižnic tri različne namene:

1. Radiobox.css - radijske animacije po meri
2. Checkbox.css - animacije potrditvenega polja po meri
3. Checked.css - styles & animate obstoječe izbrane elemente (radijske postaje in potrditvena polja)

Vse je razvila ista ekipa in delujejo na podoben način. Ampak morate vsako knjižnico posebej če želite dobiti popolne učinke.

Pokukajte v Checkbox.css GitHub, da si ogledate nekatere od teh funkcij in kako delujejo. Privzeto se zanašajo na 2D transformira skupaj s prehodi CSS, odvisno od podpore brskalnika.

Nobena od teh knjižnic ni opremljena z rezervnimi metodami JS, zato so res deluje samo za animacije, ki jih poganja CSS. Ampak, en hiter pogled na demo stran bi morali imeti vesel, da dodate te animacije na vašo stran.

Proces ne bi mogel biti enostavnejši potrebuje malo kodiranje znanja (čeprav je vedno koristno imeti nekaj).

Ko je slogovna različica CSS na vaši strani, dodajte razred v potrditveno polje z obliko checkbox-x kje za “x” predstavlja katerokoli animacijo, ki jo želite. Na primer, tukaj je koda za “skok” učinek animacije:

Najboljši del je, kako lahko ta knjižnica delujejo v povezavi z obliko radijskega gumba, tudi. Jaz bi vsekakor priporočam knjižnico Checked.css, če želite animirati obstoječe izbrane elemente.

Ne pustite, da vas vse te odvisnosti prestrašijo. Precej lahko kdorkoli ustanovi knjižnico Checkbox.css ali katerokoli povezano knjižnico, vse iz nič z malo kopijo in lepljenjem.

Če imate vprašanja ali predloge za ta paket vnosnih animacij, poskusite sporočiti ustvarjalce prek njihovega spletnega mesta ali na Twitterju @ 720kb_.