Gestalten Sie Ihre eigenen Checkbox-Animationseffekte mit Checkbox.css

In einem kürzlich erschienenen Beitrag habe ich eine lustige Animationsbibliothek für benutzerdefinierte Optionsfelder behandelt, unterstützt von CSS.

Diese kostenlose Bibliothek wurde von 720kb veröffentlicht und sah schnell ein Folge-Alternative namens Checkbox.css. Dies funktioniert auf ähnliche Weise, außer es restyles und animiert HTML-Checkboxen.

Diese Bibliothek wird als Bibliothekssuite geliefert drei verschiedene Zwecke:

1. Radiobox.css - benutzerdefinierte Radioanimationen
2. Checkbox.css - Benutzerdefinierte Checkbox-Animationen
3. Checked.css - Stile & animiert vorhandene ausgewählte Elemente (Radios & Kontrollkästchen)

Diese werden alle von demselben Team entwickelt und arbeiten auf ähnliche Weise. Aber du musst es tun Fügen Sie jede Bibliothek einzeln hinzu wenn Sie die volle Wirkung erzielen wollen.

Werfen Sie einen Blick auf die Checkbox.css GitHub, um einige dieser Funktionen und deren Funktionsweise zu sehen. Sie sind standardmäßig darauf angewiesen 2D-Transformationen zusammen mit CSS-Übergängen, abhängig von der Browserunterstützung.

Keine dieser Bibliotheken verfügt über JS-Fallback-Methoden, also wirklich funktioniert nur für CSS-basierte Animationen. Ein kurzer Blick auf die Demoseite sollte Sie jedoch erfreuen, diese Animationen zu Ihrer Seite hinzuzufügen.

Der Prozess könnte nicht einfacher sein erfordert wenig bis kein Kodierungswissen (obwohl es immer nützlich ist, etwas zu haben).

Wenn sich das CSS-Stylesheet auf Ihrer Seite befindet, fügen Sie Ihrem Kontrollkästchen einfach eine Klasse mit dem Format hinzu Ankreuzfeld-x bei dem die “x” steht für jede Animation, die Sie möchten. Hier ist zum Beispiel der Code für die “springen” Animationseffekt:

Der beste Teil ist, wie diese Bibliothek kann in Verbindung mit dem Optionsfeldformat arbeiten, auch. Ich würde die Checked.css-Bibliothek auf jeden Fall empfehlen, wenn Sie möchten vorhandene ausgewählte Elemente animieren.

Lassen Sie sich nicht durch all diese Abhängigkeiten abschrecken. Jeder kann die Checkbox.css-Bibliothek oder eine der zugehörigen Bibliotheken einrichten, Alles von Grund auf mit einem kleinen Text und Einfügen.

Wenn Sie Fragen oder Anregungen zu diesem Paket mit Eingabe-Animationsbibliotheken haben, versuchen Sie, die Ersteller über ihre Website oder auf Twitter @ 720kb_.