Twórz zabawne animowane przyciski radiowe z Radiobox.css

The domyślne przyciski radiowe HTML5 są dość nudne. Istnieją sposoby na to dostosuj je przy użyciu CSS3, ale większość technik skup się tylko na wyglądzie.

Radiobox.css skupiony na wygląda i styl dodawanie niestandardowych animacji CSS3 do wejść radiowych.

Ta biblioteka jest totalnie wolny i otwarte źródło, dostępne na GitHub do pobrania. Z tą biblioteką CSS możesz wybrać z ponad 12 różnych animacji które dotyczą przycisków radiowych.

Bez niestandardowych stylów CSS będą nadal wyglądają jak normalne wejścia radiowe. Ale kiedy użytkownik kliknie, aby wybrać przycisk, będą uzyskać szalony efekt animacji. Możesz zobaczyć żywe przykłady na głównej stronie Radiobox, która pokazuje każdy styl obok jego nazwy.

Możesz zainstalować Radiobox prosto z npm lub altany, lub nawet pobieraj pliki lokalnie na swój komputer. GitHub hostuje wszystkie swoje pliki w CDN jeśli chcesz się bawić bez pobierania czegokolwiek.

Jedyny potrzebny plik to radiobox.min.css który powinien iść prosto do głowicy dokumentu. Stamtąd po prostu dodaj prostą klasę do każdego przycisku radiowego w zależności od wybranej animacji.

Tutaj jest fragment kodu dla “boing” efekt:

Zanotuj “boing” animacja ma własny plik CSS nazywa boing.min.css. To musi być włączony jeśli planujesz użyć tego efektu na stronie.

Po pobraniu Radiobox powinieneś pobierz katalog demo z prezentacje na żywo dla wszystkich tych efektów. Możesz po prostu skopiuj / wklej kod bezpośrednio na stronie, aby działało bezproblemowo.

Dla pełna dokumentacja, Sprawdź główne repo razem z strona demo na żywo. Jeśli chcesz skontaktować się z twórcami, możesz wysłać wiadomość e-mail z witryny Strona internetowa 720kb lub wiadomość za pośrednictwem Twittera @ 720kb_.