Erstellen Sie lustige animierte Radioknöpfe mit Radiobox.css

Das Standard-HTML5-Optionsfelder sind ziemlich langweilig Es gibt Möglichkeiten zu anpassen sie mit CSS3, aber die meisten Techniken konzentrieren sie sich nur auf das aussehen.

Radiobox.css konzentriert sich auf sieht aus und Stil Hinzufügen von benutzerdefinierten CSS3-Animationen zu den Radioeingängen.

Diese Bibliothek ist total frei und Open Source, verfügbar auf GitHub zum Download. Mit dieser CSS-Bibliothek können Sie auswählen mehr als 12 verschiedene Animationen das gilt für Optionsfelder.

Ohne benutzerdefinierte CSS-Stile werden sie trotzdem verwendet aussehen wie normale Radio-Eingänge. Wenn der Benutzer jedoch auf eine Schaltfläche klickt, wird sie ausgewählt erhalten Sie einen verrückten Animationseffekt. Du kannst sehen Live-Beispiele auf der Hauptseite von Radiobox, auf der die einzelnen Styles neben dem Namen aufgeführt werden.

Sie können Radiobox installieren direkt ab npm oder laube, oder laden Sie die Dateien auch lokal auf Ihren Computer herunter. GitHub hostet alle ihre Dateien in einem CDN wenn Sie herumspielen möchten, ohne etwas herunterzuladen.

Die einzige Datei, die Sie benötigen, ist radiobox.min.css was sollte gehen direkt in Ihren Dokumentenkopf. Von dort aus geht es dir nur Eine einfache Klasse hinzufügen zu jedem Optionsfeld, abhängig von der gewünschten Animation.

Hier ist ein Code-Auszug für die “boing” bewirken:

Beachten Sie das “boing” Animation hat eine eigene CSS-Datei namens boing.min.css. Diese muss enthalten sein wenn Sie diesen Effekt auf der Seite verwenden möchten.

Wenn Sie Radiobox herunterladen, sollten Sie dies tun Holen Sie sich ein Demo-Verzeichnis mit Live-Demos für all diese Effekte. Das kannst du einfach Code kopieren / einfügen direkt auf Ihre Seite, damit es problemlos funktioniert.

Zum vollständige Dokumentation, Besuche die Hauptrepo zusammen mit Live-Demo-Site. Wenn Sie sich mit den Erstellern in Verbindung setzen möchten, können Sie eine E-Mail von senden 720kb Website oder eine Nachricht über Twitter @ 720kb_.