38 Inspiranti demo di animazione CSS3

Dall'introduzione del CSS3, ci sono davvero molti dibattiti sulle sue possibilità e usabilità. Tuttavia, ci sono anche molti esperimenti interessanti fatti a mano per esplorare il suo potenziale. Sebbene gli esperimenti con qualsiasi mezzo non provino l'usabilità del CSS3, hanno davvero mostrato le reali possibilità del CSS3, in una misura in cui i maggiori sviluppatori credono che il CSS3 sia il futuro.

È vero? Giudicalo con i tuoi occhi. In questa vetrina non mostreremo nulla ma solo 38 ispirando demo di animazione basate su CSS3 che scopra puramente il vero potenziale del CSS3. Oltre ai puri esperimenti, vedrai anche alcuni esempi pratici di come i CSS3 possono essere applicati al web design per renderlo più dolce e più sexy.

Basta dire, esploriamo il fantastico mondo dei CSS3!

Potresti anche essere interessato a:

• Guida per principianti al CSS3
• Creazione di una casella di ricerca CSS3 oscillante
• Creazione di pagine Web HTML5 / CSS3
• Grazioso menu di navigazione Breadcrumb nel CSS3
• Creare un modulo di contatto HTML5 / CSS3 basato su Ajax
• 35 Grafica costruita esclusivamente con CSS3
• Di Più…

Si consiglia vivamente di visualizzare queste demo utilizzando l'ultima versione di Safari o la versione per sviluppatori di Google Chrome. La maggior parte delle demo supporta l'ultima versione di Firefox e Google Chrome, però.

Elica 3D animata

Il primo della lista è un'incredibile animazione realizzata da Marcofolio.net, che usa trasformazioni 3D CSS3. L'animazione sembra la stessa magia, ma puoi effettivamente imparare a creare l'effetto simile con il tutorial nell'articolo!

Pulsanti animati

Un must-see per il web designer, in quanto la demo non solo mostra le possibilità dell'animazione CSS3, ma fornisce anche effetti pulsante molto interessanti e pratici per l'ispirazione!

Menu di animazione

Stai cercando di rendere più vivaci e creativi i menu di animazione? Questa demo è per te.

AT-AT Walker

Una demo di animazione che mostra il potenziale di CSS3 nell'animazione di un'unità con parti del corpo.

Battlefield CSS3

Battlefield CSS3 con un sacco di esplosioni e colpi di pistola!

Grande affare

È l'animazione liscia e piacevole che ha reso questa demo un grosso problema.

Can Haz Ur Cursor?

“Ciao, sono il Mostro del Cursore. Mio padre ha un messaggio per te: 'Per favore, non usare cursore: nessuno, tranne se crei un cursore che mangia mostro '.”

Dock CSS

Un esperimento sexy che imita il dock di Mac OS X ed è davvero fluido.

CSS3 Man

Guarda, ecco che arriva l'uomo CSS3! Esempio perfetto per mostrare il vero potenziale dell'animazione CSS3.

Dribbble Ball Bouncing

Con il minimo uso di trucchi grafici, arriva un'animazione CSS3 piacevole e divertente.

Dulla

Dulla mostra praticamente una delle tecniche più comuni utilizzate per creare un gioco platform in 2D, che ora è possibile anche con CSS3.

Animazione fotogramma per fotogramma

Animazione fotogramma per fotogramma con CSS3? Nessun problema!

Animazione grafica

Un'animazione semplice ma potente per mostrare / spiegare il grafico nel tuo sito, imparare a farlo!

alto

Un'animazione musicale misteriosa che mostra dinamicamente le immagini di Ricerca Google in tempo reale e le immagini visualizzate sono basate sui testi delle canzoni.

Effetti al passaggio del mouse

Il futuro dell'effetto hover arriva con CSS3. Elegante e promettente.

Sono Joseph Barrett

CSS3 integrato nelle icone dei social media del sito del portfolio. Non è solo divertente ma mostra anche la creatività del designer.

Zoom infinito

Animazione fluida, anche un bel modo per mostrare il tuo portfolio. Lo zoom totale per le 26 immagini è 67108864: 1.

Kinect e CSS3

“14 articolazioni del corpo sono tracciate e convertite in una breve animazione CSS utilizzando Xbox Kinect. I dati del corpo vengono portati nel browser dove vengono analizzati e convertiti in animazioni CSS con animatable.com.”

Matrice

Vuoi essere bello come Matrix? Con il CSS3 sei in grado di farlo.

Morphing Cubes

Demo sperimentale che esplora il CSS3 utilizzando trasformazioni, animazioni e transizioni 3D. La parte interessante qui è che puoi ancora selezionare il testo sugli elementi, anche quando stanno ancora ruotando.

Il nostro sistema solare

Non hai bisogno di costosi software standalone per aiutare gli studenti a esplorare più il sistema solare.

Duff Roll

“Mmmmmm .... Homer amerebbe la scorta infinita di birra.”

Poster Circle

Un esempio semplice ma interessante su come utilizzare la trasformazione e l'animazione CSS per ottenere effetti interessanti.

Reverendo pericolo

Chi può resistere a un sito Web con personaggi davvero carini e animazioni divertenti?

Rofox

Animazione semplice e divertente, ottieni il codice sorgente per provarlo da solo!

Shaun The Sheep

“Guarda le buffonate di Shaun e dei suoi amici nelle clip di "An Ill Wind", "Snowed In", "The Big Chase" e "Twos Company" attraverso un esperimento interattivo creato con video HTML5 con accelerazione hardware, 3D CSS Transforms e WebM.”

Spazio

Forse lo spazio è il limite finale per CSS3.

Spazio CaCSS

Creare effetti magici come questo non è molto difficile con i CSS3, poiché ci sono principalmente solo ripetendo-radiale gradiente e background-size coinvolti. Le variazioni sono possibili con una quantità ragionevole di modifiche.

Scansione di Star Wars

Effetto crawl dell'apertura di Star Wars! Proprio epico come i CSS3.

Il Web espressivo

Il web espressivo non ti introduce solo sul CSS3 e sul suo supporto, riferimento e documentazione del browser, ma mostra anche un'animazione CSS3 strabiliante sulla sua pagina web.

I capi delle lettere

Usando i tipi per creare un'ombra che assomiglia al volto umano, chi avrebbe pensato che sarebbe stato possibile con i CSS3?

The Man From Hollywood

Hai mai visto quelle animazioni attraenti usando solo pura tipografia? Bene, puoi farlo anche con CSS3.

Il planetario

Demo semplicemente epico sull'esplorazione del planetario con dettagli. SVG, JavaScript, HTML5, CSS3, tipi di carattere e tipi sono coinvolti.

Digita Piogge

“Le previsioni per oggi, supponendo che tu stia utilizzando un browser moderno, sono torbide, con una probabilità del 100% di precipitazioni in Georgia.”

Effetti tipografici

Oltre ai pulsanti, al menu e al passaggio del mouse, puoi anche ottenere effetti di tipografia creativi con CSS3. jQuery è anche coinvolto in questa demo per lo stile delle lettere delle parole.

Camminando con Andrew Hoyer

Meglio ancora, puoi anche imparare a camminare con Andrew Hoyer nell'articolo!

Wonder Webkit

Un meraviglioso uso delle trasformazioni 3D di CSS3 con la libreria di JavaScript Matrix. Sembra tecnico, ma il risultato è incredibilmente interessante.

Zoetrope

Che altro non si può fare con CSS3 quando Zoetrope è possibile con esso?

Riflessione

Inspiring? sì. Pratico? Forse. La tecnica di animazione è sempre un argomento che graffia la testa per sviluppatori e animatori in quanto richiede un certo livello di conoscenza per produrre un'animazione davvero fluida, unica ed elegante. Mentre CSS3 ha la possibilità di fare l'animazione, non significa che sia uno strumento adatto per l'animazione. Penso che alla fine si tratti ancora delle tue preferenze, per quanto mi riguarda, sono d'accordo con entrambe, purché lo strumento si adatti alle esigenze del progetto.

Qual è il tuo pensiero su queste animazioni CSS3? Queste animazioni CSS3 sono valide solo come esperimenti o possono essere applicate anche al design Web reale? Come al solito, accogliamo con favore il vostro prezioso pensiero sull'argomento e fateci sapere anche il vostro pezzo preferito di animazione CSS3!

Di Più

Basta mostrare, davvero? Hai meritato di ottenere di più! Di seguito sono riportate le esercitazioni e le guide di CSS3 da Hongkiat per te, divertiti a esplorarle!