Crea divertenti pulsanti radio animati con Radiobox.css

Il pulsanti di scelta HTML5 predefiniti sono piuttosto noiosi Ci sono modi per personalizzarli usando CSS3, ma la maggior parte delle tecniche concentrarsi solo sugli sguardi.

Radiobox.css Si concentra su sembra e stile aggiungere animazioni CSS3 personalizzate agli input radio.

Questa libreria è totalmente gratuito e open source, disponibile su GitHub per il download. Con questa libreria CSS, puoi scegliere più di 12 diverse animazioni che si applicano ai pulsanti di opzione.

Senza stili CSS personalizzati, lo faranno ancora assomigliano ai normali ingressi radio. Ma quando l'utente fa clic per selezionare un pulsante, lo faranno ottieni un pazzo effetto di animazione. Puoi vedere esempi dal vivo sulla pagina principale di Radiobox che mostra ogni stile accanto al suo nome.

È possibile installare Radiobox direttamente da npm o bower, o persino scaricare i file localmente sul tuo computer. GitHub ospita tutti i loro file in un CDN se vuoi giocare senza scaricare nulla.

L'unico file che ti serve è radiobox.min.css che dovrebbe andare direttamente nella testa del tuo documento. Da lì, tu solo aggiungi una classe semplice a ciascun pulsante di opzione in base all'animazione desiderata.

Ecco un snippet di codice per il “Boing” effetto:

Notare la “Boing” l'animazione ha il proprio file CSS chiamato boing.min.css. Questo deve essere incluso se prevedi di usare quell'effetto sulla pagina.

Quando scarichi Radiobox dovresti ottenere una directory demo con dimostrazioni dal vivo per tutti questi effetti. Puoi semplicemente copia / incolla il codice direttamente alla tua pagina per farlo funzionare senza problemi.

Per documentazione completa, controlla il repo principale insieme con il sito demo dal vivo. Se vuoi contattare i creatori puoi inviare una email dal Sito Web 720kb o un messaggio via Twitter @ 720kb_.