30 Animasi CSS Percuma Anda Perlu Lihat

Kami sebelum ini menerbitkan kesan teks kreatif yang anda boleh buat dengan CSS, dan banyak perkara lain yang anda tidak fikir mungkin dibuat dengan CSS. Penyusunan ini bagaimanapun memberi tumpuan kepada banyak perkara yang dapat anda berikan dengan CSS, dan banyak ciptaan ini akan membuat anda menaikkan alis atau dua.

Dari memuat animasi ke togol, dan tingkap modal untuk berjabat unsur, tumpukan ini 30 kegunaan animasi CSS yang luar biasa dan kreatif boleh membuka fikiran anda untuk lebih banyak cara anda boleh bermain dengan animasi CSS yang anda mungkin tidak pernah terfikir sebelum ini.

CSS Loading Animation Oleh patrikhjelm

Tujuh titik animasi beralih ke kiri dan kanan untuk menandakan tindakan pemuatan.

Ikon Beli-Belah animasi oleh jonitrythall

Kesan animasi yang comel apabila belanjawan ditambah ke keranjang belanja. Tatal ke bawah untuk lebih.

Animasi CSS3 Hamburger hanya oleh Dawid Krajewski

Dibina dengan CSS tulen, tiada JS atau apa-apa lagi.

404 Watak animasi Dengan Dengan Es

Sekurang-kurangnya dengan halaman ralat ini, pemaju sedang mengerjakannya. Walaupun ia adalah 404.

CSS Mars Landing oleh mgitch

Kami telah mendarat di Marikh! Dibuat dengan CSS.

The Avenger Oleh mariosmaselli

Bolehkah anda mendengar kemarahan pucuk mengalir melalui skrin? Percuma, betul?

Togol Hari / Malam Oleh jsndks

Kini, anda boleh menukar siang dan malam dengan CSS. Ide genius!

Google Now app pihak ke-3 dengan codecalm

Aplikasi pihak ketiga Google Now, animasi.

Clo clo Oleh judag

Adakah ayam bergerak seperti itu? Anda bertaruh, lengkap dengan leher jiggy. Amalan CSS3 yang hebat.

Ikon ikon animasi oleh mariusbalaj

Idea yang mudah dibuat; nonton butang menu menjadi kenyataan apabila anda menatal ke bawah.

Satu lagi Preloader CSS oleh Maseone

Animasi pemuatan berirama CSS hebat. Hypnotic, bukan?

Hantar butang oleh auginator

Klik untuk menyerahkan, dan butang menghidupkan proses pemuatan sehingga penyerahan selesai!

Reka bentuk bahan Sidebar SVG elastik oleh suez

Seret bar putih di sebelah kanan untuk melihat kesan bar sisi elastik.

Butang zarah Oleh igcorreia

Lakukan apa yang dikatakan butang: hover for awesomeness.

Butang Gooey Oleh Lucas Bebber

Klik untuk kesan Gooey. Anda akan mendapatnya sebaik sahaja anda melihatnya, dan anda akan mengklik padanya beberapa kali lagi. Amirite?

Butang flipside Oleh hakimel

Klik pada mana-mana bahagian butang Padam dan butang akan flip mengikut tempat anda mengklik.

Menu hamburger sejati! Oleh CharlesSmart

Menu hamburger yang lazat. Klik hamburger untuk kesan

Cruisin 'oleh yy

Lihat motorsikal pergi.

Gelombang kiub 3D Oleh waddington

Cube-sicles 3D Kudus!

Animasi tandatangan Oleh drygiel

Berikut ialah tandatangan yang sebenarnya bukan animasi GIF, tetapi sebaliknya urutan PNG dihidupkan dengan CSS3.

Animasi lekapan latar belakang Oleh quasimondo

Trik ini mengubah kecerunan latar belakang dari satu warna ke yang lain dalam bentuk yang lancar dan berterusan.

Ikon peperangan Bintang peperangan Dengan rss

Menu hamburger akan berubah menjadi lightsabers dalam pertempuran (salib).

Animasi gaya GIF Oleh jascha

Tonton sebagai foto yang timbul dari tengah-tengah seni piksel.

Tumpukan animasi input / keluar Dengan fluks

An animasi pen animasi kecil menulis di atas pengadilan yang anda sedang mengisi.

Segi tiga Chromatic Dengan felipedefarias

Ilusi optik hebat, ya, dilakukan dengan CSS3.

Pembuat kopi Dengan iniisroger

Berikut adalah peringatan untuk mengambil dos harian kopi anda. Seperti yang anda perlukan.

Chrome Dinosaur Oleh nickspiel

Tidak dapat mencapai halaman yang anda mahu menarik sambungan yang jatuh? Inilah dinosaur yang selalu anda lihat ketika itu berlaku, hanya kali ini ia berjalan dari meteorit!

CSS goncang Oleh elrumordelaluz

Tuding pada setiap kesan untuk menyaksikan lelaki itu bergegar.

Newton's Cradle Loader oleh All Things Smitty

Sekiranya anda mengetahui fizik, anda pasti mengetahui buaian Newton, tetapi mungkin tidak menyukai ini.

Pelancaran Modal Oleh koolhaus

Klik untuk melihat animasi tetingkap modal yang bagus dan licin.

Berjalan Robot Dengan P233

Robot ini terus berjalan, dan berjalan, dan berjalan, di sekitar paksi Y.

Flexing Arrows Arrows oleh Hakim

Dari halaman pertama hingga terakhir, animasi penomboran ini menunjukkan dengan jelas bagaimana jika anda faring, pagewise.

Sekarang Baca: 15 Kesan Teks Cantik Dicipta dengan CSS