Gaya Efek Animasi Kotak Centang Anda Sendiri dengan Checkbox.css
Dalam posting baru-baru ini, saya membahas perpustakaan animasi yang menyenangkan untuk tombol radio kustom, didukung oleh CSS.
Perpustakaan gratis itu dirilis oleh 720kb dan dengan cepat melihat a alternatif tindak lanjut yang disebut Checkbox.css. Ini bekerja dengan cara yang sama, kecuali itu restyles dan animasikan kotak centang HTML.
Perpustakaan ini hadir sebagai rangkaian perpustakaan tiga tujuan berbeda:
Radiobox.css- animasi radio khususCheckbox.css- animasi kotak centang khususChecked.css- gaya & menjiwai elemen terpilih yang ada (radio & kotak centang)
Ini semua dikembangkan oleh tim yang sama dan mereka bekerja dengan cara yang sama. Tetapi Anda harus melakukannya sertakan setiap perpustakaan secara terpisah jika Anda ingin mendapatkan efek penuh.
Intip GitHub di Checkbox.css untuk melihat beberapa fitur ini dan cara kerjanya. Secara default, mereka bergantung Transformasi 2D bersama dengan transisi CSS, tergantung pada dukungan browser.
Tak satu pun dari perpustakaan ini datang dengan metode fallback JS, jadi mereka benar-benar hanya berfungsi untuk animasi yang didukung CSS. Tapi, sekilas pada halaman demo seharusnya Anda senang untuk menambahkan animasi ini ke halaman Anda.
Prosesnya tidak bisa lebih sederhana dan mudah membutuhkan sedikit pengetahuan coding (Meskipun selalu bermanfaat untuk memilikinya).
Setelah lembar gaya CSS ada di halaman Anda, cukup tambahkan kelas ke kotak centang Anda dengan format kotak centang-x Dimana “x” mewakili animasi apa pun yang Anda inginkan. Misalnya, inilah kode untuk “melompat” efek animasi:
Bagian terbaiknya adalah bagaimana perpustakaan ini bisa bekerja bersama dengan format tombol radio, terlalu. Saya pasti akan merekomendasikan perpustakaan Checked.css jika Anda mau menghidupkan elemen yang dipilih yang ada.
Jangan biarkan semua dependensi ini membuat Anda takut. Hampir semua orang dapat mengatur pustaka Checkbox.css atau pustaka terkait lainnya, semua dari awal dengan sedikit copy & paste.
Dan, jika Anda memiliki pertanyaan atau saran untuk paket pustaka animasi input ini, coba kirim pesan kepada pembuatnya melalui situs mereka atau di Twitter @ 720kb_.
