Lav sjove animerede radio knapper med Radiobox.css

Det standard HTML5-radio knapper er ret kedeligt. Der er måder at tilpasse dem bruger CSS3, men de fleste teknikker fokus kun på udseende.

Radiobox.css fokuserer på udseende og stil tilføjer brugerdefinerede CSS3-animationer til radioindgange.

Dette bibliotek er helt gratis og open source, tilgængelig på GitHub for at downloade. Med dette CSS bibliotek kan du vælge fra mere end 12 forskellige animationer det gælder for radioknapper.

Uden brugerdefinerede CSS-stilarter vil de stadig ligner normale radioindgange. Men når brugeren klikker for at vælge en knap, vil de få en gal animation effekt. Du kan se levende eksempler på den vigtigste Radiobox-side, som demoer hver stil ud for sit navn.

Du kan installere Radiobox lige fra npm eller bower, eller endda download filerne lokalt til din maskine. GitHub værter alle deres filer i en cdn hvis du vil spille rundt uden at downloade noget.

Den eneste fil du har brug for er radiobox.min.css som skal gå lige ind i dit dokumenthoved. Derfra er du bare tilføj en simpel klasse til hver radioknap afhængigt af den ønskede animation.

Her er en kodeuddrag for “Boing” effekt:

Bemærk “Boing” animation har sin egen CSS-fil hedder boing.min.css. Dette skal medtages hvis du planlægger at bruge den effekt på siden.

Når du downloader Radiobox, skal du få en demokatalog med levende demoer for alle disse effekter. Du kan simpelthen Kopier / indsæt koden direkte til din side for at få det til at fungere uden besvær.

Til fuld dokumentation, tjek den vigtigste repo sammen med live demo site. Hvis du vil kontakte skaberne, kan du sende en email fra 720kb hjemmeside eller besked via Twitter @ 720kb_.