Buat Fun Radio Animated Buttons Dengan Radiobox.css

The butang radio HTML5 lalai cukup membosankan. Ada cara untuk menyesuaikannya menggunakan CSS3, tetapi kebanyakan teknik tumpu hanya pada penampilan.

Radiobox.css berfokus pada kelihatan dan gaya menambah animasi CSS3 tersuai ke input radio.

Perpustakaan ini adalah benar-benar percuma dan sumber terbuka, boleh didapati di GitHub untuk memuat turun. Dengan perpustakaan CSS ini, anda boleh memilih dari lebih daripada 12 animasi yang berbeza yang digunakan pada butang radio.

Tanpa gaya CSS tersuai, mereka akan tetap kelihatan seperti input radio biasa. Tetapi apabila pengguna mengklik untuk memilih butang mereka akan mendapat kesan animasi gila. Awak boleh lihat contoh hidup pada halaman Radiobox utama yang memaparkan setiap gaya di sebelah namanya.

Anda boleh memasang Radiobox lurus dari npm atau bower, atau memuat turun fail secara setempat ke mesin anda. GitHub tuan rumah semua fail mereka dalam CDN jika anda mahu bermain-main tanpa memuat turun apa-apa.

Satu-satunya fail yang anda perlukan ialah radiobox.min.css yang sepatutnya pergi terus ke kepala dokumen anda. Dari sana, anda hanya tambah kelas yang mudah untuk setiap butang radio bergantung kepada animasi yang anda mahu.

Inilah a coretan kod untuk “boing” kesan:

Perhatikan “boing” animasi tidak ada fail CSS sendiri dipanggil boing.min.css. Ini mesti disertakan jika anda merancang untuk menggunakan kesan itu pada halaman.

Apabila anda memuat turun Radiobox anda harus dapatkan direktori demo dengan demo secara langsung untuk semua kesan ini. Anda boleh jadi salin / tampal kod itu terus ke halaman anda untuk mendapatkannya tanpa kerumitan.

Untuk dokumentasi penuh, semak repo utama bersama dengan tapak demo langsung. Sekiranya anda mahu menghubungi pencipta, anda boleh menghantar e-mel dari Laman web 720kb atau mesej melalui Twitter @ 720kb_.