Crea oggetti di caduta in CSS
Snow Example
CSS
Questo è il codice CSS che abbiamo utilizzato.
HTML
.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;}
.SnowExample.animation {}
@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 style="width: 100%; height: 300px; background-color: black; overflow: hidden; position: relative;">
<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
Nell'esempio ci sono quattro immagini più piccole, e due più grandi, sono impostate per muoversi a velocità diverse, che truccano l'occhio nel pensare di essere più vicini.
Dovrai anche usare una certa quantità di matematiche per ottenere il posizionamento e il timing corretto per la parte superiore, ad esempio l'immagine qui utilizzata è di 1198x999 pixel, in un div di 300 pixel di altezza.
La dimensione dell'immagine sullo schermo è impostata su 400px wide, quindi la posizione deve partire da almeno (400/1198) * 999 = 333 pixel sopra la parte superiore e passare 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 viene impostato a metà della larghezza dell'oggetto.
