Domina los proyectos de animación con CSS (12 proyectos reales)

1. INTRODUCCIÓN: Me alegro de verlos de vuelta, chicos. Una vez más, estoy de vuelta con un nuevo proyecto de animación CSS relacionado con clases . Hoy en esta clase, vamos a cob Cotter 12 proyecto de animación Vamos a comenzar con el efecto de carga giratoria usando animación CSS pura. Entonces vamos a aprender animación de autos de conducción sencilla. Después de eso, vamos a crear esta sencilla animación de rotación de texto. Entonces vamos a crear esta animación de botón Herm cuando pase el cursor sobre él, como pueden ver, agite el Con eso, también, voy a crear otro botón Hover animation, efecto de iluminación de texto usando animación PoCSS, animación rotación de luna alrededor de la órbita Entonces vamos a aprender el texto de animación reflectante benéfico. Este texto también es benéfico. Si trato de eliminar este texto y puedes poner nuevo texto aquí, como hola mundo. Entonces vamos a aprender tres D animación de círculo ondulado, tres D carga de animación de rotación, proyecto de animación Rainy Cloud. Además, voy a cubrir esta animación de carga de texto. Estos son los proyectos que voy a cubrir en esta clase. Espero que disfrutes de todos estos proyectos. Empecemos. 2. Efecto de carga de Rotationg con animación css: Hola a todos. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación CSS. Hoy en este proyecto, vamos a construir esta hermosa animación de carga usando rotar X y rotar el valor Y en tres entornos D. Veamos cómo podemos construir esta animación. Como puedes ver, primero, gira la animación a YXS 180 grados, luego va a rotar la animación XXS e YXS Veamos cómo podemos construir. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión Live Server y ya creo un documento TML llamado IndexoTeTML Con eso, ya creo archivo CSS estilo y vinculo el archivo CSS de estilo con este documento Al principio, dentro de la etiqueta corporal, voy a tomar una etiqueta profunda, carne de res y voy a asignar una clase y nuestro nombre de clase es Lodi Después saltaré al archivo CSS de estilo y primero, voy a darle estilo a la sección del cuerpo. Cuerpo, luego dentro del CalibraSF voy a asignar altura Altura, voy a asignar 100 viewport para height y luego voy a usar la propiedad, de esta manera flex Este flex, entonces voy a usar la propiedad llamada justify content, Justify content center porque quiero colocar el centro de alineación de esta página. Entonces voy a usar align align items center. Después de eso, voy a usar fondo, color de fondo. Quiero usar fondo gris oscuro. Entonces utilizo este código de color, tiene pista 222, y voy a configurar este archivo establecer este archivo, así es como se veía. Ahora apuntemos al elemento usando su nombre de clase. Entonces escribe carga de puntos. Cargando dentro de la Calibra dice, aquí, voy a usar la propiedad, la propiedad llamada Wi Wi 100 pixel Entonces voy a usar la propiedad height, height también 100 pixel y color de fondo, color fondo, y voy a usar Daground color blanco Después de eso, voy a asignar poco radio fronterizo. Radio de borde, quiero un radio de borde de 12 píxeles desde cada una de las esquinas. Ahora a s este archivo, se puede ver el resultado. radio de borde QillPixel proporciona un hermoso y agradable boder redondeado Ahora, trabajemos en el fotograma clave de animación. Es a la tasa de fotogramas clave. Y nuestro nombre de animación es, por ejemplo, loading. Después dentro de este fotograma clave, voy a sumar la primera etapa 0% a 0% posición al 0% de tiempo, dentro de la fría resis Aquí voy a usar transformar propiedad, transformar y transformar rotar X cero DG. Entonces ven rotar Y, rotar, Y. También, voy a pasar cero DG. Se va a iniciar la animación desde su posición original. Entonces voy a saltar a la segunda etapa de animación, así que duplico esta línea y al 50% del tiempo, quiero rotar esta animación a Xs es cero grados pero quiero rotar esta animación, YxS 180 grados 18 DG Al 50% de duración de la animación, va a rotar este elemento a YxS 180 grados Entonces en etapa final al 100% de animación, déjame mostrarte al 100% de duración, quiero rotar este elemento al XX es de 180 grados. Además, quiero rotar el mismo elemento en YX es de 180 grados Voy a establecer este archivo. Entonces voy a llamar a esta animación en mi selección. Voy a escribir animación. Primero, voy a proporcionar el nombre de la animación que se está cargando. Entonces voy a proporcionar la duración de la animación, que es a segundo a a. a continuación, tenemos que proporcionar la función de sincronización de animación que es lineal. Finalmente, necesitamos pasar el recuento de iteraciones de animación. Quiero ejecutar esta animación por tiempo infinito. Voy a pasar infinito. Como puedes notar, aquí trabajamos con el valor de rotar x y rotar el valor Y, esta función de dos y es trabajo en tres ambientes. Por eso necesitamos usar la perspectiva al respecto para entenderlo mejor. Voy a saltar a la sección del cuerpo y aquí voy a agregar perspectiva. Perspectiva perspectiva, y voy a decir prospectiva de 200 píxeles. Ahora después de configurar este archivo y volver a cargar mi navegador, así es como se ve nuestra animación Así es como gira el elemento. Primero, va a rotar el elemento a YXS 180 grados, luego va a rotar el elemento, XX es 180 grados, también YXS 180 Por eso crea este hermoso efecto de carga. Espero que ahora te quede claro cómo podemos construirlo. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 3. Animación de un coche de conducción: Hola a todos. En esta lección, vamos a crear esta hermosa y agradable animación infinita. Como pueden ver, tenemos un auto y una moto en esta cabalgada. La idea detrás en este ejemplo es muy sencilla. Tenemos una imagen de fondo que es esta cabalgada tenemos a dos imágenes, una para el auto y otra para la moto, y las imágenes del auto y la moto no se mueve. Movemos el fondo de lado izquierdo a lado derecho y nos da este hermoso efecto de conducción. Veamos cómo podemos construir esta animación. Entonces como pueden ver, finalmente, estoy en mi coordinador de Visual Studio, y ya creé un documento TML index dot HTML Con eso, ya creo este archivo CSS de estilo punto. Y como puedes ver en mi directorio de trabajo actual, tenemos múltiples imágenes. Tenemos imagen de imagen de fondo. Esta es nuestra imagen de fondo principal, y me uno a esta imagen de fondo varias veces y creo una nueva imagen de fondo. Y aquí me uno a esta imagen de fondo múltiples veces y amplío el ancho de esta imagen. Para que podamos manejar nuestros vehículos en esa carretera. Vamos a saltar a otra imagen, que es la imagen del coche. Voy a utilizar este auto imagen PNG. Además, tengo otro vehículo que es esta moto. Voy a agregar la imagen de moto y auto en esta carretera y vamos a mover solamente la imagen de fondo. Volvamos al archivo de punto índice. Al principio, dentro de mi etiqueta corporal, voy a crear una etiqueta profunda, tejer eso, y voy a asignar un fondo de clase. El interior de esta etiqueta dip, voy a tomar dos imagen imagen IMG Como fuente, voy a pasar tarjeta cimag, y además voy a asignar una clase y a nuestra clase Nombre es tarjeta Entonces duplico esta línea y aquí voy a agregar la imagen de moto, moto. Y es una moto. Entonces voy a configurar este archivo. Después configuré este archivo, si te muestro mi navegador, y ya abro mi navegador usando mi servidor en vivo. Entonces, si te muestro mi navegador, así es como se ve. Ahora, en nuestro elemento de fondo, necesitamos agregar la imagen de fondo. Volvamos a los usuarios a tu código, y voy a saltar al archivo estilo punto CSS, y voy a comenzar nuestro estilo. Al principio, voy a seleccionar el cuerpo de la etiqueta corporal. Dentro del Cariss la primera probidad, voy a usar Margen, Margen cero El segundo probit, voy a usar el emparejamiento. Relleno también cero. Voy a establecer este archivo. Después de eso, voy a trabajar en el fondo. Voy a trabajar en el elemento fondo profundo, así que voy a copiar su nombre de clase, fondo y volver al archivo CSS styler Voy a seleccionar este fondo profundo usando su nombre de clase. Entonces voy a asignar altura, altura, y voy a asignar 100 altura de ventana gráfica Entonces voy a asignar fondo, fondo, y voy a usar URL. URL y dentro de ella, me paso la imagen de fondo. ¿Qué imagen de fondo esta imagen de fondo? Esta larga imagen de fondo. Jamón tipo fondo tres BG tres a JPG. Entonces necesitamos posicionar este trasfondo. Posición de fondo, y quiero posicionarlo desde abajo, abajo iluminado. Voy a establecer este archivo. Después de configurar este archivo, vamos a llegar al navegador. Así es como se ven nuestros antecedentes. Ahora necesitamos colocar esta moto y el auto en la posición correcta. Para eso, necesitamos darle estilo al auto. Al principio, voy a darle estilo al carro carro. Voy a usar su nombre de clase. Después dentro del calibre dice, primero, voy a definir la posición. Posición, voy a hacerla absoluta. Entonces voy a definir desde el final, quiero colocarlo 300 pixel. Desde abajo, quiero colocarlo 250 pixel. Y también, voy a definir el ancho de este carro Ancho. Aquí voy a definir el ancho de esta imagen de auto, y voy a decir 500 píxeles. De la misma manera, voy a posicionar la moto. Para eso, voy a usar su nombre de clase. Copio el nombre de la clase y agrego al archivo CSS de estilo, y voy a seleccionar la imagen de moto. Entonces dentro de los calibrosSF queremos definir la posición posición, que es la posición absoluta Aquí usamos posición absoluta porque no vamos a mover una imagen de auto y moto. Por eso usamos posición absoluta y desde la izquierda y desde la izquierda, quiero colocarla 1,100 pixel y desde abajo, quiero colocarla 360 pixel Además, voy a definir el ancho de esta imagen. Ancho, voy a hacer que sea de 250 píxeles. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador, así es como se veía. Creo que necesito ajustar un poco la imagen de este auto. Volvamos al código otra vez y desde abajo, voy a hacer que sea 250, no 150. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador otra vez, así es como se ve. Ahora, colocamos nuestro auto y la moto en la posición correcta. Ahora tenemos que ejecutar la animación. Tenemos que correr la vuelta inferior hacia abajo a la derecha. Quiero decir que necesitamos mover este fondo de la vuelta inferior a la posición inferior derecha, y nos va a dar este hermoso efecto de animación. Déjame mostrarte cómo. Entonces como puedes ver, aquí definimos la posición de fondo, lifting de fondo. En nuestra animación, necesitamos moverla abajo a la derecha. Definamos un fotograma clave. Así que t en los fotogramas clave rojos y nuestro nombre de fotograma clave está impulsando la conducción y dentro del Clss voy a usar Dentro del receso cl, solo quiero cambiar la posición de fondo. Posición de fondo, y vamos a comenzar desde la posición inicial, así que voy a usar el mismo valor, abajo a la izquierda. Copia este valor y lo voy a pegar aquí. Y luego duplico esta línea, y quiero moverme hacia arriba, así que voy a usar dos Qard, y esta vez, quiero moverme hacia arriba a la esquina inferior derecha Abajo a la derecha. Voy a sub esta pila. Después de establecer este archivo, necesitamos llamar a esta animación en nuestra selección. En nuestros antecedentes, quiero ejecutar esta animación. Voy a usar la animación de la propiedad de animación y nuestro nombre de animación está impulsando. Entonces necesitamos proporcionar la duración de la animación que es de diez segundos. Entonces necesitamos proporcionar la dirección de animación, que es lineal. Y también necesitamos proporcionar el tiempo de animación. Cuántas veces queremos ejecutar esta animación y quiero ejecutar esta animación por tiempo infinito, así que voy a usar infinito. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador, como pueden ver, se ejecuta mi animación. Así es como podemos ejecutar cualquier animación de conducción. Solo necesitamos mover el fondo, y no necesitamos mover nuestros objetos como el auto, de lo contrario la moto. Solo hay que mover el fondo de otro lado a otro lado. Aquí solo movemos este fondo de lado izquierdo a lado derecho y nos da este hermoso efecto de conducción. Entonces espero que ahora te quede claro. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 4. Animación de rotación de texto: Hola a todos. Una vez más, estoy de vuelta con otro proyecto CSS. En este proyecto, vamos a crear esta toma a la animación rotador Como puedes ver, primer tipo, me encanta la transformación CSS, transición y la animación CSS. Ahora veamos cómo podemos cambiar el texto usando la animación Hl op CSS, no por el JavaScript. Vamos a saltar al editor de código de isults Studio. Como pueden ver, lado a lado, abro mi editor visual de código Studo y mi navegador usando extensión del servidor Lip y ya creé un documento TML nombre índice punto HTML Con eso, creo este estilo de archivo estilo CSS. Al principio, dentro de la etiqueta body, voy a tomar H una etiqueta encabezando W y tipo Hebru, me encanta CSS Y luego voy a tomar una etiqueta, span. Entonces dentro de la etiqueta span, demonios, no voy a escribir nada. Por ahora, está vacío, pero va a contener animación, transición y transformación. Pero los vamos a agregar usando CSS, no por el TML Ahora para configurar este archivo, es como se ve. Y ahora tenemos que saltar al archivo CSS de puntos de mosaico. Al principio, al principio, voy a darle estilo a la etiqueta corporal. Cuerpo, luego dentro de las maldiciones, primero, voy a asignar altura, altura, y voy a establecer altura, 100 altura de ventana gráfica Entonces voy a asignar de esta manera. Las películas de visualización justifican el centro de contenido porque quiero alinear este gusto horizontal y verticalmente al centro de esta página Entonces voy a intentar alinear elementos también al centro. Después de eso, aquí voy a definir color de fondo, color de fondo, y voy a configurarlo color gris oscuro, etiqueta 222, esta, y voy a configurar este archivo. Up configurar este archivo, así es como se veía. Ahora voy a cambiar el color del texto. Voy a apuntar a la etiqueta H one usando su nombre de etiqueta H one y herund asignar color Y quiero usar blanco color blanco. Con eso, también, voy a definir el tamaño de fuente. Tamaño de fuente, y quiero una fuente un poco más grande así que voy a hacer que sea de 40 píxeles. Creo que 40 pixel es bueno para mi. Sí. Y luego voy a apuntar a la etiqueta span, y quiero crear un elemento antes antes de pseudo elemento Entonces escribe, abarcan dos puntos antes. Entonces dijiste los clivss aquí voy a pasar el contenido que quiero agregar Algunos tipos contienen dos puntos y quiero agregar dentro de los códigos individuales, y quiero agregar transición, primer lugar, así que escriba transición. Entonces precip este archivo, aquí está. Me encanta la transición CSS. A continuación, voy a asignar transformación de texto, texto, transformar mayúsculas Además, voy a definir el área de familia de fuentes de la familia de fuentes. Voy a configurar este archivo para el color color del texto, voy a usar este valor hexa, este color azul y voy a configurar este archivo Ahora quiero cambiar la palabra transición. Podemos hacerlo usando animación. Voy a crear animación en el keyframe rojo nuestras animaciones word switch Interruptor de palabra dentro del carro resis. Ahora, dentro del fotograma clave al 0% del tiempo de animación, estoy tecleando 0% dentro del auto resis, me gustaría cambiar el contenido, pero me gustaría ir con la misma transición de contenido de valor Yo tipo contenía dos puntos y soy transición de tipo. Entonces vamos a hacer en esta línea. Después de eso, duplico esta línea al 50% del tiempo de animación, 50% de duración, animación Hemotyp, y al 100% de duración, voy a cambiar la transformada de hemotipo contag En lugar de usar animación, voy a reemplazarla con transform. Voy a establecer este archivo. Después de establecer este archivo, voy a llamar a esta animación Word switch, copiar el nombre de la animación. Voy a llamar a esta animación dentro de esta etiqueta span, span antes pseudo elemento Entonces t animación y nuestro nombre de animación es Wordswitch y la duración de la animación es de cinco segundos Además, quiero ejecutar esta animación por tiempo infinito, así que voy a usar valor infinito. Voy a establecer este archivo. Después de establecer este archivo, aquí puedes ver el resultado. En 5 segundos completa la animación. Primero, propina animación, transición, luego escribe animación. Me encanta la animación CSS y luego pasa y luego la animación tip transform. Si aumento la velocidad, entonces voy a reducir el tiempo, voy a hacer que sea dos segundos y luego establecer este archivo. Ahora puedes ver que cambió rápidamente. Transición de transformación de animación. Así es como podemos crear este efecto. Espero que esté claro para ti. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 5. Botón animado con animación css: Hola a todos. En este tutorial, vamos a crear esta fuga, esta fuga animada. Ahora bien, si le echas un vistazo, tenemos un fondo rojo y tiene específico ancho y sesgamos este elemento un poco de ingenio También se mueve de izquierda a derecha de lado continuamente. Tiempo infinito, va a ejecutar la animación. Pero siempre que si pongo el cursor sobre este elemento, déjame mostrarte si pongo el cursor sobre este elemento, ahora puedes ver que detiene la animación Además, el botón se llenó con este fondo rojo. Extiendo el ancho de este elemento sesgado y cubro todo el botón Esto es lo que vamos a crear en este proyecto. Espero que disfrutes. Es un proyecto muy sencillo y fácil. No es muy difícil. Así que vamos a saltar al editor de código de estudio de usuario. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión if server, y ya creo un documento HTML llamado index dot TML Con eso, creo el archivo Stylo CSS. Por ahora, es un vacío. Ahora dentro de la etiqueta corporal aquí, voy a tomar una etiqueta de ancla, A, y aquí, voy a escribir Hover me Aplícalo para configurar este archivo, aquí puedes ver el enlace en mi navegador. Pero necesitamos darle estilo a este vínculo. Para eso, tenemos que ir a saltar a este estilo de archivo CSS punto. Al principio, voy a empezar a peinar con body tag, algún tipo body. Ahí dentro del Cli vers está la primera propiedad que voy a usar altura Voy a definir una altura, y para altura, voy a amarrar 100 VH, poner altura. Entonces voy a definir display y voy a hacerlo de lino Mostrar escamas y justificar el centro de contenido alinear elemento, alinear elementos también centrados. Cualquiera que sea el elemento que pasemos dentro de esta etiqueta corporal, va a centrar vertical y horizontalmente este elemento. Después de eso, también voy a pasar un color de fondo color de fondo aquí voy a usar dray color de fondo Entonces el tipo tiene etiqueta 222, y voy a configurar este archivo. Después de configurar este archivo, verá el resultado. Como te dije, horizontal y verticalmente, va a centrar el elemento de esta página en esta página. A continuación, voy a estrellar la etiqueta de ancla. Entonces escribe A, luego dentro del clirassF voy a quitar el subrayado de este texto, algún tipo texto, decoración Voy a hacerlo monja. Voy a configurar este archivo, se puede ver que quita el subrayado Después de eso, voy a hacerlo visible algún tiempo, color. Voy a hacerlo blanco. También, pelo, voy a definir tamaño de fuente, tamaño fuente, y voy a hacer que sea de 40 píxeles, creo que 40 píxeles es suficiente para el ejemplo. A continuación, I'm going to define la familia de fuentes, familia de fuentes. Aquí voy a usar sensorial. Después de eso, voy a definir frontera, frontera. Quiero tres píxeles, borde sólido, sólido, y nuestro color de borde también es blanco. Entonces voy a configurar este archivo. Después de configurar este archivo, así es como se ve nuestro botón. Después de eso, necesitamos agregarle un poco de relleno. Así que ese relleno así de arriba e abajo, voy a pasar 40 píxeles y de izquierda y derecha, voy a pasar 80 píxeles. Entonces voy a hacer posición. Posición, voy a hacerla relativa. Después de eso, voy a definir desbordamiento. Desbordamiento oculto. Voy a establecer este archivo. Después de configurar este archivo, así es como se ve nuestro botón. A continuación, voy a crear el elemento interno usando antes de pseudo clase Aquí, voy a crear una pseudo clase antes de la etiqueta ancla A, dos puntos antes Después dentro de los alias, la primera propiedad, voy a usar el contenido porque para crear un contenido en blanco para eso Contenido, contenido es un contenido en blanco. Entonces después de eso, necesitamos definir la posición de este contenido en blanco. Entonces desde arriba, desde la posición superior, voy a hacer que sea cero. Desde el laboratorio también voy a empezar cama también cero. Después de eso, voy a definir un color de fondo, color de fondo. Voy a usar someti de color rojizo HaTaGF cuatro, cuatro, tres, tres, seis Después de eso, voy a definir id. width, helm to use width, 120 pixel. A continuación, voy a definir altura, altura y dobladillo para usar altura, 100%, 100%. Después de eso, voy a definir la posición de posición, y quiero hacerla absoluta. Y voy a poner este archivo. Después de establecer este archivo, así es como se ve nuestro elemento. Pero el problema son las letras debajo de ella. Entonces para eso, necesitamos usar el valor del índice Z. Entonces aquí están el índice T Z, y voy a pasar menos uno. Voy a configurar este archivo y resolver el problema. Ahora voy a transformar este elemento. Quiero sesgar este elemento. Para eso, necesitamos usar transform property, transform, y voy a usar skew value, skew Y quiero sesgarlo hasta -15 grados el EG, y me mo para establecer este archivo Después de establecer este archivo, es como se verá nuestro elemento. Además, se puede notar que este elemento no es visible fuera del área fronteriza porque aquí usamos desbordamiento propiedad oculta. Por eso no podemos ver esta parte de área de este elemento que. Ahora necesitamos trabajar en la animación que va a mover este elemento vuelta al lado derecho. Pero antes de comenzar la animación, voy a comentar esta línea desbordamiento oculto y aquí, voy a declarar la animación usando el fotograma clave rojo y nuestro nombre de animación es, se le puede nombrar cualquier cosa, le voy a nombrar movimiento Entonces dentro de la Caira dice aquí, voy a usar de palabra clave, a partir de esta es la posición inicial de esta animación Entonces dentro del calibre dice, aquí, voy a usar la propiedad llamada P. De la vuelta, quiero iniciar la animación a menos 120 píxeles. Lo siento, 120 no 12. Entonces voy a configurar este archivo. Es decir, va a poner este elemento en ese lugar. Déjame mostrarte. Si cambio el valor, si cambio el valor de la izquierda, si lo hago menos 120 píxeles y luego configuro este archivo. Como puede ver, movemos este elemento en esa posición. Ahora, en nuestra animación, vamos a iniciar este elemento desde esa posición. Por ahora, voy a hacer que sea cero, cero otra vez porque esta es la posición inicial de este elemento. Pero en animación, vamos a iniciar este elemento en esa posición. Y en dos palabra clave dos, nuestro destino final se deja valor f aquí, voy a pasar al 100%. Voy a establecer este archivo. Además, ahora, voy a volver a descomentar esta línea. Voy a volver a configurar este archivo. Después de eso, voy a llamar a esta animación en nuestro BFCedeliMate Animación de propina, primero necesitamos proporcionar el nombre de la animación que es mover, luego tenemos que proporcionar la duración de la animación, y voy a usar 1.2 segundo. Y nuestro derion de animación es lineal, para animación intercon contar aquí voy a usar valor infinito, Voy a establecer este archivo. Después de establecer este archivo, como puedes ver, tiempo infinito por tiempo infinito, movió este elemento detrás de este fondo. Por tiempo infinito, va a ejecutar la animación, pero quiero detener esta animación cuando yo Su mi cursor sobre este botón. Además, quiero extender el ancho de este elemento sesgado. Para ello, necesitamos crear un selector de hover de este elemento antes Aquí, voy a escribir nCAtag colon hover, y voy a aplicar el selector Her en antes elemento antes Entonces dentro de la propiedad CalibrsF, voy a usar wed. Quiero extender el ancho de este elemento, y quiero hacerlo al 100%. Entonces voy a quitar el QvLu. Quiero que sea un cuadrado. Voy a escribir transform, y quiero que sea Qvalu zero DG y además voy a quitar la animación cuando hober mi cursor sobre este elemento Entonces escribe animación, y aquí voy a pasar Nn Value. Voy a configurar este archivo después de configurar este archivo, si hober mi cursor sobre este botón, como pueden ver, instantáneamente detendrá esta animación También llena el botón con esto antes de pseudo elemento. Pero el problema es que no podemos experimentar la transición en él. Al instante cubrió todo el botón. Para eso, aquí necesitamos usar una propiedad llamada transición. Transición de todo este elemento, y nuestro tiempo de transición es de 0.5 segundos. Gana hub segundo, va a encubrir este elemento. Déjame mostrarte. Siempre que coloco mi cor sobre este botón, puedes experimentar esta animación Puedes experimentar esta transición. Es así como podemos crear este hermoso efecto de animación en este botón con la ayuda de fotogramas clave y antes de pseudo Así que gracias por ver este horario de video para nuestro próximo proyecto. 6. Efecto de iluminación de texto: Hola a todos. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación CSS. Y hoy en este proyecto, vamos a crear esta animación de texto de iluminación, como puedes ver, palabra de animación Hearty y todos los personajes se iluminan uno tras otro No parpadea al mismo tiempo. Uno tras otro, ilumina a todos los personajes. Entonces veamos cómo podemos crear esta animación sin usar JavaScript. La mayoría de los casos para crear este tipo de animación, necesitamos script Java. Pero en este tutorial, no vamos a usar ningún JavaScript. Vamos a usar en CSS y HTML. Entonces comencemos el código. Entonces como pueden ver lado a lado, abro mi editor de código visor studio y mi navegador usando la extensión Live Server y ya creé un documento TML, llamado index dot HTML Con eso, creo archivo estilo puerta CSS y vinculo este archivo con este documento. Ahora, al principio dentro de la etiqueta corporal. Al principio, dentro de la etiqueta corporal, voy a tomar una lista inferior, UL. Entonces dentro de esta lista nodal, voy a tomar ítem de lista, yo, y voy a tomar ítem de lista múltiple Aquí voy a escribir animación, A, A N I A, T, I, voy a duplicar esta vez múltiple ON, y voy a configurar este archivo. Después de establecer este archivo, vamos a saltar al estilo o archivo CSS. Ahora voy a empezar con etiqueta corporal, algún tipo, cuerpo. Después dentro del Curless, primera propiedad, voy a usar la altura Voy a asignar una altura a esta página y que es de 100 VH. Después de eso, voy a asignar display display flex, justificar el contenido, justificar el centro de contenido. También alinee los elementos al centro y voy a configurar este archivo. Va a alinear horizontal y verticalmente este ítem, centro de esta página. Después de eso, aquí voy a asignar familia de fuentes, familia de fuentes, y voy a usar fuente aérea aérea. Voy a establecer este archivo. A continuación, voy a agregar un color de fondo a esta etiqueta corporal algún tipo, fondo, y aquí voy a usar el hashtag 222, este color de fondo gris oscuro. Entonces después de eso, voy a apuntar a la etiqueta UL, UL y lista. Entonces dentro de los carivers aquí, voy a poner margen Margen, cero, Añadiendo también relleno cero. Entonces voy a usar la propiedad display. Mostrar escamas y voy a configurar este archivo. Después de configurar este archivo, así es como se ve. Ahora todo el elemento de la lista desaparece uno al lado del otro. Después de eso, voy a apuntar a todos los elementos de la lista. Aquí estoy tipo, ULI dentro los cariverss la primera propiedad que voy a usar es tile Estilo de lista, voy a hacer que no sea ninguno porque quiero quitar los puntos. Después de eso, aquí, voy a asignar un color, color, y quiero usar poco color grisáceo, color gris claro algún tipo tiene etiqueta, algún tipo tiene etiqueta, cuatro, 848, 48 Después de eso, voy a asignar el tamaño del teléfono. Tamaño del teléfono HEMON asignar tamaño de teléfono ocho píxeles. Pixel. Entonces voy a configurar este archivo. Después de que configuré este archivo, así es como se ve nuestra toma. Además, voy a proporcionar poco más tarde el espaciado entre estos caracteres. Aquí estoy tecleando más tarde espaciado, 15 pixel, creo que 15 pixel es bueno para ello, y voy a configurar este archivo. Ahora bien, así es como se ve. Después de eso, necesitamos crear la animación usando fotogramas clave Para eso, aquí, voy a escribir en los fotogramas clave de peso, agregé fotogramas clave y aquí voy a nombrar la iluminación de fotogramas clave Iluminando dentro del clss la primera probabilidad al 0% de duración dentro del menos, voy a usar propiedad de color, color Voy a cambiar el color. Básicamente, no voy a cambiar el color, me voy a quedar como está. Yo uso de esta manera. Con eso, voy a usar sombra de texto, sombra de texto. Por ahora, voy a teclear ninguno. Posteriormente, voy a cambiar el valor de la sombra del texto. Entonces duplico esta línea. Entonces duplico esta sección, y aquí voy a pasar por aquí voy a pasar al 90% de duración. Quiero usar el mismo color, pero voy a duplicarlo nuevo ahora al 100% de duración. Voy a poner color. Voy a cambiar el color. Aquí voy a usar este color, FS si nueve hacen cero, este color amarillo. Ahora voy a aplicar un valor de sombra de página al 100% de duración. Aquí voy a sustituir nano por este valor. Ya copio este valor, así que lo coloco aquí y voy a poner este le. Después de eso, voy a llamar a esta animación de iluminación, copiar los nombres de la animación y voy a llamar aquí dentro de esta etiqueta LI, voy a llamar a la animación. Animación, primero voy a proporcionar el nombre de la animación que es la iluminación. Luego debemos proporcionar después de proporcionar el nombre de la animación, necesitamos proporcionar la duración de la animación y la duración de la animación es de 1.4 segundos. Con eso, necesitamos pasar la función de sincronización de animación que es lineal. Después de eso, necesitamos pasar valor de recuento de iteraciones de animación, que es infinito porque quiero ejecutar esta animación de tiempo infinito Infinito y voy a configurar este archivo. Después de configurar este archivo, se puede ver la animación en nuestro texto. Pero el problema es que todos los personajes parpadean al mismo tiempo Ahora quiero retraso. Quiero retraso entre cada personaje. Para ello, necesitamos seleccionar todos los elementos uno tras otro. Quiero decir todos los personajes. Para eso, vamos a usar enésimo niño. Vamos a utilizar la técnica de selección anticipada. Hern tipo UL, Ali, Colón nésimo niño. Es significa usarlo, podemos apuntar a los medios LIE usando su número de índice. Dentro de las rondas aquí, voy a pasar una. Al principio, quiero seleccionar el primer personaje. Básicamente, quiero decir que va a apuntar a A. Ahora uno por uno, todos los personajes para N para I, para M, para A, T I O N. Aquí, dentro del Kais hay un personaje objetivo peludo A, y quiero asignarle poco retraso de animación Retraso de animación. Este es nuestro primer personaje, así que voy a pasar cero. Entonces duplico esta línea, y esto es enésimo hijo dos aquí voy a asignar retardo de animación 0.1 segundo Después de eso, duplico esta sección, luego apunto I caracter usando su número de índice. Entonces aquí quiero asignar retraso, 0.2 segundo. Después de eso, lo duplico de nuevo y esta vez, voy a seleccionar aquí voy a asignar delay 0.3 segundos. Entonces lo duplico otra vez, y esta vez, voy a retrasar para A A, este personaje, A. Aquí, voy a pasar el índice número cinco y 0.4 segundos. Entonces lo duplico ag entonces voy a apuntar T usando el índice número seis, 0.5 segundo. Entonces otra vez, duplico este número, duplico esta línea y luego voy a apuntar usando el índice número siete y el valor de retardo 0.6. Después de eso, duplico esto de nuevo. Esta vez, voy a seleccionar el nésimo hijo número ocho y retrasar 0.7 duplicarlo nuevamente, esto es para el último objetivo de carácter Voy a cambiar el índice número nueve. Y aquí, voy a cambiar el valor. Voy a hacer un retraso de 0.8 segundos. Si configuro este archivo, ahora se puede ver ahora después de establecer este archivo, se puede ver uno tras otro, se hace crecer los caracteres. Es así como podemos lograr este efecto de iluminación. Espero que ahora te quede claro cómo podemos lograrlo. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 7. Editable que refleja texto animado: Me alegro de verles, chicos malos. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación CSS. Y hoy en este tutorial, como puedes ver, creamos esta hermosa animación de texto. Aquí puedes ver cómo nuestro texto está creciendo, y también puedes ver el reflejo de este texto. No sólo eso, también nuestro texto es irritable. Déjame mostrarte. Supongamos que si quieres escribir tu nombre, puedes eliminar el texto de este lugar y puedes escribir tu nombre. Es una muy buena práctica y ejemplo de animación CSS. Puedes usar esta animación en tu sitio web. Puede darle a tu sitio web un aspecto muy creativo. Sin más arriba, comencemos el proyecto y veamos cómo podemos crearlo. Como pueden ver, lado a lado, abro mi codaor de visual studio y mi navegador usando la extensión if server, y ya creo un documento HTML, llamado index dot Con eso, vinculo *** estilo de archivo punto CSS. Al principio, dentro de la etiqueta body, voy a crear una etiqueta de encabezado, H dos encabezado dentro de esta etiqueta por ahora, voy a escribir texto. Si configuro este archivo, puedes ver el resultado. Texto. Se trata de un contenido estático. No podemos editarlo desde nuestro navegador, y si quieres que sea un contenido apto, en ese caso, necesitamos usar un atributo y nuestro nombre de atributo es content itable. Déjame mostrarte. Aquí voy a escribir contenido. Editable. Quiero que sea verdad. Si lo hago cierto y luego configuro este archivo, ahora podemos editar nuestro contenido desde nuestro navegador. Déjame mostrarte. Quiero convertir texto a nombre. Se puede ver el resultado. Así que hicimos con éxito nuestra parte de mesa. Vamos a saltar a nuestra parte de diseño. Voy a saltar estilo de archivo CSS o CSS. Al principio, voy a usar Selector universal, tipo estrella. Dentro del Caliss quiero establecer margen. Margen, cero. Con eso, también, quiero establecer padding, padding zero. También quiero usar la propiedad de dimensionamiento de caja, dimensionamiento de caja, caja de borde de tamaño de caja. Then I'm going to use la familia de fuentes de la familia de fuentes. Familia de fuentes, y voy a usar la fuente Aerial. Aéreo Heldico y sensorial. Si digo este archivo, se puede ver el resultado. A continuación, quiero darle estilo a nuestra etiqueta corporal, body. En cambio el Kalis es, quiero comenzar con la propiedad de visualización, display flex Oye, si no estás familiarizado con flex y leer, puedes revisar mi curso. Entonces justifica el contenido. Centro. También quiero alinear este ítem al centro. Quiero usar la propiedad align item, align item center. Nuestra siguiente propiedad es la altura mínima. Tenemos que establecer la altura mínima. Altura del hombre. Altura mínima, quiero usar 100 VH. Con eso, quiero establecer un color de fondo oscuro. Antecedentes, y voy a usar RGV amarillo. Para el rojo, voy a usar cinco. Para el verde, voy a usar 30. Y para el azul, voy a usar 71. Si configuro este archivo, se puede ver el color. Puedes ver el color de fondo azulado oscuro, y también hit center nuestro contenido en medio de esta página porque usamos flexbox para alinear nuestro Y luego viene la parte más importante H diseño de etiquetas de dos rubros. H dos está en el CalibrasLa primera propiedad es posición, posición relativa, y nuestra segunda propiedad es tamaño de fuente Tamaño de fuente 6:00 A.M. Si configuro este archivo, puedes ver el resultado. Con eso, quiero decir espaciado entre letras. Espaciado entre letras, espaciado entre letras, 15 píxeles. Nuestra siguiente propiedad es color significa color de fuente, color, y voy a usar el valor RgVa Para el rojo, voy a usar cuatro. Para el verde, voy a usar 50. Y para el azul, voy a usar 124. Si configuro este archivo, puedes ver el resultado. Este color es bastante idéntico al color de fondo, y ahora voy a transformar estas tomas en mayúsculas Toma transformar mayúsculas. Si configuro este archivo, puedes ver el resultado. Entonces voy a poner mojado mojado cien por ciento. Alinee el texto, centre, y luego venga la parte muy importante de este video. Ahora necesitamos reflejar este texto. Quiero crear un reflejo de espejo. Para eso, necesitamos usar un nuevo cuadro de nombre de propiedad reflejar. Déjame mostrarte. Oye, como puedes ver, trabajo con el navegador Chrome. Por eso necesitamos usar un prefijo. Tablero web ket. Nuestro cuadro de nombre de propiedad refleja. Dash reflejar. Al principio, necesitamos declarar la dirección de nuestra reflexión, que está por debajo, y luego necesitamos proporcionar la longitud de esta reflexión, que es de un píxel. Si configuro este archivo, puedes ver el resultado. Crea un reflejo perfecto de nuestro texto. Nuestro primer valor es el valor de dirección de reflexión. Nuestro segundo valor es el valor opuesto. Y tercero, tenemos que aportar el valor mag. Y para el valor mag, voy a usar gradiente lineal. Entonces aquí voy a escribir gradiente lineal. Dentro del paréntesis o primer valor es transparente. Nuestro segundo valor es RGVA dentro del paréntesis, necesitamos proporcionar el valor argv Pero al principio, voy a encender la envoltura de agua. Ahora voy a pasar el valor o el primer valor es valor rojo. Para rojo, voy a usar 11 para verde, voy a usar 70 para azul, voy a usar 138. Por fin, tenemos que pasar el valor Alfa. Y como saben, el valor Alpha se utiliza para la transparencia. Entonces para el valor Alpha, voy a usar 0.267 Si configuro este archivo, puedes ver el resultado. Entonces voy a usar punto y coma para terminar esta línea. Nuestra siguiente propiedad es la altura de línea. Altura de línea. Para la altura de línea, voy a usar 0.70 EM Y a continuación, quiero encender el contorno de las apuestas. Voy a usar la propiedad de esquema. Esbozo, ninguno. Si configuro este archivo, puedes ver el resultado. Después de eliminar el contorno, nuestra reflexión se adjunta con nuestro contenido. Ahora nuestra reflexión se ve realista. De ahí viene nuestra parte final, que es la animación. Entonces, al principio, quiero crear un fotograma clave a la velocidad de fotogramas clave Nuestro nombre de animación es animado. Entonces dentro de la resistencia Cali, como ustedes saben, tenemos que decir dos tipos de selectrod de fotogramas clave Puedes usar de o dos palabras clave, lo contrario, puedes usar el valor porcentual. Para este ejemplo, tenemos que ir con valor de percentis. No sólo, necesitamos trabajar con valor porcentual múltiple, y ya preparé el valor porcentual para este ejemplo. Voy a copiarlo y quiero pegarlo aquí, pegar. Entonces dentro del caliss necesitamos usar nuestra propiedad. Al principio, quiero cambiar el color del texto. Voy a usar el valor del color. Color y voy a usar valor argv. Y uso el mismo color que uso en nuestra etiqueta de encabezado. Nuestra próxima propiedad es tomar sombra. El tipo Sonu toma sombra. Toma sombra, ninguna. Como pueden ver, aplico esta propiedad, 0% de animación, 18% de animación, 20% de animación, 50.1% de animación, 60% de animación, 65.1% de animación, 80% de animación, 90.1% de animación, y 92% animación Ahora, llamemos a la animación y tratemos de ver si funcionó correctamente o no. Así que quiero usar la propiedad de animación. Animación. Y nuestro nombre de animación es animado. Y nuestro tiempo de duración de animación es de 1 segundo. Y nuestra dirección de animación es lineal. Y para nuestro tiempo de duración de animación, voy a usar Valor infinito. Infinito. Si guardo este archivo, veamos qué pasó. Como puedes ver, no pasa nada porque para crear el efecto creciente, necesitamos jugar con el valor de te shadow. Entonces para eso, necesitamos usar algún selector de porcentajes más. Ya copio el selector de porcentaje, y lo voy a pegar aquí. Entonces dentro del colrass voy a usar propiedad de color. Color, color blanco, etiqueta Haz, si es. Y ahora tenemos que jugar con la propiedad tee shadow. Entonces el tipo toma sombra. Toma sombra. Al principio, necesitas pasar el valor XXS, que es cero, luego debes pasar el Y X vero Voy a usar cero. Tercero, hay que pasar el valor de borrosidad. Entonces aquí, voy a usar diez píxeles. Por fin, necesitas pasar el color de la sombra. Para el color de sombra, voy a usar RGV Vo RGB, dentro del paréntesis, voy a escribir rojo valor seis, valor verde 149 y valor azul 231 Si configuro este archivo, puedes ver el resultado. Se puede ver cómo está parpadeando. También se puede ver el reflejo. Y ahora quiero crear este efecto más atractivo. Voy a duplicar esta línea, copia. En la siguiente diapositiva, quiero duplicar esta línea. Y ahora solo quiero aumentar el valor de desenfoque, 20 píxeles. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver un borde de efecto de luz resplandeciente de este texto. Entonces después, quiero duplicar esta línea, una vez más, quiero aumentar el valor de desenfoque 40 píxeles Entonces una vez más, quiero duplicar esta línea, y ahora voy a usar 80 píxeles. Por fin, voy a usar 160 píxeles. Si elimino la última coma y configuro este archivo, puede ver el efecto Como puedes ver, ahora nuestro efecto creciente se ve más atractivo. No sólo eso, también es benéfico. Supongamos que quiere escribir su nombre. Voy a quitar esta, y voy a teclear Smith. Puedes escribir cualquier texto aquí porque usamos contenido irritable. Como se puede ver, el contenido es cierto. Espero que ahora te quede claro cómo podemos crear este efecto creciente. Gracias por ver este video, estad atentos para nuestro próximo proyecto. 8. Efectos de animación cargadores de círculos ondulados en CSS 3D: Hola chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación CSS, y hoy vamos a crear este hermoso cargador de círculo ondulado CSS tres D. Como puedes ver, tenemos múltiples círculos con diferente tamaño y cómo realiza una hermosa animación ondulada. Veamos cómo podemos crearlo. Vamos a saltar al editor de código de estudio. Entonces como pueden ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión del servidor Lip, y ya creo un documento ETML llamado index dot TML También, vinculo este documento con el tyler CSS five. Entonces primero, dentro de mi etiqueta corporal, voy a tomar una etiqueta Deep, Dev, y también voy a establecer una clase a este cargador de clase Deep. Luego dentro de la etiqueta dip, voy a tomar múltiples span tag span. Básicamente, voy a tomar Spentag vacío para crear algunos círculos Para este proyecto, voy a tomar pipten span tag, así que voy a duplicar esta línea 14 veces Tenemos etiqueta de 15 span total para 15 círculos, hicimos con éxito nuestra parte TML Ahora, vamos a saltar al archivo CSS, estilo punto CSS. Aquí, al principio, voy a seleccionar Selector universal, que es estrella. Después dentro de los calibres, voy a usar propiedad de margen Margen, cero, entonces voy a usar la propiedad padding. Relleno cero. Entonces configuré este archivo. A continuación, voy a seleccionar la etiqueta corporal. Aquí estoy tipo cuerpo. Después dentro de los alias, al principio, voy a usar la propiedad display, display flex, Justify content, center Nuestra siguiente propiedad es Align item. También es centro. Y entonces voy a decir altura mínima a nuestra página web. Para eso, voy a usar propiedad de altura media EN altura. Altura hombre, 100 VH. Quiero seleccionar toda la página para este proyecto. Por eso uso 100 VH. Nuestra siguiente propiedad es de fondo. Fondo y para fondo, voy a usar RGV valor RGB Para el rojo, voy a escribir 70. Similar para verde, voy a escribir también abnty. Y por nuestro valor azul, voy a escribir 70. Si configuro este archivo, aquí puedes ver nuestro color de fondo es gris oscuro, y ahora voy a darle estilo a la clase Loader. Así que para seleccionar cargador de puntos. Dentro del calirass al principio, voy a usar la propiedad de posición Posición relativa. Además, voy a establecer el peso de Haydn a este cargador, con 300 píxeles Altura, 300 píxeles también. Ahora voy a usar la propiedad más importante, que es transformar estilo, transformar estilo. En nuestra propiedad de estilo de transformación, voy a utilizar preservar tres d valor porque quiero darle a nuestro círculo tres D L. Nuestra siguiente propiedad es transformar. Transformar. Nuestro primer valor es la perspectiva. Prospectivo 500 píxeles, y nuestro siguiente valor es rotar x valor, rotar X. Aquí voy a pasar ángulo de 60 grados. A continuación, voy a estilizar todo el gasto dentro de la clase oder Entonces aquí quiero atar cargador de puntos, espacio, voy a seleccionar todo theta, span Luego dentro de la Cali resis, nuestra primera propiedad es posición, posición absoluta. Nuestra siguiente propiedad es display, display block. Y ahora voy a poner frontera a nuestra etiqueta span. Frontera. Cinco píxeles. Voy a establecer frontera con cinco píxeles, y quiero borde sólido. Y nuestro color de borde es el blanco. Sm tipo FFF. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver solo para crear múltiples cajas en el mismo lugar. Por ahora, no nos queda claro. Entonces nuestra siguiente propiedad es caja sombra caja sombra. Y voy a posicionar esta sombra. Cero píxel, cinco píxeles y cero píxeles. Y también voy a usar un color para esta sombra de caja. Etiqueta Hass, CCC. Es proporcionar color gris claro a nuestra sombra. Ahora con ese valor, quiero usar otro valor, que es el recuadro Además, quiero poner sombra dentro de parte de estos anillos. Por eso uso valor de inserción. Y luego voy a copiar el valor, y lo voy a pegar aquí. Voy a establecer este archivo. Nuestra siguiente propiedad es el tamaño de la caja, el tamaño de la caja. Y aquí voy a usar valor de obras fronterizas. Y también, voy a usar otra propiedad que es radio de borde, radio borde, radio de borde, 50%. Si configuro este archivo, puedes ver el resultado. Sé que todavía no está claro para ti, y ahora voy a aumentar el tamaño del círculo uno por uno. Para eso, necesitamos seleccionar toda la etiqueta Span una por una. Entonces, seleccionemos toda la etiqueta gastada una por una. Tipo S punto, cargador o etiqueta Span, span. Colon, y ahora voy a usar el selector nésimo hijo, NH child Al principio, voy a seleccionar nuestro primer spentag voy a escribir uno aquí Entonces dentro del alivss necesitamos posicionar nuestra primera etiqueta de gasto Al principio, voy a usar la propiedad top, top zero. Nuestra siguiente propiedad es labiada, p, también cero. Y luego viene nuestra otra propiedad, que es fondo, fondo, también cero. Y nuestra última propiedad de posicionamiento es correcta, correcta, también cero. Con eso, voy a usar otra propiedad que es delay de animación. Retraso de animación. Por ahora, voy a dejarlo en blanco. Te diré más adelante por qué uso esta propiedad. Si configuro este archivo, como pueden ver, crea nuestro primer círculo, y este es el círculo más grande de nuestro grupo. Y para crear nuestro segundo círculo, voy a duplicar toda esta sección. Al principio, voy a cambiar el selector, enésimo hijo dos Con eso, voy a cambiar el valor superior, el valor izquierdo, el valor inferior y el valor derecho. Déjame mostrarte los diez primeros b, diez, posición inferior, diez, posición correcta, diez. Si configuro este archivo, aquí se puede ver que aquí no pasa nada . No creo otro círculo porque no proporcionamos ninguna unidad. Aquí necesitamos brindar unidad. Quiero proporcionar pixel hell diez píxeles, diez píxeles y diez píxeles. Si configuro este archivo, ahora puedes ver el resultado. Hay otro círculo dentro de este círculo. Entonces uno por uno, voy a crear este círculo. Entonces voy a duplicar esta sección, y aquí voy a seleccionar niño tres. Y además, voy a aumentar los valores de posición, 20 píxeles, 20 píxeles para la parte inferior y 20 píxeles para la derecha. Si configuro este archivo, puedes ver el resultado. Se agrega tercer círculo en este grupo, y ahora voy a adelantar rápidamente esta sección para completar el proceso. Entonces como puedes ver, completamos el proceso de creación. Si configuro este archivo, puedes ver el resultado. Puedes ver que todos estos círculos están perfectamente alineados, y aquí puedes ver, y aquí puedes ver cada vez que agrego un valor de diez píxeles a nuestro valor anterior. En nuestro selector 13, utilizamos 120 píxeles de valor máximo. Pero en nuestro siguiente selector, significa en nuestro selector 14, usamos 130 Vale. De esa manera, en nuestro selector 15, agregamos diez píxeles y pasamos 140 onda. Así que creamos con éxito nuestro círculo. Ahora necesitamos animarlo. Solo tenemos que jugar con el valor de Zatdex para crear la ola Así que vamos a crear un fotograma clave para esta animación. Así que volví a la sección superior, y aquí, voy a crear el fotograma clave En el fotograma clave rojo. Y luego necesitamos escribir el nombre del fotograma clave y nuestro nombre de fotograma clave es animado Luego dentro de los cálices, necesitamos seleccionar la posición Para seleccionar la posición de animación, voy a usar el valor porcentual. Primero, voy a seleccionar dos posiciones 0% posición y 100% posición. Entonces dentro de la resis viva en esa posición, quiero transformar estos círculos. Así que aquí voy a usar un nombre de propiedad transform, Transform, y voy a usar Traducir valor Z. Traduce Z. Y quiero traducirlo -100 pixel en la dirección de Z x. A continuación, voy a seleccionar 50% posición, 50%. Entonces tú en el Cali dice, una vez más, voy a usar transformar probidad, transformar, Traducir Z 100 píxeles Y ahora tenemos que llamar a esta animación en nuestro spentag. Aquí voy a escribir animación. Nuestro nombre de animación es animado. Y quiero ejecutar esta animación por 3 segundos. Con eso, también, quiero decir que está en modo de animación fuera. Por fin, voy a pasar valor de conteo de iteraciones de animación, que es infinito Si configuro este archivo, como pueden ver, todos estos círculos se mueven juntos hacia arriba y hacia abajo porque usamos el índice Z en. Aquí se puede ver que mueve todo el círculo juntos al mismo tiempo. Ahora necesitamos usar la propiedad delay, delay de animación. Usando esta propiedad, podemos retrasar nuestra animación, y es muy necesario crear el círculo ondulado. Entonces aquí, al principio, voy a usar 1.4 segundos de retraso. Si configuro este archivo, como pueden ver, hasta 1.4 segundos, inicia la animación para nuestro primer hijo. De igual manera, para nuestro segundo hijo, voy a pasar 1.3. Segundo. Y para nuestro tercer hijo, voy a pasar 1.2 segundos. Y para nuestro cuarto, voy a pasar 1.1 segundo. Y para nuestro quinto hijo, voy a pasar 1 segundo. Y para nuestro sexto hijo, voy a pasar 0.9 segundos. Para nuestro hijo siete, voy a pasar 0.8 segundos. Y para nuestro hijo ocho, voy a pasar 0.7 segundos. Y para nuestro hijo de nueve, voy a pasar 0.6 segundos. Para nuestros diez, voy a pasar 0.5 segundos. Para nuestro hijo de 11, voy a pasar 0.4 segundos. Para nuestro hijo 12, voy a pasar 0.3 segundos. Para nuestro hijo de 13, voy a pasar 0.2 segundos, y para el selector de lapso 14, voy a pasar 0.1 segundos, y para nuestro último, voy a pasar retraso de cero segundos. He establecido con éxito la propiedad de retardo de animación, toda esta etiqueta span. Si configuro este archivo, ahora puedes ver el resultado. Como puedes ver, ahora es crear círculos web perfectos. Y ahora se ve bastante increíble. Se ha creado una muy hermosa onda de hecho. Espero que ahora te quede claro cómo podemos crear esta animación de círculo web. Así que gracias por ver este video, estén atentos para nuestro próximo proyecto. 9. Botón animado con animación CSS: Hola a todos. En este tutorial, vamos a crear esta agradable animación de temblor O para nuestro botón. Como pueden ver cuando coloco mi tarjeta sobre este elemento, sacude el botón Para crear este botón, vamos a usar animación CSS. Quiero decir animación de fotogramas clave CSS. Veamos cómo podemos crear este efecto tembloroso. Vamos a saltar al código del estudio. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión Live Server y ya creo un documento STMA llamado index dot TML Al principio, dentro de mi etiqueta corporal, voy a crear una etiqueta de anclaje, A, y aquí voy a escribir Hober me Su yo. Y como pueden ver, ya vinculo con estilo archivo estilo CSS. Voy a establecer este archivo. Después de configurar este archivo, hasta configurar este archivo, puedes ver la etiqueta de anclaje en mi navegador. A continuación, voy a saltar a la página CSS. Aquí al principio, voy a darle estilo a la sección de cuerpo, cuerpo. Después dentro del cli dice, primero, voy a asignar altura a nuestra altura corporal Hermon para usar 100 altura de ventana gráfica Entonces voy a definir de esta manera, mostrar escamas porque quiero colocar el botón en medio de esta página. Por eso uso este hojuelas. Justificar contenido, justificar contenido centrado. También, un centro de líneas de artículos. Después de establecer este archivo, como puedes ver, reproduce esta etiqueta de anclaje particularmente y horizontalmente a mitad de esta página. A continuación, voy a agregar fondo gris oscuro a este cuerpo. Aquí estoy tecleando fondo, y voy a decir fondo tiene etiqueta 222. Va a proporcionar color gris oscuro. Entonces voy a apuntar a la etiqueta de ancla. A, y dentro de los versos de Cali, primero, voy a quitar la decoración de texto ajustado subrayado Voy a hacer que no sea ninguno. Después de eso, voy a definir color, colores, y aquí quiero usar color blanco, Blanco. Como pueden ver, ya me sugiere algo de propiedad y valor A continuación, voy a definir la familia de fuentes. Familia tipográfica, y aquí, voy a usar Sensai Después de eso, voy a definir el tamaño de fuente. Tamaño de fuente, voy a usar 40 pixeles. Entonces voy a definir border, border, y aquí voy a usar tres pixel solid border. Después de eso, voy a definir acuarela, blanco, y voy a configurar este archivo. Entonces voy a definir algunos acolchados de arriba y abajo. Relleno de arriba y abajo, voy a usar 40 píxeles e izquierda y derecha, voy a usar 80 píxeles y voy a configurar este archivo. Establece este archivo, así es como se ve nuestro botón. A continuación, voy a usar la propiedad de transición. Transición y aquí quiero ejecutar transición a toda esta propiedad y voy a establecer el tiempo. El tiempo de transición es de 0.3 segundos. Voy a poner estos cinco. A continuación, voy a crear un selector de hover de esta etiqueta de anclaje Aquí voy a atar ancla A, colon, Hovl. Entonces dentro de la propiedad CaribaSF voy a usar border La primera propiedad, voy a usar frontera. Quiero cambiar el borde sólido de tres píxeles, sólido. Y aquí, voy a definir color, color diferente. Entonces aquí, voy a establecer el color A cuatro, cuatro, A cuatro, cuatro, 336, este código de color. Este tipo de color naranja color rojo anaranjado. Voy a establecer este archivo. Después de eso , también, quiero cambiar el color del texto. Alguien usa el mismo color de texto. Entonces copio el código de color, y voy a escribir propiedad de color, color voy a pegar este color de texto syn. Voy a establecer este archivo. Después de establecer este archivo, si yo Hoberm cursor, se puede ver el pecado Así es como cambió el color del borde, también el color de la fuente. Ahora vamos a crear el fotograma clave de animación para la animación Entonces escribe a la tasa de fotogramas clave y nuestro nombre de fotogramas clave es temblar porque vamos a agitar este botón usando esta animación Después dentro de los alias, el primero 33% de duración, quiero quiero rotar todo este elemento diez grados Quiero escribir transform property, transform, y voy a usar rotate value, rotate. Quiero rotar este elemento diez grados, diez grados semicon para terminar esta diapositiva Al 33% de duración, va a rotar el elemento diez grados. Entonces dubo esta sección y aquí voy a decir 66%, 66% de duración Quiero rotar este elemento menos diez grados. Quiero decir sentido opuesto, lado del labio. Entonces al 100% de duración, quiero rotar este elemento, nuevo del lado derecho, así que uso positivo diez grados y voy a configurar este archivo. Ahora, cuando calmo mi auto en este botón, quiero llamar a esta animación Voy a llamar a esta animación en Hobart selector. Entonces, para escribir animación y nuestro nombre de animación es shape. A continuación, voy a decir la duración de la animación que es de 0.3 segundos. Entonces la dirección de la animación es lineal. Después de eso, tenemos que pasar el tiempo de animación. ¿Cuántas veces queremos ejecutar esta animación? Voy a escribir animación introducción contar valor uno. Eso es. Ahora bien, si configuro este archivo y pongo el cursor sobre este botón, puedes ver este hermoso efecto de animación Esta es una hermosa animación temblorosa. Cuando pongo el cursor sobre este botón, como pueden ver, agite el botón dentro de 0.3 segundos. Al principio, enrutó el botón en el lado derecho, luego pudrió el botón en el lado izquierdo, y luego volvió a encarrilar el botón del lado derecho Si aumento el tiempo de duración, si lo hago cinco segundos y luego pongo este archivo y quienquiera que sean mis tarjetas en él, ahora pueden notar al principio va a inclinar este botón en el lado derecho. Entonces después de diez grados, va a girarlo del lado izquierdo, luego otra vez, va a girarlo lado derecho y completar la animación en 5 segundos. Para una mejor experiencia, voy a utilizar el valor anterior 0.3 segundo. Espero que ahora te quede claro cómo podemos aplicar el fotograma clave de animación en nuestros botones Gracias por ver este video, estén atentos para nuestro próximo proyecto. 10. Efectos de animación de rotación 3D en CSS3: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación CSS. En este proyecto, vamos a crear animación de rotación de CD. Y aquí se puede ver la demostración, cómo es rotar y cómo se desplaba. Entonces, sin perder el tiempo, estudiemos prácticas y veamos cómo podemos crear este tipo de animación de tres D. Aquí puedes ver lado a lado, abro mi coordinador de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creo un tmlFle llamado index dot Y también vinculo este archivo con nuestro archivo, Style dot CSS. Entonces primero, dentro de la etiqueta body, voy a crear un DevTef y además, voy a establecer una clase Caja de clase. Entonces configuro esta etiqueta dip, voy a crear la etiqueta dip, D, y voy a establecer cualquier clase entonces para esta etiqueta dip. Entonces dentro de esta etiqueta dip, voy a crear un total de cuatro span tag, span. Y voy a duplicar esta etiqueta span tres veces. Ahora estamos plotLF span tag. Si configuro este archivo, no se puede ver nada en mi navegador. Así que hicimos con éxito nuestra parte TML. Ahora, saltemos al archivo CSS styler y comencemos a diseñar nuestros elementos Primero, voy a comenzar con la etiqueta corporal. Entonces aquí voy a teclear cuerpo. Entonces dijiste el CalsSF voy a usar margin property, margin zero Entonces voy a usar la propiedad padding. Relleno, cero. Nuestra segunda propiedad es de fondo. Fondo, y voy a establecer un color de fondo. Para eso, voy a usar RGV do RGB. Para el rojo, voy a usar 66. También, para el verde, voy a usar 66, y para nuestro azul, voy a usar 66. Si configuro este archivo, como pueden ver, llene nuestra página de color gris oscuro. Puedes usar cualquier color como quieras. Y ahora voy a darle estilo a esta sección de caja. Para eso, voy a seleccionar punto o el nombre de la clase es caja. Entonces en la primera propiedad de AlisSso es posición, posición absoluta Nuestra siguiente propiedad es top top. Quiero posicionarlo a mitad del discurso. Por eso voy a pasar 50%, 50%. Nuestra siguiente propiedad es ella, también 50%. Entonces voy a usar transform property, Transform. Aquí voy a usar Perspectiva Prospectiva. Perspectiva 1,000 píxeles. Sin perspectiva, nuestro modelo tridimensional no funciona correctamente. A continuación, voy a decir Dan con ancho 200 pixel, luego alto, alto, 300 pixel. También necesitamos usar otra propiedad que se transforma estilo. Transformar estilo, voy a usar preservar tres D will. Y ahora necesitamos darle estilo a éste, este profundo que está dentro de este padre D. Así que aquí voy a seleccionar el espacio de cuadro de puntos D. Luego dentro la primera propiedad AlivSo está la posición, posición absoluta, y nuestra segunda propiedad es top top, cero Y también voy a usar P cero. Entonces voy a decir altura y ancho a este elemento div. Con 100%. También altura, 100%. Ahora, vamos a establecer un color de fondo y ver cómo se ve. Fondo Voy a usar color blanco. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver que crea una caja, pero no está alineada en medio de esta página. Ahora necesitamos alinear esta casilla, a mitad de esta página. Para eso, aquí voy a usar valor calc. Déjame mostrarte. Entonces aquí, voy a escribir función calc, CALC. Entonces dentro de los versos redondos, necesitamos calcular la posición, como puedes ver, nuestra altura es de 300 píxeles. Aquí voy a menos 150 píxeles. Desde el 50% del hub de posición de la altura, que es de 150 píxeles. Del mismo modo, voy a usar la función Cal para nuestra posición de elevación. CALC está en las rotondas 50% menos, aquí se puede ver, nuestro ancho es de 200 píxeles, así que voy a -100 Ahora bien, si configuro este archivo, como pueden ver, ahora nuestro DV está perfectamente alineado medio de esta página. Luego volvemos a la sección dip, y aquí voy a usar transform style property, transform, transform style, transform style, pres up tres D. Y ahora necesitamos diseñar nuestras etiquetas span, que está dentro de esta etiqueta dip Entonces aquí, voy a seleccionar cuadro de puntos, espacio, espacio Dave, span. Entonces dentro de la primera propiedad de AliBasso está la posición, la posición absoluta Y top zero, también cero. Nuestra siguiente propiedad es display, display, y aquí voy a usar block. Como necesitamos establecer con altura con 100% altura, 100%. Y luego voy a establecer fondo. Antecedentes. Y para fondo, voy a usar color degradado lineal, lineal radiante. Al principio, necesitamos pasar el ángulo de gradiente, y nuestro ángulo de gradiente es de cero grados. Y aquí voy a proporcionar a tres colores. Nuestro primer color es el dólar, si uno, si uno, si uno. Empecemos con la envoltura de la sala. Ahora se puede ver con claridad. Entonces nuestro siguiente color es tiene etiqueta B, B B. Es un color gris claro, y nuestro tercero es también voy a usar este color otra vez. Copia el color y pégala aquí. Si configuro este archivo, aquí puedes ver el color degradado. Comienza con el color gris claro, luego poco color gris oscuro y una vez más, el color gris claro. Y entonces voy a decir radio de borde a este color degradado. Déjame mostrarte. Radio de borde, 20 píxeles. Si configuro este archivo, se puede ver el radio del borde en la esquina. Ahora, eliminemos el color de fondo del elemento div padre. Entonces, para comentar esta línea y establecer una vez más. Ahora puedes ver el resultado. Ahora tenemos que seleccionar todos los senteg uno por uno. Para eso, voy a seleccionar, voy a escribir punto, caja, espacio, espacio Bev, span Colon enésimo hijo enésimo hijo uno. Entonces dentro de la ronda versus, voy a usar una propiedad llamada transform. Transformar. Quiero rotar a nuestro primer hijo en la dirección de X X. Entonces aquí voy a escribir rotate in, rotate x, y quiero rotarlo zero dige Y después voy a seleccionar toda la sección y duplicarla. Y ahora voy a seleccionar a nuestro segundo hijo. Y quiero rotar éste en dirección xs 45 grados. Entonces voy a duplicar una vez más. Y ahora voy a seleccionar tercer hijo. Aquí voy a decir ángulo de rotación -45 grados. Si configuro este archivo, puedes ver el resultado. Uno a uno, rotamos nuestros artículos de repuesto. Entonces voy a seleccionar toda esta sección y duplicarla una vez más y esta vez, voy a seleccionar cuarto hijo. Ahora voy a establecer ángulo de rotación de 90 grados. Como voy a establecer este archivo. Ahora voy a rotar toda la sección en dirección YxS Para eso, después de prospectivo, voy a usar rotar Y rotar Y. -45 grados Si configuro este archivo, puedes ver el resultado. Ahora se ve como un objeto de tres y se puede ver toda la parte de la etiqueta span. Ahora necesitamos trabajar con nuestra parte final, que es la parte de animación. Aquí voy a llamar a nuestra propiedad de animación Animación. O el nombre de la animación es Animate. Y nuestro tiempo de duración de animación es de cinco segundos. Y nuestra dirección de animación es lineal. Quiero ejecutar esta animación por tiempo infinito. Entonces aquí, voy a usar animación iteración contar infinito Y ahora necesitamos crear el fotograma clave para esta animación Entonces voy a copiar el nombre de la animación. Por fin, voy a crear el fotograma clave a la tasa de fotogramas clave, fotogramas clave y nuestro nombre de animación Entonces en cambio los calibres aquí voy a usar el valor porcentual en la posición del 0% Dentro de los alias, voy a usar transform Bbalty Transformar. Primero, voy a decir prospectiva. Prospectivo 1,000 píxeles. Después de prospectiva, voy a decir rotar x valor. Girar, x0t. Entonces voy a duplicar esta sección y en posición al 100%, voy a establecer rotar 359 grados. Si configuro este archivo, puedes ver el resultado. Aquí puedes verlo ya rotar nuestro objeto. Esta rotación de tres D se ve muy bien. Espero que ahora te quede claro, cómo podemos crear esta animación de rotación de tres D. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 11. Nube lluviosa animada, parte 1: Me alegro de verles chicos. Una vez más, estoy de vuelta con un nuevo proyecto de animación CSS. Y en este proyecto, vamos a crear Nube Lluviosa. Es un proyecto de animación CSS muy avanzado porque vamos a usar variables. Veamos la demostración, cómo se ve. Como puedes ver en tu pantalla, gotas de lluvia caen de las nubes y desaparecen en el suelo, y puedes notar gotas de lluvia al azar Sin perder el tiempo, veamos cómo podemos crear este proyecto. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creo el archivo TML de punto índice, y también creo el archivo SASS de punto de estilo Como puede ver, vinculamos nuestro archivo de estilo con este documento ETML Y como saben, necesitamos comenzar con la estructura TML. Al principio, voy a crear un contenedor, que va a contener Cloud y Ring. Voy a crear un contenedor de puntos clase D. Como puedes ver, creamos una clase llamada container. Entonces 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 deslizamiento universal así que estoy tipo estrella. Después dentro del Liss, primero, voy a usar margin property 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 Bader 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 de juego, exhibición. Flexión de pantalla. 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 avaricia, entonces puedes revisar mi curso. Y entonces voy a decir altura mínima a esta página. Entonces, para escribir altura media, altura media, cien H. Nuestra siguiente propiedad es de fondo. Fondo, y voy a decir color de fondo. Y aquí, voy a decir algo de color gris oscuro. Gris oscuro. Quiero un poco de color más oscuro. Selecciono color, éste, y voy a configurar este archivo. Este color es bueno por ejemplo y puedes elegir tu propio color. Ahora necesitamos darle estilo a la sección de contenedores. Voy a copiar este nombre de clase de contenedor aquí voy a escribir contenedor de punto. Entonces dentro de las cliras nuestra primera propiedad es posicionar 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, Amsltt Entonces dentro de la resis de Cali, nuestra primera propiedad es la posición, la 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 decir color de fondo, fondo, y voy a usar fondo blanco. Para eso, voy a usar hexadecimal, tiene etiqueta si si. Si configuro este archivo, como pueden ver, crea un rectángulo y necesitamos darle forma redonda. Por eso voy a usar radio fronterizo Radio de borde Cuperty , 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 poner éste. Para darle forma de nube, necesitamos usar posius selector. Aquí voy a crear un selector de posius para la nube, nube , colon colon antes Entonces dentro de los calivss voy a crear Blank contienen en blanco básicamente, voy a crear una copia de esta nube Siguiente propiedad es posición posición, y esta vez, voy a usar absoluto Obsolt A continuación, quiero trasladar 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 . Al medio plástico, necesitamos mover este círculo lateral del labio. Aquí voy a usar propiedad de ascensor, p 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. Por fin, voy a darle color sólido a esta sombra de caja. Aquí voy a atar, tiene etiqueta, color blanco, si si si si. Si configuro este archivo, puedes ver el resultado. Como puedes ver, creamos una forma de nube perfecta usando DML y CSS En la siguiente parte de este proyecto, vamos a crear. Gracias por ver este video, nos vemos en la siguiente parte. 12. Nube lluviosa animada, parte 2: Que pro chicos, esta es la segunda parte de este proyecto. 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 en clase. Entonces dentro de este elemento profundo, voy a crear múltiples etiquetas span para nuestras gotas de lluvia Así que 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 pecado Déjame mostrarte cómo dash y nuestro nombre de variable es yo, entonces necesitamos usar dos puntos. Entonces necesitamos usar l 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 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. Se trata de un pre. El duplicarlo una vez más aquí voy a usar 14. Entonces otra vez, voy a usar 18. Primero reenviemos esta sección para ahorrarle tiempo. Y luego voy a duplicar de nuevo esta sección de trabajo. Yo creo 20 gotas de lluvia usando etiqueta span. Si pongo este estilo, 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. Luego dentro de los calibrados, nuestra primera propiedad es la posición, la 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, nosotros e para seleccionar lluvia y spantag Para eso equ secta espacio SpantaGrg Entonces inst la primera propiedad de AlibaSo es la relación de posición. Nuestra siguiente propiedad es dnwidth height, diez pixel, también width ten pixel Ahora voy a establecer el color del diagrama a nuestras gotas de lluvia. 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 todas 20 gotas de lluvia Vamos a tener un poco de acolchado 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 puedes ver que nuestros dioses de la lluvia están perfectamente organizados, y ahora necesitamos mantener a los dioses de la lluvia forma redonda o que necesitamos usar la propiedad de radio fronterizo. Aquí voy a teclear 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. Voy a usar la propiedad de animación. Animación. 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. Voy a escribir 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. Subvamos el archivo y veamos si funcionó correctamente o no. Como se puede ver, la animación se trabaja perfectamente con la propiedad translate Y, quiero usar la propiedad scale. 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 o. 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 ha desaparecido cuando se cae al suelo. Ahora necesitamos cambiar la posición de origen de la transformación. Aquí voy a usar transformaciones, y voy a usar bottom Val entonces viene 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 las gotas de lluvia caigan 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 animación, entonces todas las gotas de lluvia caen una por una aleatoriamente Si recuerdas, como puedes ver en mi archivo SML, creamos nuestra etiqueta span con variable y nuestra variable lime es I y decimos un valor aleatorio a esta variable, 16, 11, 12, etcétera Voy a usar este valor aleatorio para crear un anillo real. Volvamos al archivo CSS, y aquí voy a usar la propiedad animation duration, Animation duration. Y además, voy a usar la función Cal, que es una función de CSS, y quiero dividir 15 segundos con o variable I. Aquí voy a escribir donde entonces dentro las rotondas nuestro nombre de variable es yo para llamar a nuestra variable, necesitamos usar dash, entonces I. Si configuro este archivo, ahora puedes ver que nuestras gotas de lluvia caen al azar Se ve muy bonito 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. Voy a usar borde de dos píxeles. Tambien quiero color solido para nuestro borde, solido nuestro color de borde es blanco, si si es. Si configuro este archivo, puedes ver el resultado. Como necesitamos quitar las gotas de lluvia del fondo. Aquí voy a escribir bottom ten pixel. Ya configuré este archivo, ahora ha funcionado perfectamente. Completamos con éxito nuestro proyecto de nube y lluvia. Espero que les guste este video. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 13. Carga de CSS: Me alegro de verles chicos. Una vez más, estoy de vuelta con un nuevo proyecto de animación. Y como puedes ver en esta animación, cómo funciona la animación de carga. Entonces, sin perder el tiempo, veamos cómo podemos crearlo. Entonces aquí se puede ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor L, y ya creé un documento HTML llamado index dot HTML. Con eso, también creas o estilizas tu archivo CSS. Entonces primero, dentro de la etiqueta body, voy a crear la etiqueta H dos. H dos. Y dentro de la etiqueta HT, voy a escribir Blod. Después punto punto punto punto. Pero en mi etiqueta H dos, voy a usar datos atr Aquí estoy tipo datos, texto de datos. Entonces igual a dentro del doble curso, voy a pasar el mismo texto cargando. Copia el texto y pégalo dentro del doble curso. Si configuro esta página, puedes ver las tomas en mi navegador. Esta es nuestra parte de estimación. Ahora tenemos que saltar al archivo CSS. Al principio, voy a importar un formulario. Déjame disparar. Aquí ves que importo pop en sporm y el fontui es 700 es una forma negrita, y ahora voy a seleccionar Selector universal Estrella dentro del caliss o primeras propiedades margen Margen, cero o segundas propiedades padding padding tambien cero o tercera propiedad es box sizing, box sizing, y aqui voy a Y luego voy a usar propiedad de familia de fuentes, familia de fuentes, familia de fuentes, y aquí voy a usar pop ins. Esta fuente es de la familia sensorial. Sopkoma voy a escribir Sanseri. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver el resultado de la fuente. Se puede utilizar cualquier tipo de fuente. Depende de usted. Ahora, vamos a embalar nuestra sección de cuerpo. Yo uso cuerpo. Cuerpo dentro del alias es nuestra primera propiedad se muestra, y voy a usar lino Quiero colocar este texto en medio del discurso. Por eso voy a usar flex. Entonces nuestra siguiente propiedad es justificar contenido, Justificar centro de contenido. También, voy a alinear este ítem. Alinear el centro del artículo. Si configuro este archivo, puedes ver el motivo. Entonces voy a decir estatura mínima. Aquí voy a escribir altura mínima, altura mínima, 100 VH. Con eso, también, quiero decir antecedentes. Para fondo, voy a usar color RGV, RGB. Además, puedes usar cualquier color más oscuro, pero aquí voy a usar algún ancho tres, valor verde es 40, y el valor azul es 53. Si configuro este archivo, se puede ver el. Se puede utilizar cualquier color de fondo de suciedad. Depende de usted. Después siguiente, voy a darle estilo a esta H para empatar. Aquí voy a empatar H dos. Después dentro de los hígados, voy a escribir posición Posición relativa. Nuestra siguiente propiedad es el tamaño de fuente. Tamaño de fuente. 14 VW. Si configuro este archivo, puedes ver el resultado. Ahora se ve perfecto. Y ahora voy a establecer el color de la fuente. Aquí voy a atar color, y voy a usar el mismo color RGV Estoy copiando el valor y lo voy a pegar aquí. Voy a configurar este archivo, y ahora puedes ver que coincide con el color de fondo. Por eso no se puede ver el color. Nuestra siguiente propiedad es taketro. Para eso, de nuevo, voy a usar el color RGV. Pero esta vez, voy a cambiar el velo y nuestro es dos, 108 y para azul, voy a usar 146. Si configuro este archivo, todavía no se puede ver este trazo porque no decimos trazo. Por eso voy a pasar 0.3 VW. Si configuro este archivo, ahora puedes ver el motivo. Además, se puede aumentar este derrame cerebral. Depende de usted, y ahora necesitamos replicar la forma usando Poseo select Para eso, voy a escribir H dos colon colon antes. Después dentro de los caliorss o primeras propiedades contenidas. Y aquí voy a usar la función de agua. Ahora tenemos que pasar este atributo, data text. Copio este atributo y aquí, voy a pasar texto de datos. Si nota, puede ver nuestro texto de datos y nuestro contenido es similar. Por eso va a crear la misma réplica. Nuestra siguiente propiedad es la posición. Quiero posicionarlo absoluto. Entonces necesitamos usar el pedal superior cero superior, P también cero. Además, voy a decir que pesamos por ahora, voy a pasar 30 pixel. Si configuro este archivo, no se puede ver nada porque no establecemos ningún color y altura a este elemento. Para eso, voy a usar propiedad de altura. Altura, 100%. Además, voy a usar el color. Color y aquí, voy a usar un id hexadecimal, hash tag 01 FE 87. Si configuro este archivo, ahora puedes ver el resultado. Por ahora, voy a poner con cero. No va a impactar en nada. Posteriormente, les voy a mostrar por qué necesitamos usar con propiedad. Antes de hacer algo quiero este texto en mayúsculas. Aquí voy a usar la propiedad de transformación de texto, pero antes voy a usar punto y coma Entonces voy a escribir texto transformar texto transformar, mayúsculas Y luego también necesitamos establecer trazo a este clon. Aquí voy a usar esta propiedad y valor y después del color, voy a pasarlo. Pero esta vez, voy a cambiar el velo. Aquí voy a pasar cero VH. Carrera con cero VH. Si configuro este archivo, puedes ver el resultado. Si puedes notar, aquí puedes ver no hay trazo en este clon. Nuestra siguiente propiedad es desbordamiento, desbordamiento oculto. Establece este archivo, ahora podrás ver el resultado. Como puedes ver, nuestro ancho es cero y desbordamiento es zeran por eso no se puede ver el texto Pero si aumento el valor de ancho, déjame mostrarte 40 píxeles y luego establecer este archivo, puedes ver el resultado. Como se puede ver un lento, se siente el texto con el color. De igual manera, si aumento el valor, 90 píxeles y luego configuro este archivo, también se puede ver el resultado. En la animación, necesitamos jugar con esta propiedad, W. Por ahora, voy a hacer que el W sea cero y luego establecer este archivo. A continuación, voy a usar otra propiedad, que es frontera. Frontera, derecha. Borde derecho, y voy a usar borde sólido de dos píxeles. Sólido. Y también, voy a usar un color Decimal HA. 01 FE 87. Si configuro este archivo, puedes ver el resultado. Si aumento el ancho esta vez, así que aquí voy a pasar 120 píxeles y el conjunto de este archivo. Como puedes ver, parece que esta línea siente el color a este texto. De nuevo, voy a pasar cero. Y ahora tenemos que jugar con la animación. Voy a crear una animación. Animación y nuestro nombre de animación es Animate. Y quiero ejecutar esta animación durante 6 segundos y nuestra dirección de animación es lineal, y quiero ejecutar esta animación por tiempo infinito. Aquí voy a usar infinito. Ahora necesitamos crear el marco clave. Aquí el tiempo a la tasa de fotogramas clave. Los fotogramas clave y nuestro nombre de animación es animado. Como pueden ver, tecleé la ortografía incorrecta para animar. Por eso voy a corregirlo. Voy a escribir el nombre animate. Después dentro del caliss en posición 0%, nuevo, dentro de la resistencia Cali voy a establecer con cero Voy a duplicar esta sección. Ahora, en la posición del 70%, voy a establecer con el 100%. Si configuro este archivo, puedes ver la animación, cómo ha funcionado, ha funcionado perfectamente. Si juego con algún valor porcentual con 0%, voy a pasar el 10%. Además, con el 10%, voy a pasar el 100%. A 0% posición, 10% posición y 100% posición, quiero trazo con cero. Pero en 70% posición y 90% posición de esta animación, quiero la semana al 100%. Si paso este archivo, ahora se ve perfectamente, como es el trabajo. Esto es exactamente lo que queremos. Así que gracias por ver este video, estén atentos para nuestro próximo proyecto. 14. Dibujo creativo de la luna: Hola, todos. Una vez más, estoy de vuelta con emocionante animación CSS relacionada con proyectos. Hoy vamos a construir una luna dinámica y visualmente impresionante, efecto de animación giratoria. Como puedes ver, tenemos la órbita central de la luna, y lado a lado, colocamos las letras M y N, la órbita lunar continuamente en un suave movimiento circular y creando un efecto hipnotizante Y aquí usamos g box para posicionar los elementos. Aquí, diseñamos creativamente este elemento y lo colocamos en la posición correcta Y luego simplemente implementamos animación de rotación de 360 grados. Empecemos y veamos cómo podemos crearlo. Como pueden ver lado a lado, abro mi editor de código iso studio y mi navegador usando extensión de servidor en vivo y ya creo un documento STML nombre índice punto HTML Con eso, creo archivo censal Style y vinculo este archivo con este documento. Ahora dentro de esta etiqueta body, al principio, voy a crear un elemento DV, Dev y voy a nombrarlo. Voy a asignar un contenedor de clase, contenedor punto profundo. Es trabajo como envoltorio. Este continuer va a contener todo el elemento requerido para esta animación vez en cuando, voy a añadir los elementos que contiene, como texto, luna, etcétera Ahora, vamos a saltar a este mosaico o archivo CSS. Al principio, voy a usar selector universal star, y luego dentro de la rotonda aquí, voy a usar padding value, padding property, padding zero, margin, también zo Con ese tamaño de caja, dimensionamiento caja, como usar property border box Después de eso, voy a usar la familia de fuentes. Fuente, familia, y aquí voy a usar Area font, Area. Entonces voy a seleccionar cuerpo. Voy a darle estilo a la etiqueta del cuerpo, una especie de cuerpo apretado. Entonces dentro del colss la primera propiedad, voy a usar color de fondo, color fondo, y quiero usar fondo gris oscuro, de lo contrario, fondo azul oscuro Entonces me gustaría ir con gris oscuro, algún tipo tiene etiqueta, 222. Y quiero satisfacer. Después de configurar este archivo, es como se ve nuestra página web. Entonces voy a usar de esta manera flix. De esta manera, flix, Justificar contenido porque necesitamos mover todos los elementos al centro de esta página, algún tipo justificar el centro de contenido, también alinear elemento, alinear, alinear elementos también centro. Ahora va a centrar horizontal y verticalmente todos los elementos. Después de eso, voy a asignar una altura a esta página. Altura aquí, voy a asignar 100 altura de ventana gráfica, 100 VH voy a configurar este archivo A continuación, voy a darle estilo al continente profundo. Para eso, voy a usar su nombre de clase, copiar el nombre de la clase y saltar al archivo CSS tipo dot container dentro del livess la primera propiedad que voy a usar height Voy a asignar 31 EM de altura. Como voy a asignar ancho con 31 EM. Eso es. Básicamente, es un contenedor cuadrado. Con eso, voy a agregar un borde blanco. Para eso, voy a escribir border border property, y aquí voy a usar un pixel solid y nuestro color de borde es hatagFff voy a sub Después de sub este archivo, después de establecer este archivo, aquí puede notar el cuadro cuadrado con un borde sólido de píxel. También, voy a definir la posición y voy a hacerla absoluta. Con eso, voy a definir el color, voy a establecer el color de fuente blanco, totalmente visible. Entonces voy a definir tamaño de fuente también tamaño de fuente pixel. Creo que 20 píxeles es genial para cada uno. Voy a sub esta fi. Ahora el contenedor sirve como marco de estilo. Marco de estilo para nuestra animación. Ahora está listo para sostener el texto y los elementos orbitales. Ahora, vamos a saltar al archivo index ot estimate y crear esta estructura dentro del contenedor. Aquí voy a tomar un total de dos párrafos tipo P, y voy a asignar una clase, y voy a ponerle un nombre más adelante. Y voy a hacer esta línea. Nuestro primer párrafo tiene carácter, y nuestro segundo párrafo tiene carácter. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Se nota que lo posiciona en la esquina superior izquierda. A continuación, voy a darle estilo a ambas letras usando sus nombres de clase. Copio su nombre de clase más tarde y vuelvo al archivo css de estilo y voy a seleccionar punto más tarde. Dentro de las calibraciones, primero, voy a definir tamaño tamaño de fuente, algún tipo de fuente, tamaño y voy a hacerlo 3.5 am, 3.5 AM Voy a satisfacer. Después de satisfle así es como se ve Además, puedes usar una fuente poco más grande, depende de ti. A continuación, quiero posicionar las letras. Quiero colocar una letra a la izquierda y otra a la derecha. Para eso, vamos a usar flexbox. Aquí voy a usar la pantalla de propiedades display, y voy a hacerla flex. Después de eso, alinee el elemento para el centro de alineación vertical. Entonces justificar el contenido, justificar el contenido. Aquí voy a usar espacio entre espacio entre. Voy a archivo subifyteri, así es como se ve. Ahora colocamos con éxito la letra en el lado derecho e izquierdo. A continuación, necesitamos crear la órbita. Para eso, tenemos que ir y saltar al archivo índice y entre estos dos libro mayor, voy a tomar una etiqueta profunda, Dev dot orbit Asigno una órbita de nombre de clase al Dep Elegant. Y dentro de este elemento de órbita profunda, voy a tomar una etiqueta P, párrafo y herm pass O, y voy a sub este archivo Ahora se puede notar que la O se coloca entre las dos letras. Básicamente la órbita de colocada entre estas dos letras. Ahora vamos a hacer mosaicos este div orbital y el elemento P, que está dentro del elemento orbit div. Ahora voy a saltar a este estilo CSS cinco. Aquí voy a teclear órbita y dentro del CarbasSF voy a posicionarlo en posición, y voy a hacerlo relativo Entonces voy a definir realzar a esta órbita d elemento Entonces escribe altura. Aquí voy a asignar altura 18 punto lm cinco N. Y voy a sub este archivo. Y también, voy a definir con 18.18 0.7 5:00 A.M. Así que aquí va a crear una caja cuadrada Y para hacer circular esta caja cuadrada, voy a usar propiedad de radio de borde, radio de borde, y voy a hacerla 50%. Quiero sub este archivo. Y para entender el borde, soy bueno en un borde, algún tipo, borde quiero borde sólido, un píxel, borde sólido, sólido, el color del borde es tiene etiqueta si si F. Ahora se puede ver la órbita es la forma de circo dentro de esta continua profunda. Ahora, vamos a trabajar en la etiqueta P, que está dentro de la órbita, algún tipo, punto, órbita, párrafo P luego dentro de la surge, primero, voy a definir posición y quiero hacerla absoluta. Después de eso, top Ami pastp valor 4.7 M. También tarde nd pase, valor tardío dos EM Entonces voy a definir el tamaño de la fuente también, tamaño de la fuente, y voy a hacer que sea 3.5 am. Voy a establecer este archivo. Apres este archivo, aquí es donde colocamos este círculo. Urec este archivo, aquí es donde colocamos la O más tarde. Básicamente, quiero decir el mentiroso O ahora posiciona en el círculo orbital y da el aspecto exacto que queremos Ahora, vamos a crear el movimiento. Para eso, necesitamos saltar al archivo estal y ahora debajo de la etiqueta P aquí voy a crear otra etiqueta dip, la luna dardo Me doy cuenta de este archivo, este elemento sería un círculo más pequeño el cual representa una luna. También, va a rotar junto con la órbita. Ahora vamos a darle estilo a este elemento lunar. Aquí dentro de la lima de estilo, voy a apuntar a wn moon dentro del Clsus Al principio, voy a definir altura, altura, voy a ponerle altura ocho EM. También, voy a decir con EM. Como necesitamos hacer nuestra luna redonda, así que voy a usar radio fronterizo, radio fronterizo, voy a hacerla 50%, 50%. Con eso, necesitamos proporcionar un color al color de fondo. Quiero ver el color de fondo, algún color de fondo ajustado, y aquí voy a proporcionar hastag un cinco, un cinco, un cinco, voy a sub este archivo, pero quiero posicionar esta luna centro de esta órbita profunda Para eso, vamos a utilizar la probidad Flexbox. Dentro de esta órbita, voy a escribir, mostrar, voy a hacerla flex, justificar contenido, centrar, también alinear, alinear elementos centrados, y voy a sub este archivo. Yo sub este archivo, como pueden ver, paga el elemento luna, centro de esta órbita. Ahora, asignemos una pequeña sombra de caja a esta luna, pero antes de que la vaya a posicionar, haría absoluta aquí voy a usar sombra de caja para proporcionar un efecto creciente. Algún tipo box shadow aquí voy a usar un Vd aquí utilizo este valor de sombra de caja para crear este efecto creciente de esta luna. Y las sombras están espaciadas por igual. Para el primer valor, aquí lo difundimos 0.6 am y para el segundo valor, su uso 1.2 am y para el tercer valor, su uso 1.8 am. En cada etapa, extendemos esta sombra hasta 0.6 am y creamos este efecto hola. Por último, tenemos que trabajar en la animación de spinning. Tenemos que rotar la órbita. Ahora vamos a crear la animación. Aquí voy a hacer el fotograma clave en los fotogramas clave rojos, y voy a nombrar el giro de animación. Y dentro de lo menos al 100% de duración, quiero aplicar transform property, transform, y aquí voy a usar rotate value. Rotar, y voy a pasar rotar DAG de 360 grados. Eso es. Voy a satisfacer. Ahora, tenemos que llamar a esta animación en nuestra órbita. Ahora, vamos a saltar a la órbita elemento profundo, y aquí, voy a llamar a la animación animación y nuestro nombre de animación es spin. Y nuestra duración de animación es de ocho segundos. La función de sincronización de animación es lineal. La iteración de animación cuenta infinita porque quiero ejecutar esta animación por tiempo infinito, así que paso infinito y voy a establecer este valor Después de establecer este valor, como se puede ver, inicia o animación y gira todo el elemento orbital 360 de dentro de ocho segundos. Ahora, tenemos que ocultar esta caja cuadrada y la trayectoria orbital. Para eso, solo necesitamos ocultar el valor del borde. Entonces para escribir, algunos comentan esta propiedad. Entonces esto es ocultar la órbita, círculo, y luego voy a ocultar este valor de agua del contenedor, esta caja cuadrada. Y voy a poner este archivo. Después de configurar este archivo, aquí podrás disfrutar este hermoso efecto de rotación de luna. Entonces espero que ahora te quede claro cómo podemos construir esta hermosa animación. Entonces gracias por ver este video Estadio para nuestro próximo proyecto.