Crea oggetti che cadono in CSS3
Esempio di neve
CSS
Cosa sono le animazioni CSS?
Un'animazione consente a un elemento di cambiare gradualmente da uno stile all'altro.
Puoi modificare tutte le proprietà CSS che desideri, tutte le volte che vuoi.
Per utilizzare l'animazione CSS, devi prima specificare alcuni fotogrammi chiave per l'animazione.
I fotogrammi chiave contengono gli stili che l'elemento avrà in determinati momenti.
Non ha senso ripassare un articolo che è già spiegato molto bene, quindi c'è un link alla pagina qui sotto.
Questo è il codice HTML e CSS che abbiamo utilizzato.
HTML & CSS
<style type="text/css">.snowContainer{width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;}.snowExample{position: absolute; top: -450px; opacity: .5; text-align: center;animation: SnowExampleSlide ease-in infinite;-webkit-animation: SnowExampleSlide ease-in infinite;-moz-animation: SnowExampleSlide ease-in infinite;-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-webkit-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}@-moz-keyframes SnowExampleSlide {from {position: absolute; top: -450px;} to {position: absolute; top: 633px;}}</style><div class="snowContainer"><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 0s;animation-delay: 0s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 1s;animation-delay: 1s;-webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 400px; -webkit-animation-delay: 3s;animation-delay: 3s; -webkit-animation-duration: 4s;animation-duration: 4s; left:50%; margin-left: -200px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 0s;animation-delay: 0s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /><img alt="snowflakes" src="/Articles/CSS/Create-Falling-Objects-in-CSS/ClaytabaseSnow.png" class="snowExample" style="width: 500px; -webkit-animation-delay: 2s;animation-delay: 2s; -webkit-animation-duration: 5s;animation-duration: 5s; left:50%; margin-left: -250px;" /></div>CSS
Ci sono quattro immagini più piccole nell'esempio e due più grandi, sono impostate per muoversi a velocità diverse, il che induce l'occhio a pensare che siano più vicine.
Dovrai anche usare una certa quantità di matematica per ottenere il posizionamento e la tempistica corretti per la parte superiore, ad esempio l'immagine utilizzata qui è 1198x999 pixel, in un div di 300 pixel di altezza.
La dimensione dell'immagine sullo schermo è impostata su 400px di larghezza, quindi la posizione deve iniziare da almeno (400/1198)*999=333 pixel sopra la parte superiore e spostarsi alla nuova altezza dell'immagine più l'altezza div 333+300 =633.
C'è anche un esempio di come centrare un oggetto quando la posizione è impostata su assoluto. Sono impostati al 50% a sinistra, quindi il margine sinistro è impostato a metà della larghezza dell'oggetto.
