38 Inspirasi Animasi CSS3

Sejak pengenalan CSS3, terdapat banyak perdebatan panas yang berputar di sekitar kemungkinan dan kegunaannya. Walau bagaimanapun, terdapat juga banyak eksperimen yang menarik yang dibuat tangan untuk meneroka potensinya. Walaupun eksperimen dengan apa jua cara tidak membuktikan kebolehgunaan CSS3, mereka benar-benar memperlihatkan kemungkinan sebenar CSS3, pada tahap yang pemaju utama percaya CSS3 adalah masa depan.

Adakah itu benar? Hajarlah dengan matamu. Dalam pameran ini, kita akan mempamerkan apa-apa tetapi hanya 38 inspirasi animasi demo berasaskan CSS3 yang semata-mata menemui potensi sebenar CSS3. Selain eksperimen tulen, anda juga akan melihat beberapa contoh praktikal bagaimana CSS3 boleh digunakan dalam reka bentuk web untuk menjadikannya lebih manis dan lebih seksi.

Cukup berkata, marilah kita meneroka dunia CSS3 yang hebat!

Anda juga mungkin tertarik:

Panduan Permulaan untuk CSS3
Mencipta Kotak Mencari CSS3 Rocking
Membina Laman Web HTML5 / CSS3
Menu Navigasi Breadcrumb Anggun dalam CSS3
Buat Borang Perhubungan HTML5 / CSS3 Berbasis Ajax
35 Grafik Dibina Semula Dengan CSS3
lebih lagi ...

Anda amat disyorkan untuk melihat demo ini menggunakan versi terkini versi Safari atau Pembangun Google Chrome. Kebanyakan demo menyokong versi terkini Firefox dan Google Chrome, walaupun.

Helix 3D animasi

Yang pertama dalam senarai adalah animasi yang luar biasa yang dibuat oleh Marcofolio.net, menggunakan CSS3 3D transforms. Animasi itu kelihatan seperti sihir itu sendiri, tetapi sebenarnya anda boleh belajar untuk menghasilkan kesan yang sama dengan tutorial dalam artikel itu!

Butang animasi

Mesti melihat pereka web, kerana demo bukan hanya menunjukkan kemungkinan animasi CSS3, tetapi juga menyediakan kesan butang yang sangat sejuk dan praktikal untuk inspirasi!

Animasi Menu

Cuba memboroskan menu animasi anda untuk menjadikannya kelihatan hebat dan kreatif? Demo ini adalah untuk anda.

AT-AT Walker

Satu demo animasi inspirasi yang menunjukkan potensi CSS3 untuk menghidupkan satu unit dengan bahagian badan.

Battlefield CSS3

Battlefield CSS3 dengan banyak letupan dan tembakan!

Perkara besar

Ia adalah animasi yang licin dan bagus yang menjadikan demo ini satu masalah besar.

Bolehkah Haz Kursor Ur?

“Hai, saya Monster Kursor. Papa saya mempunyai mesej untuk anda: 'Tolong, jangan gunakan kursor: tiada, kecuali jika anda membuat raksasa makan kursor '.”

Dock CSS

Percubaan seksi meniru dok Mac OS X, dan ia benar-benar lancar.

Man CSS3

Lihatlah, di sini datang lelaki CSS3! Contoh sempurna untuk mempamerkan potensi sebenar animasi CSS3.

Dribbble Ball Bouncing

Dengan sedikit penggunaan helah grafik datang animasi CSS3 yang bagus dan lucu.

Dulla

Dulla cukup menunjukkan salah satu teknik yang paling umum digunakan untuk membuat permainan platformer 2D, yang kini mungkin juga dengan CSS3.

Frame oleh Animasi Bingkai

Bingkai dengan animasi bingkai dengan CSS3? Tiada masalah!

Animasi graf

Animasi mudah tetapi berkuasa untuk anda menunjukkan / menjelaskan graf di laman web anda, belajar untuk membuatnya!

Tinggi

Satu animasi muzik misterius yang memaparkan imej dari Carian Google secara dinamik secara real-time, dan imej yang dipaparkan adalah berdasarkan lirik lagu.

Hover Effects

Masa depan kesan hover datang dengan CSS3. Ramping dan menjanjikan.

Saya Am Joseph Barrett

CSS3 disatukan ke dalam ikon media sosial laman web portfolio. Ia bukan hanya menyeronokkan tetapi juga menunjukkan kreativiti pereka.

Zum Infinite

Animasi licin, juga cara yang baik untuk memamerkan portfolio anda. Zum total untuk 26 imej adalah 67108864: 1.

Kinect dan CSS3

“14 sendi badan dikesan dan diubah menjadi animasi CSS pendek menggunakan Xbox Kinect. Data badan dibawa masuk ke penyemak imbas yang diurai dan diubah menjadi animasi CSS dengan animatable.com.”

Matrix

Mahu menjadi sejuk seperti Matrix? Dengan CSS3, anda dapat membuatnya.

Kiub Morphing

Demi eksperimen meneroka CSS3 menggunakan transformasi 3D, animasi dan peralihan. Bahagian yang menarik di sini ialah anda masih boleh memilih teks pada unsur-unsur, walaupun mereka masih berputar.

Sistem Suria kami

Anda tidak memerlukan perisian mandiri yang mahal untuk membantu pelajar meneroka sistem solar lagi.

Duff Roll

“Mmmmmm ... .Homer akan menyukai bekalan bir yang tidak pernah berakhir.”

Bulatan Poster

Contoh yang mudah namun menarik untuk menunjukkan kepada anda cara menggunakan transformasi CSS dan animasi untuk mencapai kesan menarik.

Bahaya Pendeta

Siapa yang boleh menahan laman web dengan watak-watak yang sangat comel dan lucu animasi?

Rofox

Animasi lancar dan menyeronokkan, dapatkan kod sumber untuk mencuba sendiri!

Shaun The Sheep

“Tonton Shaun dan rakan-rakannya dalam klip dari 'An Ill Wind', 'Snowed In', 'The Big Chase', dan 'Twos Company' melalui percubaan interaktif yang dibuat dengan video HTML5 dipercepatkan, CSS CSS Transforms, dan WebM.”

Ruang

Mungkin ruang adalah batas muktamad untuk CSS3.

Ruang CaCSS

Buat kesan ajaib seperti ini tidak benar-benar keras dengan CSS3, kerana terdapat terutamanya hanya gradien berulang-radial dan saiz latar belakang terbabit. Variasi mungkin dengan jumlah tweak yang munasabah.

Star Wars Crawl

Kesan merangkak pembukaan Star Wars! Sama seperti epik sebagai CSS3.

Web Ekspresif

Web ekspres bukan hanya memperkenalkan anda tentang CSS3 dan sokongan pelayar, rujukan dan dokumentasi, tetapi juga mempamerkan animasi CSS3 yang mengetuk minda pada halaman webnya.

Surat-kepala

Menggunakan jenis untuk membuat bayangan yang kelihatan seperti wajah manusia, yang akan menganggapnya mungkin dengan CSS3?

The Man From Hollywood

Pernah melihat animasi yang menarik menggunakan tipografi tulen sahaja? Nah, anda boleh melakukannya dengan CSS3 juga.

Planetarium itu

Hanya demo epik untuk meneroka planetarium dengan butirannya. SVG, JavaScript, HTML5, CSS3, fon dan jenis terlibat.

Taipkan Hujan

“Ramalan untuk hari ini, dengan mengandaikan bahawa anda menggunakan penyemak imbas moden, adalah berawan, dengan peluang 100% mandi Georgia.”

Kesan tipografi

Selain butang, menu dan kesan hover, anda juga boleh mencapai kesan tipografi kreatif dengan CSS3. jQuery juga terlibat dalam demo ini untuk gaya huruf kata-kata.

Berjalan Dengan Andrew Hoyer

Yang paling penting, anda juga boleh belajar berjalan dengan Andrew Hoyer dalam artikel itu!

Wonder Webkit

Penggunaan CSS3 3D yang indah dengan pustaka Matrix JavaScript. Bunyi teknikal, tetapi hasilnya sejuk.

Zoetrope

Apa lagi yang anda tidak boleh lakukan dengan CSS3 apabila Zoetrope dimungkinkan dengannya?

Refleksi

Memberi inspirasi? Ya. Praktikal? Mungkin. Teknik animasi selalu merupakan subjek kepala menggaru untuk pemaju dan animator kerana ia memerlukan tahap pengetahuan tertentu untuk menghasilkan animasi yang benar-benar lancar, unik dan bergaya. Walaupun CSS3 mempunyai kemungkinan untuk melakukan animasi, itu tidak bermakna ia adalah alat yang sesuai untuk animasi. Saya fikir akhirnya ia masih mengenai keutamaan anda, seperti saya, saya baik-baik saja dengan kedua-duanya, selagi alat itu sesuai dengan keperluan projek.

Apakah pendapat anda mengenai animasi CSS3 ini? Adakah animasi CSS3 ini hanya baik sebagai eksperimen, atau ia juga boleh digunakan dalam reka bentuk web kehidupan sebenar? Seperti biasa, kami mengalu-alukan pemikiran berharga anda mengenai topik ini, dan maklumkan kami sekeping animasi CSS3 kegemaran anda juga!

Lebih banyak

Hanya mempamerkan, betul-betul? Anda berhak mendapat lebih banyak lagi! Di bawah adalah tutorial dan panduan CSS3 dari Hongkiat kepada anda, bersenang-senang menjelajah mereka!