Erstellen Sie Fun Animated Radio Buttons mit Radiobox.css

Die Standard-HTML5-Optionsfelder sind ziemlich langweilig. Es gibt Möglichkeiten, sie mit CSS3 anzupassen, aber die meisten Techniken konzentrieren sich nur auf Looks .

Radiobox.css konzentriert sich auf Aussehen und Stil und fügt benutzerdefinierte CSS3-Animationen zu Radioeingaben hinzu.

Diese Bibliothek ist völlig kostenlos und Open Source, verfügbar auf GitHub zum Download. Mit dieser CSS-Bibliothek können Sie aus mehr als 12 verschiedenen Animationen auswählen, die für Optionsfelder gelten.

Ohne benutzerdefinierte CSS-Stile sehen sie immer noch wie normale Radioeingaben aus . Wenn der Benutzer jedoch klickt, um eine Schaltfläche auszuwählen, erhält er einen verrückten Animationseffekt . Sie können Live-Beispiele auf der Radiobox-Hauptseite sehen, die jeden Style neben seinem Namen aufführt.

Sie können Radiobox direkt von npm oder bower installieren oder die Dateien sogar lokal auf Ihr Gerät herunterladen. GitHub hostet alle ihre Dateien in einem CDN, wenn Sie ohne etwas herunterladen möchten.

Die einzige Datei, die Sie benötigen, ist radiobox.min.css die direkt in Ihren Dokumentenkopf radiobox.min.css . Von dort fügen Sie einfach eine einfache Klasse zu jedem Optionsfeld hinzu, abhängig von der gewünschten Animation.

Hier ist ein Code-Snippet für den "boing" -Effekt:

Beachten Sie, dass die Animation "boing" eine eigene CSS-Datei namens boing.min.css . Dies muss berücksichtigt werden, wenn Sie diesen Effekt auf der Seite verwenden möchten.

Wenn Sie Radiobox herunterladen, sollten Sie ein Demo-Verzeichnis mit Live-Demos für all diese Effekte erhalten . Sie können den Code einfach direkt auf Ihre Seite kopieren und einfügen, damit er ohne Probleme funktioniert.

Eine vollständige Dokumentation finden Sie im Haupt-Repo mit der Live-Demo-Site . Wenn Sie die Ersteller kontaktieren möchten, können Sie eine E-Mail von der 720kb-Website oder Nachricht über Twitter @ 720kb_ senden .