Style Your Own Checkbox Animacijski efekti s Checkbox.css
U nedavnom postu, pokrio sam zabavnu biblioteku animacija za prilagođene gumbe, pokreće CSS.
Ta besplatna knjižnica je izdana od 720kb i brzo je vidjela alternativa pod nazivom Checkbox.css. To djeluje na sličan način, osim na njega restyles i animira HTML potvrdne okvire.
Ova knjižnica dolazi kao zbirka knjižnica tri različite svrhe:
Radiobox.css- prilagođene radio animacijeCheckbox.css- prilagođene animacije potvrdnog okviraChecked.css- stilovi & animira postojeće odabrane elemente (radio i potvrdni okviri)
Sve to razvija isti tim i oni rade na sličan način. Ali morat ćete uključiti svaku knjižnicu pojedinačno ako želite dobiti pune efekte.
Zavirite u Checkbox.css GitHub da biste vidjeli neke od ovih značajki i kako oni rade. Prema zadanim se postavkama oslanjaju na 2D transformira zajedno s CSS prijelazima, ovisno o podršci preglednika.
Nijedna od tih knjižnica ne dolazi s rezervnim metodama JS-a, tako da su stvarno radi samo za animacije koje pokreće CSS. No, jedan brzi pogled na demo stranicu trebao bi vas oduševiti dodavanjem ovih animacija na svoju stranicu.
Proces ne može biti jednostavniji zahtijeva malo znanja za kodiranje (iako je uvijek korisno imati neke).
Nakon što je CSS stilova na vašoj stranici, samo dodajte klasu u svoj potvrdni okvir s formatom okvir-x gdje je “x” predstavlja bilo koju animaciju koju želite. Na primjer, ovdje je kôd za “skok” efekt animacije:
Najbolji dio je kako ova knjižnica može raditi zajedno s formatom radio gumba, isto. Definitivno bih preporučio knjižnicu Checked.css ako to želite animirati postojeće odabrane elemente.
Ne dopustite da vas sve ove ovisnosti uplaše. Gotovo svatko može postaviti biblioteku Checkbox.css ili bilo koju od srodnih knjižnica, sve od nule s malo kopiranja i lijepljenja.
A ako imate pitanja ili prijedloge za ovaj paket animacija za unos, biblioteke pokušajte slati poruke kreatorima putem svoje web-lokacije ili na Twitteru @ 720kb_.
