Skapa roliga animerade radioknappar med Radiobox.css

De standard HTML5-radioknappar är ganska tråkiga. Det finns sätt att anpassa dem använder CSS3, men de flesta tekniker fokusera bara på utseende.

Radiobox.css fokuserar på utseende och stil Lägger till anpassade CSS3-animeringar till radioingångar.

Detta bibliotek är helt gratis och öppen källa, tillgänglig på GitHub för nedladdning. Med det här CSS-biblioteket kan du välja från mer än 12 olika animationer som gäller för radioknappar.

Utan anpassade CSS-stilar, kommer de fortfarande ser ut som vanliga radioingångar. Men när användaren klickar på att välja en knapp ska de få en galen animationseffekt. Du kan se levande exempel på den främsta Radiobox-sidan som demosar varje stil bredvid sitt namn.

Du kan installera Radiobox rakt från npm eller bower, eller ladda ner filerna lokalt till din maskin. GitHub värdar alla sina filer i en CDN om du vill spela utan att ladda ner någonting.

Den enda filen du behöver är radiobox.min.css vilket borde gå rakt in i ditt dokumenthuvud. Därifrån, du bara lägg till en enkel klass till varje radioknapp beroende på vilken animering du vill ha.

Här är en kod snippet för “boing” effekt:

Notera “boing” animering har sin egen CSS-fil kallad boing.min.css. Detta måste inkluderas om du planerar att använda den effekten på sidan.

När du laddar ner Radiobox borde du få en demokatalog med lev demos för alla dessa effekter. Du kan helt enkelt kopiera / klistra in koden direkt till din sida för att få det att fungera utan krångel.

För fullständig dokumentation, kolla in huvudsakliga repo tillsammans med live demo webbplats. Om du vill kontakta skaparna kan du skicka ett e-postmeddelande från 720kb webbplats eller meddelande via Twitter @ 720kb_.