Maak leuke geanimeerde radioknoppen met Radiobox.css

De standaard HTML5 keuzerondjes zijn behoorlijk saai. Er zijn manieren om pas ze aan met behulp van CSS3, maar de meeste technieken focus alleen op uiterlijk.

Radiobox.css focussen op looks en stijl aangepaste CSS3-animaties toevoegen aan radio-ingangen.

Deze bibliotheek is helemaal gratis en open source, beschikbaar op GitHub om te downloaden. Met deze CSS-bibliotheek kunt u kiezen uit meer dan 12 verschillende animaties die van toepassing zijn op keuzerondjes.

Zonder aangepaste CSS-stijlen, zullen ze nog steeds zien eruit als normale radio-ingangen. Maar wanneer de gebruiker klikt om een ​​knop te selecteren, dan doen ze dat krijg een gek animatie-effect. Je kan zien live voorbeelden op de hoofdpagina van de Radiobox waarmee elke stijl naast de naam wordt gedemonstreerd.

Je kunt Radiobox installeren recht uit npm of prieel, of download de bestanden lokaal naar uw computer. GitHub host al hun bestanden in een CDN als je wilt spelen zonder iets te downloaden.

Het enige bestand dat je nodig hebt is radiobox.min.css welke zou moeten gaan recht in je documenthoofd. Vanaf daar, je gewoon voeg een eenvoudige klasse toe naar elk keuzerondje, afhankelijk van de gewenste animatie.

Hier is een codefragment voor de “boing” effect:

Merk op “boing” animatie heeft wel zijn eigen CSS-bestand riep boing.min.css. Deze moet worden opgenomen als u van plan bent dat effect op de pagina te gebruiken.

Wanneer je Radiobox download zou je dat moeten doen krijg een demofolder met live demo's voor al deze effecten. Je kunt gewoon kopieer / plak de code rechtstreeks naar uw pagina om het probleemloos te laten werken.

Voor volledige documentatie, bekijk de hoofdrep samen met de live demo-site. Als je contact wilt opnemen met de makers, kun je een e-mail sturen van de 720kb website of bericht via Twitter @ 720kb_.