Animación de nubes lluviosas en CSS

1. Introducción al curso: Entonces esto es lo que vamos a construir hoy en esta clase. Vamos a construir esta hermosa nube lluviosa. Como puedes ver, Harry crea un hermoso efecto de nube lluviosa. Se puede notar que las gotas de lluvia caen de la nube y después de caer al suelo, desapareció La vamos a construir hoy en esta clase. Hola. Mi nombre es John Sharkar y soy tu instructor para este proyecto Este hermoso proyecto de animación CSS sería una gran adición para su cartera. Aquí, necesitamos crear la nube usando CSS y también necesitamos crear estas gotas de lluvia y también necesitamos caer estas gotas de lluvia redbly Esto es lo que vamos a crear en este proyecto. Si te interesa aprender, comencemos. 2. Creación de la nube con CSS: Me alegro de verlos de vuelta, chicos. Este es el primer tutorial de este proyecto, y en este tutorial, vamos a crear la Nube. En la primera parte de este tutorial, vamos a crear esta hermosa nube usando CSS. Para crear este tipo de forma de nube, vamos a usar clases de Posido, como antes de la clase Posido. Sin hablar demasiado, saltemos al resultado Editor de código de Studio y comencemos el proyecto. Como pueden ver, lado a lado, abro mi editor de código de Result Studio y mi navegador usando la extensión de servidor en vivo, y ya creo el archivo TML de punto índice También creo estilo punto archivo CSS. Como puede ver, vinculamos nuestro archivo Style con este documento TML Como saben, necesitamos comenzar con la estructura de TMS. Al principio, voy a crear un contenedor, que va a contener Cloud y anillo. Voy a crear un contenedor de puntos clase D. Como puedes ver, creamos una clase llamada container, y luego dentro de este contenedor Dev voy a crear Cloud. Aquí voy a crear otra De Dev Cloud. Voy a establecer este archivo. Ahora voy a saltar a la sección de estilo, style dot archivo css. Al principio, voy a seleccionar la página del documento usando Universal select así soy tipo star. Después dentro de la Cali dice, primero, voy a usar propiedad de margen. Margen cero. Con eso, también, voy a usar padding, padding, también cero. Entonces voy a usar la propiedad de dimensionamiento de cajas, dimensionamiento de cajas, y aquí voy a usar Water box V. Por defecto, no hay margen tarde en este documento. Ahora voy a darle estilo a nuestra etiqueta corporal. Aquí voy a atar cuerpo. Después dentro de la cali resis, al principio, voy a usar esta propiedad, display display flex. Y a continuación, voy a usar Justificar contenido, Justificar centro de contenido. Además, necesitamos usar otra propiedad, alinear elementos. Alinear el centro de IMs. Si no estás familiarizado con Flexbox y la codicia, entonces puedes revisar mi curso. Entonces voy a decir altura mínima a esta página. Entonces, para escribir altura media, altura media, 100 VH. Nuestra siguiente propiedad es de fondo. Fondo, y voy a decir color de fondo. Si voy a decir algo de color gris oscuro. Gris oscuro. Quiero un poco de color más oscuro. Selecciono este color, éste, y voy a configurar este archivo. Este color es bueno por ejemplo, y puedes elegir tu propio color. Y ahora necesitamos darle estilo a la sección de contenedores. Voy a copiar este nombre de clase de contenedor. Y aquí, voy a escribir dot container. Luego dentro de la res coli, nuestra primera propiedad es la posición. Posición, realmente. Además, voy a decir altura a este contenedor, altura algo 400 pixel. Voy a poner este lado. Ahora necesitamos diseñar la porción de nube. Entonces para copiar el nombre de la clase cloud y luego un contenedor, soy slate dot Cloud. Entonces dentro de los cálices, nuestra primera propiedad es posición, posición relativa También lo voy a decir dentro de altura a esta nube con 320 píxeles. Y altura, 100 píxeles. Entonces voy a establecer color de fondo, fondo, y voy a usar fondo blanco. Para eso, voy a usar valor hexadecimal, tiene etiqueta F. Si configuro este archivo, como pueden ver, crea un rectángulo y necesitamos darle forma redonda. Por eso voy a usar la propiedad de radio fronterizo. Radio de borde, radio de borde, 100 píxeles. Vamos a poner el archivo y C. También voy a posicionarlo desde arriba. Aquí voy a usar propiedad top, top 50 pixel. Voy a configurar este para darle forma de nube, necesitamos usar el selector Posius. Aquí voy a crear un selector de posius para la nube, nube , colon colon antes Entonces dentro de los alivss voy a crear Blank contienen soso básicamente, voy a crear una copia de Siguiente propiedad es posición, posición, y esta vez, voy a usar absoluto Obsolt Next, quiero mover esta nueva nube a esta posición Para eso, necesitamos usar a la propiedad, top -50 pixel. Entonces voy a poner dentro de la altura a esta nube. Nosotros 110 pixel. Además, voy a establecer altura, altura, también 110 píxeles. Y luego voy a establecer el color de fondo. Fondo y para el color de fondo, voy a establecer también blanco. Voy a establecer este archivo. Ahora tenemos que darle forma redonda. Para eso, necesitamos usar radio fronterizo. Radio fronterizo, 50%. Voy a fijar esta. Para colocarlo en el medio, necesitamos mover este círculo lateral del labio. Aquí voy a usar propiedad lit, it, p 40 pixel. Si me satisface, se puede ver el resultado. Ahora aquí necesitamos crear otra forma de círculo para crear una nube perfecta. Para eso, voy a crear sombra de caja sólida. Déjame mostrarte cómo. Aquí voy a usar la propiedad de sombra de caja, sombra de caja. Al principio, necesitamos posicionar esta sombra. Desde arriba, voy a dar 90 píxeles. De derecha, voy a darle cero. De abajo, también voy a dar cero y de izquierda, voy a dar 30 pixel. Y por fin, voy a darle color sólido a esta sombra de caja. Entonces aquí, voy a escribir, tiene etiqueta, color blanco, si si si. Si configuro este archivo, puedes ver el resultado. Entonces, como puedes ver, creamos una forma de nube perfecta usando DML y CSS En la siguiente parte de este proyecto, vamos a crear en. Así que gracias por ver este video. Nos vemos en la siguiente parte. 3. Crea las gotas de lluvia y animalas con CSS: Entonces esta es la parte final de este tutorial. En esta sección, vamos a crear las gotas de lluvia y para crear las gotas de lluvia, vamos a tomar ayuda de variables CSS Y además, vas a tomar ayuda de CSS calc function Así que volvamos al editor de código de Visual Studio. En la parte anterior, creamos con éxito la Nube. Pero en esta parte, vamos a crear las gotas de lluvia. Entonces, sin perder el tiempo, empecemos. Al principio, voy a crear una etiqueta profunda que va a contener gotas de lluvia Punto profundo RL. Como puedes ver, creamos un elemento profundo con clase lluvia. Entonces dentro de este elemento profundo, voy a crear múltiples etiquetas span para nuestras gotas de lluvia Aquí, dentro de esta etiqueta profunda, voy a crear la etiqueta span. Entonces voy a usar atributo de estilo en este estilo de plan. Aquí voy a usar variables CSS. Sé que suena un poco avanzado, pero es bastante efectivo borrar una variable CSS, necesitamos usar papás sine Déjame mostrarte cómo dash y nuestro nombre de variable es I. Entonces necesitamos usar dos puntos. Entonces necesitamos usar frío para establecer nuestra variable. Después de dos puntos necesitamos aportar el valor. Por valor aquí voy a escribir un número aleatorio, algo 11. Total, voy a usar 20 gotas de lluvia, pero puedes usar tanto como quieras Voy a duplicar esta línea. Y aquí, voy a pasar 12. Entonces otra vez, voy a duplicar esta línea aquí voy a pasar diez. Se puede utilizar el número aleatorio, cualquier número aleatorio. Es un diez. Ahí lo duplican una vez más. Y aquí voy a usar 14. Entonces otra vez, voy a usar 18. Primero reenviemos esta sección para ahorrar tiempo. Y luego voy a duplicar de nuevo esta sección de trabajo. Yo creo 20 gotas de lluvia usando etiqueta span. Si configuro este archivo, como pueden ver , aquí nada es refugio. Ahora necesitamos darle estilo a las gotas de lluvia en nuestro archivo SSS. Quiero copiar el nombre de clase reinado en nuestro archivo de estilo, voy a seleccionar esta clase, Reg. Entonces dentro de la Calibra nuestra primera propiedad es posición, posición relativa Nuestra segunda propiedad es display, display flex. Y nuestra tercera propiedad es el índice Z. Índice Z uno. Ahora necesitamos darle estilo a las gotas de lluvia. Para eso, necesitamos seleccionar rain y Span tag. Para eso, necesitamos seleccionar etiqueta span, dot, rain, space, span. Luego dentro de los alias, nuestra primera propiedad es la posición relativa Nuestra siguiente propiedad es heightenith, height, ten pixel, also width, ten Ahora voy a decir diagrama de color a nuestras gotas. Aquí voy a usar propiedad de diagrama, fondo rojo. Fijemos el expediente y veamos qué pasó. Si configuro este archivo, como pueden ver, parece una línea de estado. Pero estas son las 20 gotas de lluvia. Agreguemos un poco de relleno a nuestra lluvia. Aquí voy a usar la propiedad padding, padding. Primero, para arriba e abajo, voy a usar cero, y para izquierda y derecha, voy a usar 20 píxeles. Si configuro este archivo, puedes ver el resultado. Entonces necesitamos como algún margen entre las gotas de lluvia. Para eso, necesitamos usar la propiedad de margen. Margen. Para arriba e abajo, voy a usar cero y de izquierda y derecha, voy a usar dos píxeles. Ahora puede ver que nuestros puntos de lluvia están perfectamente organizados, y ahora necesitamos mantener la forma redonda de los puntos de lluvia que necesitamos para usar la propiedad de radio de borde. Entonces aquí, voy a escribir radio fronterizo. Radio fronterizo, 50%. Vamos a configurar el archivo y podrás ver el resultado. Ahora, se envía para crear la animación. Entonces voy a usar la animación de propiedades de animación. Y nuestro nombre de animación es animado. Y nuestra duración de animación es de cinco segundos. Además, la dirección es lineal. Por fin, necesitamos proporcionar el conteo de iteraciones de animación, que es infinito porque quiero seguir rango de tiempo infinito Ahora, agreguemos el fotograma clave a esta animación. Escribo en los fotogramas clave rojos nuestro nombre de animación es animado Después dentro de los cálices primero en la posición 0%, voy a usar la propiedad transform, transform y quiero mover estos puntos rojos hacia abajo Por eso necesitamos usar translate Y. Traducir Y. Quiero comenzar nuestra animación de punto rojo desde la posición 0%. Por eso paso cero. De igual manera, voy a duplicar esta línea y en la posición del 70%, quiero moverla hacia abajo 300 píxeles. Por eso voy a pasar 300. También en la posición del 100%, quiero usar 300 píxeles. Vamos a configurar el archivo y ver si funcionó correctamente o no. Como puedes ver, la animación funciona perfectamente y traducimos propiedad Y, quiero usar propiedad de escala. Escala a 0% de posición, quiero escalarlo una vez. Entonces en la posición del 70%, quiero escalarlo una vez más, pero en la posición del 100%, quiero escalarlo a cero. Si configuro este archivo, ahora puedes ver el resultado. Como puede ver, cuando nuestras gotas de lluvia caen al suelo, desapareció, no volvió a la posición anterior porque usamos valor de escala cero en la posición del 100% Por eso desapareció cuando cayó al suelo. Ahora necesitamos cambiar la posición de origen de la transformación. Aquí voy a usar transform ors y voy a usar el peso inferior. Después escanea la parte más importante de este proyecto. Aquí se puede ver que las gotas de lluvia caen juntas, pero no quiero caer gotas de lluvia así Quiero que caigan las gotas de lluvia una por una, al azar. Y para ello, necesitamos jugar con la propiedad de duración de animación. Si cambiamos la duración de la anivación, entonces todas las gotas de lluvia caen una por una, Si recuerdas, como puedes ver en mi archivo ML, creamos nuestra etiqueta span con variable y nuestra variable lim es I y establecemos un valor aleatorio a esta variable, 16, 11, 12, etcétera Voy a usar este valor aleatorio para crear lluvia real. Vamos a llegar al archivo CSS y aquí, voy a usar la propiedad de duración de animación , duración de animación. También voy a usar la función Kels, que es una función de CSS Quiero dividir 15 segundos nosotros o variable I. Aquí voy a escribir donde entonces dentro las rotondas nuestra variable N es yo para llamar variable, necesitamos usar dash dash, entonces I. Si configuro este archivo, ahora puedes ver que nuestras gotas de lluvia están cayendo Me veo muy bonita y ahora se ve como gotas de lluvia reales necesitamos cambiar el color de las gotas de lluvia, y voy a usar el color blanco para Si configuro este archivo, ahora puedes ver que funciona perfectamente. Nuestro proyecto está casi terminado, necesitamos crear el terreno y para crear una porción de tierra en el lugar de muerte, necesitamos usar la propiedad del fondo de la frontera. Tenemos que encontrar un contenedor aquí voy a teclear border bottom. Y voy a usar borde de dos píxeles. Y además, quiero color sólido para nuestro borde, sólido, y nuestro border tlor es blanco, si si si Si configuro este archivo, puedes ver el resultado. Y también, necesitamos quitar las gotas de lluvia del fondo Entonces aquí, voy a escribir bottom ten pixel. Después de establecer este archivo, ahora ha funcionado perfectamente. Así que completamos con éxito nuestro proyecto de animación Rainy Cloud. Si te gusta este proyecto, por favor no olvides proporcionar tu opinión sobre Vov Muchas gracias.