Crear objetos en caída en CSS

Cómo crear objetos que caen en CSS

Snow Example

snowflakes

snowflakes

snowflakes

snowflakes

snowflakes

snowflakes

CSS

Hemos tenido algunos comentarios agradables sobre el tema de Navidad en el sitio, por lo que han decidido compartir el código. No vale la pena repasar un artículo que ya se explica muy bien, así que aquí hay un enlace a http://www.w3schools.com/css/css3_animations.asp .
Este es el código CSS que hemos usado.

HTML

<style type="text/css">
.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

Hay cuatro imágenes más pequeñas en el ejemplo, y dos más grandes, que se establecen para moverse a velocidades diferentes, lo que engaña al ojo a pensar que están más cerca.

También tendrá que utilizar una cierta cantidad de matemáticas para obtener el posicionamiento y el momento correcto para la parte superior, por ejemplo la imagen utilizada aquí es 1198x999 píxeles, en una división de 300 píxeles de alto.

El tamaño de la imagen en la pantalla se establece en 400px de ancho, por lo que la posición debe comenzar desde al menos (400/1198) * 999 = 333 píxeles por encima de la parte superior, y pasar a la nueva altura de la imagen más la altura div 333 300 = 633.

También hay un ejemplo de cómo centrar un objeto cuando la posición se establece en absoluto. Se fijan a 50% a la izquierda y, a continuación, el margen izquierdo se establece en la mitad del ancho del objeto.