Stil din egen afkrydsningsfelt Animation Effects med Checkbox.css

I et nyligt indlæg dækkede jeg et sjovt animationsbibliotek til brugerdefinerede radioknapper, drevet af CSS.

Det gratis bibliotek blev udgivet med 720 kb og så hurtigt en Opfølgningsalternativ kaldet Checkbox.css. Dette fungerer på en lignende måde, bortset fra det genindretter og animerer HTML-afkrydsningsfelter.

Dette bibliotek kommer som en række biblioteker med tre forskellige formål:

1. Radiobox.css - brugerdefinerede radio animationer
2. Checkbox.css - brugerdefinerede afkrydsningsfelt animationer
3. Checked.css - stilarter og animerer eksisterende valgte elementer (radioer og afkrydsningsfelter)

Disse er alle udviklet af samme hold, og de arbejder på en lignende måde. Men det bliver du nødt til inkludere hvert bibliotek individuelt hvis du ønsker at få de fulde effekter.

Tag et kig på Checkbox.css GitHub for at se nogle af disse funktioner og hvordan de virker. Som standard er de afhængige af 2D transformer sammen med CSS overgange, afhængigt af browsersupport.

Ingen af ​​disse biblioteker kommer med JS fallback metoder, så de virkelig Kun arbejde for CSS-drevne animationer. Men et hurtigt blik på demosiden skal have dig glad for at tilføje disse animationer til din side.

Processen kunne ikke være enklere og den kræver lille-til-nej kodning viden (selv om det altid er nyttigt at have nogle).

Når CSS stilark er på din side, skal du blot tilføje en klasse til din afkrydsningsfelt med formatet afkrydsningsfelt-x hvor er “x” repræsenterer uanset animation, du vil have. For eksempel er her koden for “hoppe” animation effekt:

Den bedste del er, hvordan dette bibliotek kan arbejde sammen med radioknappen format, også. Jeg vil absolut anbefale Checked.css biblioteket, hvis du vil animere eksisterende udvalgte elementer.

Lad ikke alle disse afhængigheder skræmme dig. Næsten meget, alle kan oprette Checkbox.css biblioteket eller nogen af ​​de relaterede biblioteker, alt lige fra bunden med en lille kopi og indsætning.

Og hvis du har spørgsmål eller forslag til denne pakke med input animationsbiblioteker, kan du prøve at sende beskederne via deres websted eller på Twitter @ 720kb_.