38 Demo Animasi CSS3 yang Menginspirasi
Sejak diperkenalkannya CSS3, benar-benar ada banyak perdebatan panas seputar kemungkinan dan kegunaannya. Namun, ada juga banyak eksperimen kerajinan tangan yang menarik untuk mengeksplorasi potensinya. Meskipun percobaan dengan cara apa pun tidak membuktikan kegunaan CSS3, mereka benar-benar menunjukkan kemungkinan sebenarnya dari CSS3, ke tingkat yang pengembang besar percaya bahwa CSS3 adalah masa depan.
Benarkah itu? Nilailah dengan mata Anda. Dalam showcase ini kita tidak akan menunjukkan apa-apa selain adil 38 demo animasi berbasis CSS3 yang menginspirasi yang murni menemukan potensi sebenarnya dari CSS3. Selain eksperimen murni, Anda juga akan melihat beberapa contoh praktis tentang bagaimana CSS3 dapat diterapkan ke dalam desain web agar lebih manis dan seksi..
Cukup berkata, mari kita jelajahi dunia CSS3 yang fantastis!
Anda mungkin juga tertarik dengan:
- Panduan Pemula untuk CSS3
- Membuat Kotak Pencarian CSS3 Rocking
- Membangun Halaman Web HTML5 / CSS3
- Menu Navigasi Breadcrumb Anggun di CSS3
- Buat Formulir Kontak HTML5 / CSS3 Berbasis Ajax
- 35 Grafik Dibangun Murni Dengan CSS3
- lebih…
Anda sangat disarankan untuk melihat demo ini menggunakan versi Safari atau versi Pengembang Google Chrome terbaru. Namun, sebagian besar demo mendukung Firefox dan Google Chrome versi terbaru.
Animasi 3D Helix
Yang pertama dalam daftar adalah animasi luar biasa yang dibuat oleh Marcofolio.net, menggunakan transformasi 3D CSS3. Animasi ini terlihat seperti sulap itu sendiri, tetapi Anda benar-benar dapat belajar untuk membuat efek yang serupa dengan tutorial di artikel!
Tombol Animasi
Wajib dilihat untuk perancang web, karena demo tidak hanya menunjukkan kemungkinan animasi CSS3, tetapi juga memberikan efek tombol yang sangat keren dan praktis untuk inspirasi!
Menu Animasi
Mencoba membumbui menu animasi Anda agar terlihat keren dan kreatif? Demo ini untuk Anda.
AT-AT Walker
Demo animasi yang mengilhami menunjukkan potensi CSS3 pada menjiwai unit dengan bagian tubuh.
Battlefield CSS3
Battlefield CSS3 dengan banyak ledakan dan tembakan!
Masalah besar
Ini animasi yang halus dan menyenangkan yang membuat demo ini menjadi masalah besar.
Dapatkah Haz Cursor Kursor?
“Hai, saya Monster Kursor. Ayah saya memiliki pesan untuk Anda: 'Tolong, jangan gunakan kursor: tidak ada, kecuali jika Anda membuat monster pemakan kursor '.”
CSS Dock
Eksperimen seksi yang meniru dock Mac OS X, dan benar-benar mulus.
CSS3 Man
Lihat, inilah pria CSS3! Contoh sempurna untuk menampilkan potensi sebenarnya dari animasi CSS3.
Bola Dribbble Memantul
Dengan sedikit penggunaan trik grafis, ada animasi CSS3 yang bagus dan lucu.
Dulla
Dulla cukup banyak menunjukkan salah satu teknik yang paling umum digunakan untuk membuat game platformer 2D, yang sekarang juga dimungkinkan dengan CSS3.
Bingkai demi Bingkai Animasi
Animasi bingkai demi bingkai dengan CSS3? Tidak masalah!
Animasi Grafik
Animasi sederhana namun kuat bagi Anda untuk menunjukkan / menjelaskan grafik di situs Anda, belajar membuatnya!
Tinggi
Animasi musik misterius yang menampilkan gambar dari Google Search secara dinamis dalam waktu nyata, dan gambar yang ditampilkan berdasarkan pada lirik lagu.
Hover Effects
Masa depan efek hover hadir dengan CSS3. Ramping dan menjanjikan.
Saya Am Joseph Barrett
CSS3 diintegrasikan ke dalam ikon media sosial dari situs portofolio. Ini tidak hanya menyenangkan tetapi juga menunjukkan kreativitas perancang.
Zoom Tak Terbatas
Animasi yang halus, juga cara yang bagus untuk memamerkan portofolio Anda. Total zoom untuk 26 gambar adalah 67108864: 1.
Kinect dan CSS3
“14 sendi tubuh dilacak dan dikonversi menjadi animasi CSS pendek menggunakan Xbox Kinect. Data tubuh dibawa ke browser tempat diuraikan dan dikonversi menjadi animasi CSS dengan animatable.com.”
Matriks
Ingin menjadi sekeren Matrix? Dengan CSS3 Anda dapat membuatnya.
Kubus Morphing
Demo eksperimental menjelajahi CSS3 menggunakan transformasi, animasi, dan transisi 3D. Bagian yang menarik di sini adalah Anda masih dapat memilih teks pada elemen, bahkan ketika mereka masih berputar.
Tata surya kita
Anda tidak memerlukan perangkat lunak mandiri yang mahal untuk membantu siswa menjelajahi tata surya lagi.
Roll Duff
“Mmmmmm .... Pelanggan akan menyukai persediaan bir yang tidak pernah berakhir.”
Poster Circle
Contoh sederhana namun menarik untuk menunjukkan kepada Anda cara menggunakan transformasi dan animasi CSS untuk mencapai efek yang menarik.
Bahaya Pendeta
Siapa yang dapat menolak situs web dengan karakter yang sangat lucu dan animasi yang lucu?
Rofox
Animasi mulus dan menyenangkan, dapatkan kode sumber untuk dicoba sendiri!
Shaun si Domba
“Tonton kejenakaan Shaun dan teman-temannya dalam klip dari 'An Ill Wind', 'Snowed In', 'The Big Chase', dan 'Twos Company' melalui percobaan interaktif yang dibuat dengan video HTML5 yang dipercepat perangkat keras, Transformasi CSS 3D, dan WebM.”
Ruang
Mungkin ruang adalah batas akhir untuk CSS3.
Ruang CaCSS
Buat efek ajaib seperti ini tidak terlalu sulit dengan CSS3, karena hanya ada sebagian saja pengulangan-radial-gradien dan ukuran latar belakang terlibat. Variasi dimungkinkan dengan jumlah tweak yang wajar.
Star Wars Crawl
Efek merangkak pembukaan Star Wars! Sama epiknya dengan CSS3.
Web Ekspresif
Web ekspresif tidak hanya memperkenalkan Anda tentang CSS3 dan dukungan browser, referensi, dan dokumentasi, tetapi juga menampilkan animasi CSS3 yang menakjubkan di halaman webnya..
Kepala Surat
Menggunakan tipe untuk membuat bayangan yang terlihat seperti wajah manusia, siapa sangka itu mungkin dengan CSS3?
The Man From Hollywood
Pernah melihat animasi yang menarik hanya menggunakan tipografi murni? Nah, Anda bisa melakukannya dengan CSS3 juga.
Planetarium
Demo sederhana epik menjelajahi planetarium dengan detail. SVG, JavaScript, HTML5, CSS3, font dan tipe terlibat.
Jenis Hujan
“Prakiraan hari ini, dengan asumsi Anda menggunakan peramban modern, berawan, dengan peluang 100% untuk hujan di Georgia.”
Efek Tipografi
Selain tombol, menu, dan efek hover, Anda juga dapat mencapai efek tipografi kreatif dengan CSS3. jQuery juga terlibat dalam demo ini untuk menata huruf kata-kata.
Berjalan Dengan Andrew Hoyer
Yang terbaik dari semuanya, Anda juga bisa belajar berjalan dengan Andrew Hoyer di artikel tersebut!
Wonder Webkit
Penggunaan yang luar biasa dari transformasi 3D CSS3 dengan perpustakaan JavaScript Matrix. Kedengarannya teknis, tetapi hasilnya sangat keren.
Zoetrope
Apa lagi yang tidak bisa Anda lakukan dengan CSS3 ketika Zoetrope dimungkinkan dengan itu?
Refleksi
Menginspirasi? iya nih. Praktis? Mungkin. Teknik animasi selalu menjadi subjek yang menggaruk bagi pengembang dan animator karena membutuhkan tingkat pengetahuan tertentu untuk menghasilkan animasi yang benar-benar halus, unik dan bergaya. Meskipun CSS3 memiliki kemungkinan untuk melakukan animasi, itu tidak berarti bahwa itu adalah alat yang cocok untuk animasi. Saya pikir pada akhirnya ini masih tentang preferensi Anda, karena bagi saya, saya baik-baik saja dengan keduanya, selama alat tersebut sesuai dengan kebutuhan proyek.
Apa pendapat Anda tentang animasi CSS3 ini? Apakah animasi CSS3 ini hanya baik sebagai eksperimen, atau juga dapat diterapkan ke dalam desain web kehidupan nyata? Seperti biasa, kami menyambut pemikiran berharga Anda tentang topik ini, dan beri tahu kami animasi CSS3 favorit Anda juga!
Lebih
Hanya showcase, benarkah? Anda layak mendapatkan lebih banyak! Di bawah ini adalah tutorial dan panduan CSS3 dari Hongkiat untuk Anda, bersenang-senang menjelajahi mereka!
