Buat Spinner Elemen Tunggal dan Pemuat dengan CSSPIN

Anda boleh membina beberapa perkara yang menakjubkan dengan CSS3, dari medan input tersuai kepada dropdowns dan juga grafik vektor. Teknik-teknik ini adalah cepat memotong JavaScript, menjadikannya lebih mudah bagi pemaju untuk mencipta pengalaman pengguna yang lebih baik.

Salah satu perkara yang paling menonjol untuk membina adalah memuatkan animasi pemutar tetapi animasi CSS moden bahkan menjadikannya cukup mudah.

Untuk menjimatkan bangunan masa dari awal, anda boleh menggunakan perpustakaan seperti CSSPIN dengan tan spinners adat yang telah ditetapkan sebelumnya. Semua animasi ini bebas untuk diklon dan benar-benar terbuka, jadi anda mempunyai akses penuh untuk mengedit kod yang anda mahu.

Menubuhkan pemutar dengan perpustakaan ini adalah angin. Anda hanya salin pustaka CSS ke halaman anda, kemudian tambahkan elemen HTML tersuai di mana sahaja anda mahu mereka muncul.

Spinner adat ini hanya digunakan satu elemen HTML untuk mewujudkan kesan animasi. Ini sangat besar kerana kesan grafik dan animasi adalah diberikan murni melalui kelas CSS.

Dan, kerana anda mempunyai akses kepada kod sumber yang anda boleh menggantikan bentuk, warna, saiz, dan kelajuan animasi untuk lebih sesuai dengan projek anda.

Catat kod itu tidak menggunakan sintaks KURANG, jadi anda perlu mengetahui dengan bahasa preprocessing untuk membuat sebarang pengeditan utama.

Tetapi, anda boleh menemui banyak contoh CSS biasa pada halaman demo utama, bersama dengan arahan mudah pada halaman GitHub.

Sekiranya anda sudah biasa npm atau Bower ini adalah kaedah alternatif untuk memasang perpustakaan.

Tidak kira bagaimana anda memasangnya, ini adalah perpustakaan animasi CSS yang hebat untuk berfungsi. Ia dimaksudkan untuk menjadi modular sepenuhnya dengan banyak ruang untuk pemutar baru, animasi baru, dan penyesuaian daripada pemaju lain.

Untuk mengetahui lebih lanjut dan melayari semua dokumentasi, periksa Repo CSSPIN pada GitHub. Pencipta juga membuatnya kecil video persediaan bahawa anda boleh menonton di bawah.