Stil dine egne kryssboks animasjonseffekter med Checkbox.css
I et nylig innlegg dekket jeg et morsomt animasjonsbibliotek for egendefinerte radioknapper, drevet av CSS.
Det gratis biblioteket ble løslatt av 720kb og så raskt en oppfølgingsalternativ som heter Checkbox.css. Dette fungerer på en lignende måte, bortsett fra det restyler og animerer HTML-boksene.
Dette biblioteket kommer som en serie med biblioteker med tre forskjellige formål:
Radiobox.css- egendefinerte radio animasjonerCheckbox.css- egendefinerte boks animasjonerChecked.css- stiler og animerer eksisterende utvalgte elementer (radioer og boksene)
Disse er alle utviklet av samme lag, og de fungerer på en lignende måte. Men du må Inkluder hvert bibliotek individuelt hvis du vil få full effekt.
Ta en titt på Checkbox.css GitHub for å se noen av disse funksjonene og hvordan de fungerer. Som standard stole de på 2D-transformasjoner sammen med CSS-overganger, avhengig av nettleserstøtte.
Ingen av disse bibliotekene kommer med JS fallback metoder, så de virkelig bare arbeid for CSS-drevne animasjoner. Men et raskt blikk på demoversiden burde ha deg glad for å legge til disse animasjonene på siden din.
Prosessen kunne ikke vært enklere og den krever lite-å-nei kodingskunnskap (selv om det alltid er nyttig å ha noen).
Når CSS-stilarket er på siden, legg du bare til en klasse i avkrysningsruten med formatet avkrysnings-x hvor i “x” representerer hva som helst animasjon du vil ha. For eksempel, her er koden for “hoppe” animasjonseffekt:
Den beste delen er hvordan dette biblioteket kan arbeid sammen med alternativknappen, også. Jeg vil definitivt anbefale Checked.css biblioteket hvis du vil animere eksisterende valgte elementer.
Ikke la alle disse avhengighetene skremme deg. Nesten alle kan sette opp Checkbox.css biblioteket eller noen av de relaterte bibliotekene, alt fra bunnen av med en liten kopi og liming.
Og hvis du har spørsmål eller forslag til denne pakken med input animasjonsbiblioteker, kan du prøve å formidle skaperne via deres nettsted eller på Twitter @ 720kb_.
