Accentsconagua
Share
CodePen sta rapidamente diventando il punto di partenza per mostrare cosa possiamo fare con le nostre creazioni web. Ecco una lista di alcune delle cose straordinarie che le persone hanno creato recentemente con le animazioni CSS!
Nota: per ancora più ispirazione, dai un'occhiata al mio ultimo post:
Apple guarda come Mickey watch di Jay Salvat (@jaysalvat).
Questo è un bell'esempio di combinazione di transizioni CSS, grafica SVG e JavaScript per posizionare le mani su un simpatico quadrante di Topolino.
Sottomarino con CSS di Alberto Jerez (@ajerez).
L'uso stupendo del contenitore circolare a forma di foro porta dà a questo sottomarino animato da CSS un sacco di fascino.
AT-AT di Tim Pietrusky (@TimPietrusky).
Star Wars ha ispirato il personale AT-AT, disegnato utilizzando il testo con i colori riciclati in CSS. Un effetto funky.
Loader SVG / CSS di Bidji (@Bidji).
Questo caricatore utilizza i colori mutevoli per dare l'impressione di ruotare.
3D CSS Tardis di Gerwin van Royen (@Gerwinnz).
I CSS possono essere usati per creare alcuni incredibili effetti 3D. Ecco un tardis 3D:
Dozing Bird di Peter Klein (@pmk).
Lo stile semplice dell'arte e la giusta quantità di animazione danno a questo uccello assonnato l'illusione della vita.
Animazione del bordo CSS puro senza SVG di Rplus (@rplus).
Uso semplice e molto efficace dei bordi CSS per creare un'animazione in stile caricamento.
Star Wars: The Force Awakens in CSS di Donovan Hutchinson (@donovanh).
Il titolo del prossimo film di Star Wars creato utilizzando CSS, HTML e un po 'di JavaScript.
Pure CSS 3D Synthesizer (mousedown for rotation) di Nikolay Talanov (@suez).
Prova i tasti e ruotando questo synth 3D creato usando i CSS. Lavoro fantastico:
Sistema solare a cascata! di Tady Walsh (@tadywankenobi).
Un modello del nostro sistema solare, completo di velocità di rotazione in scala, lune e dettagli su ciascuno dei pianeti più grandi. Il sole è anche una cattura dal vivo della cosa reale!
Sistema solare 3D CSS completo di Wayne Dunkley (@waynedunkley).
Un altro sistema solare, ma questa volta in 3D. Bellissimo uso dell'ombreggiatura.
Fotocamera design piatto con animazione CSS di Damien Pereira Morberto (@damienpm).
Premi l'otturatore su questa fotocamera piatta per vederlo creare una foto utilizzando l'animazione CSS.
Simulazione Day Night di Szymon Stypa (@Catagen).
Premi il pulsante per vedere la trasformazione giorno in notte.
Animate sprite con CSS di Avaz Bokiev (@samarkandiy).
Una dimostrazione di come una sequenza di immagini (sprite) può essere utilizzata per creare animazioni stop-motion, complete di movimento in avanti e indietro.
Dodecahedron di wontem (@wontem).
Un dodecaedro sottile e bello creato e animato interamente con i CSS.
Anche le animazioni CSS sono una categoria in crescita sul mercato Envato. Se vuoi utilizzare gli effetti di animazione nei tuoi progetti, puoi trovare qualsiasi cosa, dalle ombre agli effetti di stazionamento delle immagini, lightbox e altro.
Animazioni CSS popolari sul mercato EnvatoNon molto tempo fa, avremmo appoggiato su strumenti Flash o JavaScript per qualsiasi animazione nel browser. I browser moderni hanno migliorato il supporto per i CSS, con accelerazione 3D e animazione hardware.
Grazie a siti come CodePen, possiamo condividere e imparare più facilmente che mai. Quali sono alcune delle demo di animazione più interessanti che hai visto di recente?
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
