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?
By
