Stil din egen kryssrutan Animation Effects med Checkbox.css

I ett senare inlägg täckte jag ett roligt animationsbibliotek för anpassade radioknappar, drivs av CSS.

Det fria biblioteket släpptes med 720 kb och såg snabbt en uppföljningsalternativ som heter Checkbox.css. Detta fungerar på ett liknande sätt, förutom det återställer och animerar HTML-kryssrutor.

Biblioteket kommer som en serie bibliotek med tre distinkta syften:

1. Radiobox.css - anpassade radioanimationer
2. Checkbox.css - anpassade kryssrutan animeringar
3. Checked.css - stilar och animeringar befintliga valda element (radioer och kryssrutor)

Dessa är alla utvecklade av samma lag och de fungerar på ett liknande sätt. Men du behöver det inkludera varje bibliotek individuellt om du vill få fulla effekter.

Ta en titt på Checkbox.css GitHub för att se några av dessa funktioner och hur de fungerar. Som standard är de beroende av 2D-transformationer tillsammans med CSS-övergångar, beroende på webbläsarsupport.

Ingen av dessa bibliotek kommer med JS fallback metoder, så de verkligen fungerar bara för CSS-drivna animeringar. Men en snabb blick på demosidan borde ha dig glad att lägga till dessa animeringar till din sida.

Processen kunde inte vara enklare och den kräver lite-till-nej kodningskunskap (även om det alltid är användbart att ha några).

När CSS-stilarket finns på din sida, lägg bara till en klass i din kryssruta med formatet checkbox-x där det “x” representerar vilken animation du vill ha. Till exempel, här är koden för “hoppa” animeringseffekt:

Det bästa är hur det här biblioteket kan arbeta i samband med radioknappformatet, för. Jag skulle definitivt rekommendera Checked.css biblioteket om du vill animera befintliga valda element.

Låt inte alla dessa beroenden skämma bort dig. Nästan alla kan ställa in Checkbox.css-biblioteket eller någon av de relaterade biblioteken, allt från början med lite kopia och klistra in.

Och om du har frågor eller förslag till det här paketet med inmatningsanimeringsbibliotek, kan du pröva skaparna via deras webbplats eller på Twitter @ 720kb_.