7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Animation

15 esempi di animazioni CSS su CodePen da cui trarre ispirazione

Read Time: 3 mins

Italian (Italiano) translation by Roberta C (you can also view the original English article)

CodePen sta rapidamente diventando un punto di riferimento per mostrare cosa possiamo fare con le nostre creazioni web. Ecco un elenco di alcune delle grandi cose che alcune persone hanno recentemente creato con le animazioni CSS!

1. JavaScript Mickey Watch

Apple watch like Mickey watch di Jay Salvat (@jaysalvat).

Si tratta di un delizioso esempio di combinazione di transizioni CSS, grafica SVG e JavaScript per posizionare le mani su un orologio con la faccia di Mickey Mouse.

2. CSS sottomarino

Sottomarino con i CSS di Alberto Jerez (@ajerez).

Uno splendido uso del contenitore a forma di oblò circolare dà a questo sommergibile animato con il CSS un sacco di fascino.

3. ASCII AT-AT

AT-AT di Tim Pietrusky (@TimPietrusky).

Ispirato a Star Wars, AT-AT, disegnato utilizzando testo con i colori ciclati in CSS. Un effetto funky.

4. SVG/CSS Loader

Loader SVG/CSS di Bidji (@Bidji).

Questo loader cambia i colori per dare l'impressione di rotazione.

5. 3D CSS Tardis

3D CSS Tardis di Gerwin van Royen (@Gerwinnz).

Il CSS può essere utilizzato per creare incredibili effetti 3D. Ecco un effetto 3D:

6. Uccello che sonnecchia

Dozen Bird di Peter Klein (@pmk).

Semplice stilisticamente e con la giusta quantità di animazione questo uccello sonnecchiante da l'illusione della vita.

7. Bordo animanto in CSS

Bordo animato in CSS senza SVG di Rplus (@rplus).

Semplice ma molto efficace uso del CSS per creare un'animazione in stile loading.

8. Star Wars: The Force Awakens

Star Wars:  The Force Awakens in CSS di Donovan Hutchinson (@donovanh).

Il titolo del prossimo film di Star Wars creato usando un po' di JavaScript, HTML e CSS.

9. 3D Synth

Pure CSS 3D Synthesizer (mousedown for rotation)  di Nikolay Talanov (@suez).

Provare i tasti e ruotando questo synth 3D creato utilizzando i CSS. Lavoro straordinario:

10. CSS sistema solare

Cascading Solar System! di Tady Walsh (@tadywankenobi).

Un modello del nostro sistema solare, con velocità di rotazione in scala, lune e dettagli su ciascuno dei pianeti più grandi. Il sole è anche un'acquisizione diretta di quello reale!

11. Sitema solare in 3D

Full CSS 3D Solar System, di Wayne Dunkley (@waynedunkley).

Un altro sistema solare, ma questa volta in 3D. Bellissimo uso dell'ombreggiatura.

12. Flat Design Camera

Flat Design Camera con animazioni CSS di Damien Pereira Morberto (@damienpm).

Premere il pulsante di scatto su questa fotocamera piatta per vedere e creare una foto utilizzando animazioni CSS.

13. Giorno e notte transizione

Day Night simulation di Szymon Stypa (@Catagen).

Premere il pulsante per vedere il giorno trasformarsi in notte.

14. Animated Sprite con i CSS

Animate sprite with CSS di Avaz Bokiev (@samarkandiy).

Una dimostrazione di come una sequenza di immagini (sprite) può essere utilizzata per creare animazioni in stop-motion, completate con movimenti in avanti ed indietro.

15. Dodecaedro

Dodecahedron di wontem (@wontem).

Un dodecaedro sottile, bello, creato ed animato interamente con i CSS.

Conclusione

Non molto tempo fa, ci saremmo appoggiati a strumenti Flash o JavaScript per qualsiasi animazione nel browser. I browser moderni hanno un migliore supporto per i CSS, con hardware accelerato e l'animazione 3D.

Grazie a siti come CodePen, possiamo condividere e imparare più facilmente che mai. Quali sono le animazioni più stimolanti che hai visto di recente?

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.