Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Animación de nube en movimiento de CSS puro

En esta publicación, verás una animación realmente genial de nubes en movimiento, como la que se muestra en la siguiente demostración.
Hoy en día, muchos sitios web tienen animaciones de imágenes en movimiento. Este no es diferente. Este tipo de animaciones son bastante fáciles de codificar y las mostraré en tres simples pasos.

Paso 1

Para esta animación, tomé una imagen de nubes y la animé. Haz un div y dale a la imagen de la nube como imagen de fondo. Luego, encierra el div dentro de otro div que servirá como envoltorio div.
HTML
<div  id = "sky" > 
 <div  id = "nubes" > </div> 
</div>
CSS
#clouds  { 
 background-image :  url ('pic.jpg') ; 
 fondo - tamaño :  cubierta ; 
}

Paso 2

Dele a la imagen un ancho de división del 200% para que veamos solo el 100% (es decir, la mitad de la imagen) en la pantalla a la vez, para ver una imagen continua mientras la imagen se desplaza.
Dele  overflow: hidden al div externo para evitar la barra de desplazamiento horizontal (ya que el ancho del div de la imagen es dos veces el ancho de la pantalla).
CSS
#sky  { 
 desbordamiento :  oculto ; 
} 
#clouds  { 
 ancho :  200% ; 
 altura :  400 px ; 
 imagen de fondo :  url ('pic.jpg') ; 
 fondo - tamaño :  cubierta ; 
}

Paso 3

Ahora es tiempo de animación. Para eso,  @keyframes se usa la regla. La idea es colocar el extremo izquierdo de la imagen al  margin-left: 0px comienzo de la animación y al  margin-left: -100% final de la animación. Como efecto de esto, la primera mitad de la imagen es visible cuando comienza la animación, y la segunda mitad de la imagen es visible ya que la animación está 100% completa.
Finalmente, para hacer que la imagen dure para siempre, dele el valor  infinite a la propiedad  animationLlamé a la animación 'nubes en movimiento' y la duración de la animación fue de 25 segundos. Cuanto mayor sea la duración de la animación, menor será la velocidad de la animación.
Entonces, el código final se da a continuación.
HTML
<div  id = "sky" > 
 <div  id = "nubes" > </div> 
</div>
CSS
#sky  { 
 desbordamiento :  oculto ; 
} 
#clouds  { 
 ancho :  200% ; 
 altura :  400 px ; 
 imagen de fondo :  url ('pic.jpg') ; 
 fondo - tamaño :  cubierta ; 
 - webkit - animación :  movingclouds  25s  linear  infinite ; 
 - moz - animación :  movimiento de nubes  25s  lineal  infinito ; 
 - o -animación :  movimiento de nubes  25s  lineal  infinito ; 
} 
@Keyframes  movingclouds  { 
 0 %  { margin-left :  0% ;} 
 100 %  { margin-left :  -100% ;} 
}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas