Gaya Kesan Animasi Peti Masuk Anda sendiri dengan Checkbox.css
Dalam jawatan baru-baru ini, saya merangkumi perpustakaan animasi yang menyeronokkan untuk butang radio tersuai, dikuasakan oleh CSS.
Perpustakaan percuma itu dibebaskan oleh 720kb dan dengan cepat melihat a alternatif susulan dipanggil Checkbox.css. Ini berfungsi dengan cara yang sama, kecuali itu restyles dan animasi kotak semak HTML.
Pustaka ini datang sebagai suite perpustakaan tiga tujuan yang berbeza:
Radiobox.css- animasi radio tersuaiCheckbox.css- animasi kotak pasang tersuaiChecked.css- gaya & animasi elemen terpilih sedia ada (radio & kotak)
Ini semua dibangunkan oleh pasukan yang sama dan mereka bekerja dengan cara yang sama. Tetapi anda perlu termasuk setiap perpustakaan secara individu jika anda ingin mendapatkan kesan penuh.
Ambil pengintip di GitHub Checkbox.css untuk melihat beberapa ciri ini dan cara mereka berfungsi. Secara lalai, mereka bergantung 2D berubah bersama dengan peralihan CSS, bergantung pada sokongan penyemak imbas.
Tiada satu pun dari perpustakaan ini datang dengan kaedah fallback JS, jadi mereka benar-benar hanya berfungsi untuk animasi berkuasa CSS. Tetapi, satu pandangan pantas di halaman demo sepatutnya membuatkan anda gembira untuk menambahkan animasi ini ke halaman anda.
Proses ini tidak boleh menjadi lebih mudah dan ia memerlukan pengetahuan pengekodan sedikit demi sedikit (walaupun ia sentiasa berguna untuk mempunyai beberapa).
Setelah lembaran gaya CSS di halaman anda, tambahkan kelas ke kotak semak anda dengan formatnya kotak-x Dimanakah “x” mewakili apa sahaja animasi yang anda mahukan. Sebagai contoh, inilah kod untuk “melompat” kesan animasi:
Bahagian yang terbaik adalah bagaimana perpustakaan ini boleh kerja bersempena dengan format butang radio, juga. Saya pasti akan mengesyorkan perpustakaan Checked.css jika anda mahu hidupkan elemen terpilih yang sedia ada.
Jangan biarkan semua ketergantungan ini menakutkan anda. Sesiapa sahaja boleh membuat perpustakaan Checkbox.css atau mana-mana perpustakaan yang berkaitan, semua dari awal dengan salinan kecil & menampal.
Dan, jika anda mempunyai soalan atau cadangan untuk pek animasi input pek ini cuba menghantar mesej pencipta melalui laman web mereka atau di Twitter @ 720kb_.
