Animación de CSS y GSAP: viaje de principiante a avanzado

1. Introducción al curso: Hola, y bienvenidos a CSS y GSP Animation, Bane to Advanced Journey Course Este es el curso más detallado y completo sobre Animación CSS. Él. Mi nombre es John Shorter, y Full Stew PP Park e instructor en línea Ahora, veamos qué vamos a aprender de esta clase. Vamos a iniciar este tutorial con filtro CSS. Entonces vamos a aprender transición CSS, función de temporización de transición, retardo de transición, luego vamos a saltar a la sección de transformación. Aquí vamos a aprender rotar, traducir, escalar, sesgar métricas Después de eso, vamos a aprender tres d transformación, tres d traducir, escalar, rotar, etcétera A continuación, vamos a aprender la parte más importante, la perspectiva. Luego transformamos el estilo goular, la visibilidad de retroceso, luego vamos a saltar a la sección de animación de Sess, como fotogramas clave, cómo podemos operar la animación, etcétera Entonces tenemos animación gular llenar más, modo pegar. Después de conocer toda la propiedad de animación Sess, vamos a comenzar la animación GSP Sí, como te dije, vamos a aprender animación completa. En este tutorial cubro, animación GSP también. En los dos primeros tutoriales, vamos a introducir cómo podemos usar la animación DSP y cómo podemos implementarla Y luego vamos a aprender sobre la línea de tiempo del GSP, cómo podemos usar la línea de tiempo del GSP A continuación, vamos a crear un proyecto usando animación de línea de tiempo GSP Entonces uno por uno, voy a cubrir múltiples proyectos de animación CSS, como enlace animado, tres D O flip, etcétera Déjame mostrarte la demostración práctica, qué tipo de proyecto vamos a cubrir en esta clase. Este es nuestro primer proyecto donde voy a crear un sencillo botón animado. Si pongo el cursor sobre este botón, se puede ver la transición. Es una muy sencilla. Entonces vamos a crear este botón de tres D flip hover Si coloco el cursor sobre él, puedes verlo voltear el botón, y está escrito, da clic aquí Pulsa, si pongo el cursor sobre él, como puedes verlo, voltea el botón Es un botón flip de tres D, y también puedes notar los tres Dfect A continuación, vamos a crear texto animado de mesa. Aquí puedes ver el efecto de parpadeo de la luz. También, se puede ver el Shan. Este texto es t. Aquí puedes escribir cualquier cosa. Supongamos hola palabra. Este es uno de los efectos más geniales que he visto. A continuación, vamos a crear estos ives animados. W va a seguir mi cursor. Como puedes ver cuando me muevo por cursor, acuerdo a la posición del cursor, sigue a los ives. Siempre que me muevo por el cursor sobre el mot, cambia la reacción física Entonces vamos a crear este círculo de tres D V. Se puede ver el movimiento de los círculos. En el siguiente proyecto, vamos a crear la animación de la capa D. Si pongo el cursor sobre este I, se puede ver el resultado. Se pueden notar las capas transparentes debajo de ella. Si una deuda por cursor vuelve a su propio plato. En el siguiente proyecto, vamos a crear esta animación de rotación de tres d. Como puedes ver cómo se adaptaba a la rueda. Vamos a crear este tipo de proyectos. A continuación, vamos a crear esta animación de nubes lluviosas. Como se puede ver en esta nube, cómo caen las gotas de lluvia y parte superior cae en el suelo, es vanagrosa. Y vamos a crear esta animación de carga. Se trata de una animación. Por fin, vamos a realizar esta animación de línea de tiempo horizontal usando GSA Sí, también vamos a cubrir GSAP en este tutorial. Vamos a crear un proyecto usando GSA, una animación de línea de tiempo horizontal, y cómo vas a notar la transición de estas líneas de tiempo ¿A qué esperas? Comencemos la animación juntos. 2. Tutorial de filtro de CSS parte uno: Hola chicos, me alegro de verles de vuelta. Este es el primer tutorial relacionado con la animación CSS, y vamos a comenzar este tutorial usando la propiedad de filtro CSS. Usando filtro, podemos cambiar los efectos de imagen, y tenemos un total de 12 efectos que podemos usar en nuestra imagen. Nuestro nombre de primer efecto es ninguno. Si no quieres usar ningún efecto, puedes usar esta propiedad. Y usando propiedad borrosa, puedes difuminar tu imagen Y usando el valor de brillo, puedes reducir el brillo o aumentar el brillo. Para el contraste, puede usar el valor de contraste, y el valor roto funciona como una sombra de esta imagen Y usando el valor scal, podemos en blanco y negro nuestra imagen. Y usando rotar, puedes rellenar diferentes colores con diferentes ángulos. Y nuestro siguiente valor es invertir. Si recuerdas la vieja regla de la cámara, entonces puedes entender el efecto muy fácilmente. Nuestro siguiente valor es la opacidad. Utilizando el valor de opacidad, podemos controlar la transparencia de esta imagen Si quieres controlar la saturación de esta imagen, puedes usar el valor saturate Si quieres más color en tu imagen o menos color en tu imagen, puedes usar este valor. Nuestro siguiente valor es CFA, y nuestro último valor es URL Este valor URL, trabajar con imágenes SVD. En este tutorial, voy a cubrir estos seis efectos. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi estudio Viso Cortor y mi navegador usando la extensión Live Server, y ya creo un documento estil en mi directorio de trabajo actual Como pueden ver en mi navegador, hay una imagen, y ya inserto esta imagen usando la etiqueta S. Como puedes ver en mi sección de estilo, decimos 600 píxeles ocho a esta imagen, y altura o dos, y voy a usar todo este filtro en esta imagen. Los efectos son jugar un papel muy importante en la animación CSS. Por eso empiezo este tutorial con efectos CSS. Al principio, voy a usar la propiedad de filtro. Filtro. Nuestro primer valor es ninguno. Si configuro este archivo, aquí puedes ver, no hay cambios, no hay cambios en esta imagen. Porque este es el valor predeterminado de esta propiedad, y nuestro siguiente valor es el desenfoque. Entonces para atar Blur. Supongamos que quiero difuminar esta imagen hasta cuatro píxeles. Si configuro esta imagen, aquí puedes ver el resultado. Si quieres hacerlo más borroso, puedes aumentar el valor. Supongamos 20 píxeles. Si configuro este archivo, puedes ver el resultado. El valor predeterminado de esta propiedad de desenfoque es cero. Si utilizo valor cero y luego configuro este archivo, aquí puedes ver el resultado. Ahora nuestra imagen es claramente visible. Y esta es la edad de uso del valor de desenfoque, y nuestro siguiente valor es el brillo. 100 es el valor predeterminado de brillo, 100%. Este trabajo de valor con porcentaje. Si guardo este archivo, se puede ver que no hay cambios, y ahora quiero reducir el brillo, 20%. Si guardo este archivo, puede ver el resultado. Reduce el brillo de esta imagen. Si quieres volver al brillo normal, entonces necesitas pasar 100. Si configuro esto puedes ver el resultado. Si quieres aumentar el brillo de esta imagen, entonces necesitas pasar más del 100% de valor. Supongamos que voy a pasar 300%. Si configuro este archivo, puedes ver el resultado. Si pasamos 0% de brillo y luego configuramos el archivo, aquí puedes ver, ahora es completamente negro. Vamos a saltar al siguiente valor, que es el contraste. Entonces, para escribir, contrastar. Cien es el valor hábilmente del contraste, 100%. Si configuro este archivo, puedes ver el resultado. Si quieres aumentar el contraste de esta imagen, necesitas pasar el entonces necesitas pasar más del 100% de valor. Supongamos 200%. Si configuro este archivo, ahora puedes ver el contraste. Si quieres disminuir el contraste, entonces necesitas pasar por debajo del valor del 100%, algo del 50%. Si configuro este archivo, se puede ver el contraste. Si pasamos 0% de valor y luego establecemos el archivo, ahora puedes ver que no hay contraste en esta imagen. IE p 0%, como puedes ver, nuestra imagen se convierte en color gris. Nuestro siguiente valor es la sombra paralela. Pero antes de usar este valor, voy a reducir la imagen. 400 píxeles. Este valor es similar a la propiedad de sombra de caja. Primero, necesitamos proporcionar sombra horizontal. Voy a proporcionar diez píxeles. Esto es para la dirección del eje x. A continuación, necesitamos proporcionar sombra vertical. Para el eje y, voy a pasar diez píxeles una vez más. Entonces voy a pasar el blurrinne de la sombra, que es de siete píxeles Entonces tenemos que pasar el color de la sombra. Voy a usar el color verde. Si configuro este archivo, aquí puedes ver el resultado. También se puede cambiar la hinchazón de la sombra. AI pus, cero píxeles, y luego establecer el archivo. Ahora puedes verlo actuar como una sombra sólida. No sólo eso, se puede utilizar el valor negativo en este parámetro. Supongamos que quiero esta sombra menos y x dirección. Si configuro este archivo, puedes ver el resultado. Este es el efecto de sombra paralela de empleo en el Reino Unido, y nuestro último valor es la escala de grises. Déjame mostrarte. Escala de grises. Mediante este efecto, podemos convertir nuestra imagen en color en una imagen en blanco y negro. 0% es el valor predeterminado de este parámetro de escala de grises. Si configuro este archivo, aquí puedes ver que no hay cambios. Pero si utilizo al 100% y luego configuro el archivo, ahora puedes verlo completamente girado esta imagen en blanco y negro. Necesitas recordar, necesitamos pasar valor entre cero 200%, no más de 100%, puedes usar cualquier valor entre este Supongamos que quiero pasar el 70%. Si configuro este archivo, puedes ver el resultado. Ahora la imagen se llenó con 70% de gris y 30% de color. Esto es para este tutorial. En el siguiente tutorial, voy a cubrir estos filtros restantes. Rota, invertir, opacidad, saturar, sepia Gracias por ver este video, mantente atento a nuestro próximo tutorial. 3. Tutorial de filtro de CSS parte dos: Hola chicos, me alegro de verles de vuelta. Esta es la segunda parte del tutorial filtrado CSS. En esta tuterial, vamos a cubrir estos seis filtros Rota, invierte, opacidad, saturar, Spa, y URL Empecemos la práctica y veamos cómo funciona. Aquí puedes ver, lado a lado, abro mi visual studio coreor y mi navegador usando la extensión Live sever, y abro mi documento estel anterior para este ejemplo Al principio, voy a llamar al filtro filtro de propiedades. Nuestro primer valor es rotar. Y aquí puedes usar 023 valor de 60 grados. Voy a aprobar 150 grados grados, después establecer este archivo, aquí se puede ver el resultado Si paso 100 grados y configuro este archivo, se puede ver el resultado diferente. Usando este valor, puedes probar combinación 360, 360 grados. Si configuro este archivo, puedes ver el resultado. No hay ningún parámetro negativo para este valor. Vamos a saltar a nuestro siguiente valor, que se invierte. Entonces escribe invertir. Si configuro este archivo, aquí se puede ver, se invirtió completamente la imagen, y podemos pasar el parámetro cero al cien por ciento. Supongamos que quiero pasar 0%. Si configuro este archivo, aquí se puede ver, este es el valor diferido de esta propiedad Si paso el 50%, y luego configuro el archivo. Si usamos el valor del 50%, ahora está completamente convertida en un color gris. Si aumento el valor, algo 70%, y configuro este archivo. Ahora puedes ver el resultado. Todavía invierte nuestra imagen, pero se puede ver la capa gris sobre ella. De igual manera, si reduzco el valor por debajo entonces 50%, algo 20% y luego configuro el archivo, como se puede ver no invertir la imagen por completo. Este es el medidor de uso del valor invertido. Nuestro siguiente valor es la opacidad. Como pueden ver, ahora nuestra imagen es completamente visible, y ahora quiero que esta imagen sea transparente. Para ello, necesitamos usar el valor de opacidad. Si configuro este archivo, como puede ver, no hay cambios porque no proporcionamos ningún parámetro en este valor. Ahora quiero hacer esta imagen semitransparente, así que quiero aportar el 50%. Si configuro este archivo, puedes ver el resultado. Si haces esta imagen completamente transparente, necesitas pasar 0%. Si configuro este archivo, las imágenes siguen existiendo en este lugar, pero lo hicimos completamente transparente. Si haces esta imagen completamente visible, necesitas pasar el 100% de valor. Espero que ahora puedan entender este valor, cómo funciona. Espero que ahora puedas entender valor de la oposidad, cómo es el trabajo Nuestro siguiente valor es saturar. Este valor va a proporcionar fuerza en píxeles de color. Así que totype saturar. Usando este valor, puedes controlar la fuerza de este color. Cien es el valor por defecto de esta propiedad, 100%. Si configuro este archivo, aquí se puede ver que no hay cambios, y ahora quiero saturar este color Quiero pasar 200%. Si configuro este archivo, puedes ver el resultado. Se puede ver el cambio del color, y si quieres que se desatura, necesitas pasar valor inferior al 100%, algo 70% Si configuro este archivo, ahora se puede ver el color de la imagen luciendo muy opaco. Si paso el valor del 0% y luego configuro el archivo, Ahora puedes ver esta imagen completamente convertida en una imagen de escala de grises, significa imagen en blanco y negro. Espero que ahora entiendas lo que es saturar. Nuestro siguiente valor es CFA. Entonces para empatar CFA. Este filtro te da el aspecto vintage de esta imagen. Si configuro este archivo, puedes ver el resultado. Aquí puedes pasar parámetro entre cero 200%. Si paso 0% y luego configuro este archivo, ahora puedes ver la imagen real. Si aumento el valor, 50% y luego configuro el archivo, aquí se puede ver que aplica algún efecto CFA en esta imagen, y 100 es el valor de esta propiedad No hay ningún valor negativo y valor píxel para esta propiedad. O último valor es URL. Para ello, debes tener conocimiento de las imágenes SVG. Si no tienes conocimientos básicos de animación SVG o imagen SGD, puedes consultar mi curso. Este curso está disponible en esta plataforma. Sólo tienes que ir a mi perfil de instructor y podrás encontrar este curso. Lo último que quiero decir, supongamos que quiere aplicar múltiples efectos en esta imagen. Supongamos que primero quieres usar efecto de sangre en esta imagen. Así que quiero escribir sangre a pixel. Entonces quiero aplicar efecto PR en esta imagen. PR, 50%. Si configuro este archivo, puedes ver el resultado. Y ahora quiero aumentar el brillo de esta imagen. Brillo, 200%. Si configuro este archivo, puedes ver el resultado. Puedes agregar tanto efecto como quieras. Espero que ahora este concepto de filtro CSS sea claro para ti. En el próximo terial, vamos a entender qué son las transiciones CSS Gracias por ver este video, estén atentos para nuestro próximo Tual 4. Tutorial de transición de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender un nuevo CSS relacionado con propiedades, que es la transición CSS. Esta es una de las propiedades más importantes para la animación CSS. Ahora la pregunta es, ¿qué es la transición? Suavidad media de transición. Supongamos que desea cambiar una posición de un objeto. De lo contrario, desea aumentar el ancho del objeto. Déjame mostrarte el ejemplo. Como pueden ver en mi documento de estimación, tenemos un total de dos D, y quiero aumentar el ancho cuando flote sobre mi objeto rojo, y ya establecí una transición en este objeto Si coloco el cursor en este objeto, se puede ver el resultado Se puede ver cada vez que el contenedor extiende el ancho, se puede ver un efecto de suavidad. Si no usáramos el efecto transición, el trabajo se haría de una sola vez. Entonces no se puede ver la suavidad cuando aumenta el ancho Por eso necesitamos usar la transición. De igual manera, para nuestro siguiente objeto, reducimos el radio de frontera que sobre el objeto. Déjame mostrarte. Como pueden ver, hay una hermosa transición. Si no usamos esta transición, entonces se haría de una sola vez. Se haría solo un parpadeo en tu I. Para propósitos de suavidad, necesitamos usar esta transición Hablemos de propiedades. Básicamente, la transición viene con cinco propiedades. Transición, propiedad de transición, duración de transición, retardo de transición y función de temporización de transición. Básicamente, nuestra primera propiedad es extremo corto de todas estas propiedades. Si desea utilizar esta propiedad de cuatro en una línea, en ese caso, puede usar solo la propiedad de transición. Básicamente, nuestra primera propiedad es propiedad de transición. Usando esta propiedad, podemos especificar, ¿ dónde desea utilizar estas transiciones? Supongamos que quiero usar esta transición para el radio de borde. De lo contrario, W. En ese caso, necesitamos declarar el nombre de la propiedad, algo así como propiedad de transición, radio de borde, de lo contrario, propiedad de transición, W. Nuestra siguiente propiedad es la duración de transición. En esta propiedad, puede especificar cuánto tiempo desea ejecutar la animación. Nuestra siguiente propiedad es el retraso de transición. Usamos esta propiedad para determinar cuándo comenzará la transición, y nuestra última propiedad es la función de sincronización de transición. Esta propiedad viene con algunos efectos incorporados. Y usando estos efectos, puedes controlar la suavidad de esta transición. Esto es. Estudiemos prácticas y veamos cómo funciona. Aquí puedes ver, lado a lado, abro mi visoto Cortor y mi navegador usando la extensión Lipseer, y ya creé el documento EstiML llamado Aquí puedes ver un profundo dentro de este documento. Y la altura profunda es de 200 píxeles y W es de 200 píxeles también, y no uso ningún efecto Hva en esta def Y ahora quiero aumentar de esta profundidad. Entonces primero, voy a usar la propiedad de transición. Propiedad de transición. Como te dije, quiero aumentar el wi. Voy a llamar a la propiedad de ancho. Con esta propiedad, necesitamos usar otra propiedad. Necesitamos usar la propiedad de duración de transición , duración de transición. Usando esta propiedad, podemos declarar cuánto tiempo queremos ejecutar esta transición, y quiero ejecutar nuestra animación durante 2 segundos. Voy a escribir dos a. Puedes tomar tu propio valor. De lo contrario, puedes usar milisegundos también. Cuando coloco el cursor en esta D, quiero aumentar el ancho del contenedor Voy a usar pseudoclas. Punto un colon flotando. Después dentro de las calibraciones, quiero aumentar el ancho del contenedor Entonces escribe con 400 píxeles. Si configuro este archivo, si configuro este archivo y coloco mi cursor en esta profundidad, se puede ver la transición, y se puede ver la suavidad de esta De igual manera, si vuelo el cursor hacia fuera, también se puede ver la suavidad Veamos qué pasa si me quito la transición. Voy a comentar esta propiedad dos. Si configuro este archivo y coloco el cursor en este cuadro, puedes ver el resultado No hay suavidad, cuando aumenta el ancho Sólo parpadear en tus ojos, completa la transformación Es por eso que necesitamos usar la propiedad de transición. Porque es darle un hermoso efecto de suavidad a esta transformación Como puedes ver, solo aplicamos esta transición en nuestro ancho. Pero si aumento la altura en nuestro selector de hover, altura, 350 píxeles Y luego establecer este archivo. Si vuelo el cursor, como pueden ver, apenas parpadeo en su Iy, aumenta la altura Pero aún se puede ver el efecto de suavidad en ancho. Si desea agregar el mismo efecto para la altura, entonces después de ancho, coma, necesita escribir el nombre de la propiedad, altura. Además, es necesario declarar la duración de esta transformación. Quiero usar tres segundos. Si configuro este archivo y coloco mi curser en este de, puedes ver el resultado O transformación de ancho completo en dos segundos, pero nuestra transformación de altura completa en tres segundos. No sólo eso, podemos aplicar el mismo efecto para el color de fondo. Algunos para escribir, fondo, verde. También necesitamos llamar a esta propiedad fondo, altura, coma, fondo. Para antecedentes, quiero usar cuatro segundos. Si configuro este archivo, y quienquiera que sean mis curs en este de, se puede ver que tardó cuatro segundos en cambiar el color Esta es la uskase de la propiedad de transición y la duración de la transición Ahora quiero usar todo este valor en una sola línea. Voy a comentar esta línea de dos, y ahora voy a llamar a sólo transición. Ahora voy a usar todo el valor en una sola línea. Voy a copiar los valores y pegarlo aquí. Además, voy a copiar los valores de duración, y después de un espacio, voy a pegarlo. Si pongo este archivo y hober mi auto en esta profundidad, puedes ver todos los efectos a la vez Usando esta propiedad, podemos convertirla en un liner. Este es el extremo corto de toda esta propiedad. Al principio, debe declarar los nombres de las propiedades de transición y luego debe declarar el tiempo de duración de la transición. Ahora, supongamos que quiere usar dos segundos de duración de transición para toda esta transformación. En ese caso, puedes escribir todo el cabello A doble, y además, necesitas pasar solo un tiempo de duración, dos segundos. Ahora va a aplicar el efecto de transición, todas estas propiedades. Si guardo este archivo y hob M cursor y cursor de vitrocerámica en este de, se puede ver el resultado. Al mismo tiempo, aplica la suavidad en altura ancho y fondo Si quieres usar la misma duración para todo este efecto, puedes usar esta taquigrafía, todos Esto es para este tutorial. En nuestro próximo tutorial, vamos a hablar sobre la función de temporización de transición. Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 5. Tutorial de función de temporización de transición de CSS: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a hablar sobre la función de temporización de transición. Usando esta función, puede controlar la suavidad de esta transición Estos son algunos valores comunes relacionados con la función de temporización de transición, es lineal, es, está fuera, está adentro hacia fuera, bic baser También, tenemos otros tres valores, pero estos no son tan importantes. Nuestro primer valor es es que es un valor predeterminado. Especifique un efecto de transición con un inicio lento, luego primero, luego nd lentamente. Nuestro siguiente valor es lineal, especifica un efecto de transición con la misma velocidad de principio a fin. De principio a fin , mantuvo la misma velocidad. Nuestro siguiente valor está en. Especificar un efecto de transición con un inicio lento, y nuestro valor de salida es jugar el papel opuesto de is in. Especifique un efecto de transición con un final lento, y nuestro siguiente valor de tiempo es e in out. Especificar un efecto de transición con un inicio y un final lentos, y nuestro último valor es basier cúbico Vamos a definir sus propios valores en una función basier cúbica Puedes establecer tus propios valores de tiempo. Sin este valor de seis, tenemos otros tres valores, que es el inicio de paso, final del paso y los pasos. Estos no son tan importantes, pero es bueno saberlo. Veamos cómo está funcionando prácticamente. Aquí se puede ver, abro un sitio web Q semana pens.com. Aquí puedes ver el ejemplo en tiempo real de estos valores. Es lineal e in es out y e in out. Al principio, voy a aumentar el tiempo de duración, la duración a la segunda. Entonces voy a iniciar este ejemplo con valor por defecto. E. Si hago clic, botón de ir, se puede ver el resultado. Nuestro siguiente valor es lineal. Si hago clic en el botón Ir, podrás ver el resultado. valor lineal mantiene la misma velocidad de principio a fin, y luego entra. Si hago clic en el botón Ir, podrás ver el resultado. Y luego salir. Si hago clic en el botón ir, podrás ver el resultado, y nuestro último valor es. Es en efecto de transición especificado inout especificado con inicio lento y final lento Déjame mostrarte otro ejemplo. Como puede ver, hay cinco d diferentes, y utilizo cinco valores de función de temporización diferentes para ellos. Si yo ber mis autos son todos de este ítem, puedes ver el resultado. Esto es para lineal, y esto es para e, y esto es para. Esto es para e, y esto es para. Espero que entiendas la diferencia. Vamos a saltar al creador de stdio visual y veamos cómo podemos usarlo. Como puedes ver en tu pantalla, lado a lado, abro mi cortor visual studio y mi navegador usando la extensión Lipsever, y ya creé el documento EstiML llamado index dot EstiML llamado Como pueden ver, ya creé d para este ejemplo. En nuestra tuteral anterior, aprenderemos sobre la propiedad de transición y la duración de la transición Pero en este Tutteral, vamos a aprender la función de temporización de transición Entonces voy a llamar a esta propiedad. Función de temporización de transición. L et's inician la práctica con el valor por defecto, que es E. Así tipo, es. Si guardo este archivo y pongo el cursor en este de, puedes ver el resultado Este efecto de transición comienza con lento, luego primero, y luego termina con lento. Este es el valor predeterminado, y nuestro siguiente valor es lineal. Algunos lineales. Si guardo este archivo y pongo el cursor en este de, puedes ver el resultado Este efecto de transición mantuvo la misma velocidad de principio a fin, y nuestro siguiente valor está en. De alguna manera escribir está adentro. Si guardo este archivo y pongo el cursor en la profundidad, especifico un efecto de transición con un inicio lento De igual manera, tenemos valor opuesto, está fuera. Algo de raíz t está fuera. Si pongo este archivo y berma autos en esta caja, como puede ver, especifique un efecto de transición con un final lento Nuestro siguiente valor está dentro. Alguna raíz t está adentro hacia afuera. Si configuro este archivo, y una vez más, vuelvo a colocar M autos en esta d, puedes ver el resultado Se especifica un efecto de transición con un inicio y un final lentos. Hablemos de otro valor, que son los pasos. Pasos tipo Someo Aquí podemos completar nuestra transición con pasos. Supongamos que quiero completar esta transición en dos pasos. Quiero pasar dos aquí. Si pongo este archivo y guardo mis autos en esta profundidad, se puede ver el resultado. Como puedes ver en dos pasos , completa la transición. Yo me quito mi curser, se puede ver el mismo efecto En dos pasos, se completa la transición, y ahora quiero completar esta transición en cinco Paso. Si configuro este archivo y pongo mi cursor en esta caja, puede ver el resultado En cinco pasos, completa la transición. Este es el uso quas del valor de pasos. La mayoría de las veces, tratamos de evitar este valor. No utilizamos esta val. Pero para fines educativos, debes tener conocimiento al respecto. Nuestro siguiente valor es el inicio de pasos. Entonces voy a escribir, Paso, empezar. Si configuro este archivo y pongo el cursor en esta profundidad, se puede ver en un solo paso que completa la animación Pero si uso el valor final del paso, Steve, termino y configuro este archivo, yo pongo el cursor, va a iniciar mi animación después de 2 segundos. Déjame mostrarte. Entonces voy a poner mi cursor en esta profundidad Como puedes ver hasta dos segundos, inicia la animación, y completa la transición en un solo paso. Este es el caso de uso del valor final del paso. Vamos a saltar al último valor, que es más baser cúbico Así escriba baser cúbico. En Cuba basier, puedes completar la animación en cuatro pasos Cuando usamos el valor de paso, en nuestra transición, no hay suavidad. Pero en Qubic baser, podemos mantener la suavidad de la Supongamos que para nuestro primer paso, voy a tomar 0.5 segundos. Para nuestro segundo paso, voy a tomar 0.6 segundos, y para nuestro tercer paso, voy a tomar 1 segundo. Para nuestro cuarto paso, voy a tomar 0.1 segundo. Si guardo este archivo, y Ober mis autos están en rojo profundo, se puede ver el resultado Empezó lento y luego terminó primero. Para nuestra primera salvada, tardó 0.5 segundos, y para nuestro segundo steve, tardó 0.6 segundos, y para nuestro tercer steve, tardó 1 segundo, y para nuestro último salvamento, tomó 0.1 segundo. Este es un caso cúbico vs valor. Puedes cambiar la duración como quieras. Espero que ahora te quede claro qué es la propiedad de la función de sincronización de transición. En nuestro siguiente tutorial, vamos a hablar sobre la propiedad de retardo de transición. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 6. Tutorial de retraso de la transición de CSS: Hola, chicos, me alegro de verles de vuelta. En este Tutorial, vamos a aprender qué es la propiedad de retardo de transición. Básicamente, es mezquino ¿después cuánto tiempo quieres iniciar la transición? Empecemos la práctica y veamos cómo funciona. Como pueden ver lado a lado, abro mi visa studio coreor y mi navegador usando la extensión Lipseer, y abro mi documento de estimación anterior Vamos a usar la propiedad de retardo de transición. Voy a empatar retraso de transición, y voy a pasar tres segundos de valor, tres S. Si pongo este archivo y autos Hoberm que están en este de, como pueden ver, después de tres segundos, inicia la De igual manera, si elimino por cursor, como pueden ver, hasta tres segundos, se completa la transición. Puedes establecer cualquier hora como quieras. Este es el caso de uso de la función de retardo de transición. Ahora voy a usar taquigrafía toda esta propiedad. Como puede ver, el uso total de cuatro propiedades de transición, propiedad de transición, transición, duración, transición, función de temporización y retardo de transición. Quiero que sea un trazador de líneas. Para eso, al principio, voy a comentar estas cuatro propiedades de transición. Y luego voy a llamar a la transición. Al principio, es necesario declarar el nombre de la propiedad. En nuestro caso, w, sonido pega w aquí. Entonces tenemos que pasar el valor de duración de transición, que es de dos segundos, dos A, y luego vienen función de temporización de transición, que es ese. Y nuestro último valor es el valor de retardo de transición, que es de dos segundos. Ahora bien, no necesitamos usar estas cuatro propiedades. Solo hay que recordar, tenemos que seguir esta secuencia. Primero, unidad a más propiedad, luego unidad a más duración, y luego unidad a más función de sincronización, en la última unidad a más retraso. Si configuro este archivo y hobercur en este de, se puede ver hasta dos segundos, inicia la animación Como puedes ver, ha funcionado perfectamente. Y ahora quiero decirte una cosa importante. Esto no es necesario que usemos transición con solo selector de libración Puedes usar esta transición cuando cargues tu página. También una cosa hay que recordar, si no declaramos la propiedad en nuestro caso con, así que voy a comentar esto. Y luego establecer este archivo, como se puede ver, no va a funcionar correctamente. Necesitamos declarar la propiedad antes de usar esta propiedad en nuestro selector Huber, y debe recordarla Ahora voy a usar esta transición con diferentes pseudo selectores Entonces escribe activo. Al principio, eliminemos el retraso. Y luego voy a poner este archivo. Si vuelo el cursor mis autos están en esta profundidad, como pueden ver, no está funcionando, porque nuestro pseudo selector está activo Necesitamos presionar la fuga del mouse para ejecutar esta animación. Déjame mostrarte. Como pueden ver, sigo presionando mi fuga del mouse y es ejecutar mi animación. Cuando nuestro ratón enfermo está activo, entonces va a realizar la animación. De lo contrario, no es trabajo. Entonces esto es todo para este tutorial. Espero que ahora todas las propiedades de transición sean claras para ti. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 7. Introducción a CSS Transform 2D: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva propiedad, que se transforma. Básicamente, nos vamos a centrar en la transformación. Al principio, veamos algún ejemplo, qué es transformar. Aquí puedes ver dos ejemplos. Este es el elemento profundo normal, y este elemento profundo se gira en sentido horario 20 grados. Usando a la transformación, podemos rotar cualquier profundidad, en sentido horario, de lo contrario, en sentido contrario a las agujas del reloj. De igual manera, tenemos otro ejemplo. Esta es la profundidad normal, y este elemento profundo está sesgado 20 grados a lo largo del eje x y diez grados a lo largo del eje y Así podemos sesgar nuestro elemento, rotar nuestro elemento, escalar nuestro elemento y muchos más Veamos cuáles son los valores en la transformación de dos D. Como puede ver, tenemos un valor total de 11 en dos transformaciones D. Traducir, traducir x, traducir Y, rotar, escalar, escalar X, escala y, Q, QX, QY, y nuestro último valor son métricas Tenemos otro valor, que es el valor predeterminado, que es ninguno. Usando la propiedad de matriz, puede usar todo este valor en una línea. En este tal, voy a cubrir este valor de cuatro, traducir, traducir x, traducir y, y rotar. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi creador de visual studio y mi navegador usando la extensión Lip Server. Ya creé el documento estil llamado index dot STL. Como pueden ver, dentro de mi estructura estil, ya creé el elemento Dep, y configuré 200 píxeles de ancho y 100 píxeles de alto, y también configuré el color de fondo y Al principio, voy a iniciar esta transformación con valor de rotación. Así que la putrefacción transforma la propiedad. Y voy a usar el valor de rotación. Dentro de los paréntesis, necesitamos pasar el parámetro grado. Supongamos que quiero rotar este elemento 40 grados. Entonces voy a pasar 40 dg. Si guardo este archivo, se puede ver el resultado. De igual manera, si paso 90 grados y luego guardo este archivo, como pueden ver, nuestro elemento profundo gira 90 grados. Nuestro valor de rotación es parte de dos transformaciones. No sólo gira nuestro elemento, también gira nuestro contenido. No sólo eso, también se puede utilizar el valor negativo. Supongamos que quiero girarlo -60 grados, -60. Si configuro este archivo, puedes ver el resultado. Si quieres voltear esta profundidad, puedes usar menos 180 grados, de lo contrario, 180 grados. Si configuro este archivo, puedes verlo voltear nuestro elemento. Esta es la edad de uso del valor de rotación. Hablemos de nuestro próximo valor, que es traducir. Quiero escribir traducir cabello. Y voy a poner este archivo. Como puede ver, no hay cambios. Ahora la pregunta es, ¿cuál es el significado de traducir? El método translate mueve un elemento desde su posición actual. Como pueden ver, esta es la posición actual de este elemento, y quiero mover este elemento 100 pixel, dirección del eje x y 200 pixel y x dirección. En ese caso, necesitamos usar este valor, traducir. Al principio, necesitamos pasar x xs dirección, luego tenemos que pasar y x dirección. Al principio, quiero mover este elemento en dirección de 100 píxeles x eje. Voy a pasar 100 px. Esto es para el parámetro x xs. A continuación, quiero mover este elemento, 50 píxeles, dirección y x. Quiero pasar 50 px. Si configuro este archivo, como puede ver, movió el elemento de su posición actual, según parámetro, dado para la x x e y xs. En dirección xxs, 100 píxeles, y en dirección y xs, 50 píxeles Vamos a saltar al siguiente valor, que es translate x. Entonces escriba, traduzca x, e inserte los paréntesis, necesitamos pasar solo un parámetro, que es el parámetro x xs Esta función, moviendo el elemento a lo largo del eje x. Si configuro este archivo, como pueden ver, esta es la posición exacta de este elemento porque aquí no pasamos ningún parámetro. Ahora quiero mover este elemento, 200 pixel, x xs dirección. Aquí voy a pasar 200, Px. Si configuro este archivo, puedes ver el resultado. Del mismo modo, tenemos otro valor para la dirección y x. Entonces para escribir traducir Y. Como pueden ver, esta es la posición exacta de este elemento, y ahora quiero mover este elemento, 100 píxeles en dirección y x. Entonces dentro del paréntesis, voy a pasar 100 píxeles Si configuro este archivo, puedes ver el resultado. Mueve nuestro elemento 100 píxeles en la dirección de y x. Entonces esto es todo para este tutorial. En el siguiente tutorial, voy a cubrir estas propiedades de escala, escala, escala x, escala y. Gracias por ver este video, estado de sintonía para nuestro próximo tutorial. 8. CSS transforma la escala 2D: Hola chicos, me alegro de verles de vuelta. Este es el segundo tutorial relacionado con la transformación. En este tutorial, vamos a aprender estos tres valores, escala, escala x, y escala y. Vamos a tratar de entender qué es escalar y cómo funciona. Supongamos que este es nuestro elemento profundo, y esta es la dirección exis y esta es la dirección del eje Si quieres disminuir y aumentar el tamaño de este elemento, en ese caso, necesitas usar el valor de escala. Aumentemos el tamaño de este elemento. Y para aumentar el tamaño de este elemento, necesitamos dos parámetros, el parámetro xs y el parámetro y xs. Este método de escala aumenta o disminuye el tamaño de un elemento. Veamos cómo podemos usarlo prácticamente. Como puedes ver en tu pantalla, lado a lado, abro mi viso studio cooror y mi navegador usando la extensión Lipsear, y ya creo el índice de documento estimado dos puntos iML Entonces intentemos aumentar el elemento deep, 22 veces de id original, y tres veces de altura original. Al principio, voy a llamar a nuestra propiedad, Name transform. Transformar escala. Al principio, necesitamos pasar el valor de la dirección xs. En dirección xs, quiero escalar este elemento dos veces, así que quiero pasar dos aquí, y yo dirección del eje y, quiero escalarlo tres veces. Quiero pasar tres aquí. Si configuro este archivo, puedes ver el resultado. Como puedes ver, escala nuestro elemento, y también escala nuestro texto dentro de este elemento. De manera similar, se puede reducir el elemento. Volvamos a la posición normal. Si configuro este archivo, es el tamaño normal de este elemento, y ahora quiero disminuir el elemento profundo para que quede a mitad de su peso y altura originales. Para la dirección del eje x, voy a pasar 0.5. Para dirección del eje y, también voy a pasar 0.5. Si configuro este archivo, puedes ver el resultado. Esta es la escala del valor de escala, y nuestro siguiente valor es la escala x. Déjame mostrarte. Volvamos al tamaño predeterminado, y voy a llamar a escala x, voy a configurar este archivo. Este método x, aumenta o disminuye el ancho de un elemento. Supongamos ahora quiero aumentar el ancho del elemento profundo dos veces. En ese caso, necesitamos pasar solo x x valor, y quiero aumentarlo dos veces. Si configuro este archivo, puedes ver el resultado. Como puede ver, aumenta el ancho dos veces. Si quieres disminuir el ancho, necesitas pasar valor de 0.1 entre 0.9. Paso de sonido 0.5. Si configuro este archivo, puedes ver el resultado. Disminuye el ancho de este elemento. Volvamos al tamaño predeterminado de este elemento. Y ahora nuestro siguiente método es la escala y. Voy a escribir scale y. Esta escala Y metodo, aumentar o disminuir la altura de un elemento Quiero aumentar la altura tres veces de su tamaño original. Entonces voy a pasar tres aquí. Si configuro este archivo, puedes ver el resultado. Y de la misma manera, si quieres disminuir la altura, necesitas pasar valor entre 0.12, 0.9 Aquí, voy a pasar 0.6, 0.6. Si configuro este archivo, puedes ver el resultado. Se ha reducido la altura de este elemento. Este es el caso de uso del valor escalado. Espero que ahora te quede claro cómo es el trabajo. En el siguiente tutorial, vamos a aprender este valor de tres, Q, Q X, y Q Y. Pero antes vamos a aprender otra propiedad, que es transformar origen. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 9. CSS transforma el sesgo 2D: Hola chicos, bueno verte de vuelta. Este es el tercer video relacionado con la transformación del estudio CSS. En este tutorial, vamos a aprender esta tres propiedad, Q, Q X, y SQ Y. Este método Qs un elemento a lo largo del eje x y eje y por los ángulos dados. Dentro de este parámetro, necesitamos pasar ángulos. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi creador so studio y mi navegador usando la extensión Lp Server, y ya creo el documento ESTEML llamado index dot Entonces primero, necesitamos llamar al nombre de la propiedad transform. Algunos para escribir transformar. Al principio, voy a iniciar este tutorial con valor Q x. Voy a pasar Q x. Dentro de este paréntesis, necesitamos pasar valor de ángulo Usando este valor, podemos cambiar solo la dirección x xs. Si usamos este valor desde este punto, va a cambiar el ángulo. Supongamos que voy a aprobar 20 grados. Si configuro este archivo, puedes ver el resultado. Como puede ver, a partir de este punto, toma un ángulo de 30 grados. De igual manera, también se puede utilizar el valor negativo. Si primero -20 grado, y luego establecer este archivo. Como puede ver, a partir de este punto, gira en la dirección del lado derecho, y además nuestro ángulo de rotación es de 20 grados. Pero en ese caso, -20 grados. Como puede ver, este movimiento de rotación solo es dirección, no dirección del eje y. Volvamos a la posición por defecto, y voy a usar sk y value. Q, y. Ahora el trabajo de rotación en dirección vertical. Si apruebo 20 grados aquí, 20 grados y configuro este archivo, se puede ver el resultado A partir de este punto, se movió 20 grados y x dirección. Básicamente, se mueve hacia abajo, y si quieres moverlo hacia arriba, necesitas pasar valor menos. Si paso -20 grados y luego configuro este archivo, se puede ver el resultado. Espero que ahora te quede claro cómo funcionan Qx y Q y propiedad Hablemos de nuestro siguiente valor, que es solo Q. Al principio, voy a volver a la posición predeterminada, y voy a escribir solo Q. En este método en nuestro primer parámetro, necesitamos pasar el ángulo x xs, y luego tenemos que pasar y x ángulo. Al principio, voy a pasar ángulo de 30 grados x xs. Y luego voy a pasar 20 grados y ángulo del eje. Si configuro este archivo, puedes ver el resultado. No sólo eso con valor positivo, también se puede utilizar el valor negativo. Supongamos que quiero pasar -20 grados en dirección y x. Si configuro este archivo, puedes ver el resultado. Esto depende de usted. ¿Cómo se pueden utilizar estos valores? Hablemos de otra propiedad, que está relacionada con la transformación, y este nombre de propiedad es transform origin. Ahora la pregunta es, ¿cuál es la edad de uso de transformar la propiedad de origen? Se le permite cambiar la posición sobre el elemento transformado. ¿Qué significa eso? Supongamos que este es nuestro elemento D. Si recuerdas el valor de rotación, entonces también puedes recordar el punto de rotación, que es el centro de este elemento. Este punto de rotación es central desde x xs, también y xs. Pero no quiero rotar mi elemento desde el punto medio. Quiero cambiar el punto de rotación. Quiero rotar este elemento desde este punto, significa esquina leptop De igual manera, si quiero rotar a partir de este punto, entonces esta es nuestra esquina inferior derecha, y esta es nuestra esquina inferior izquierda Además, esta es nuestra esquina superior derecha. Puedes tomar el punto por el nombre. De lo contrario, puede tomar porcentaje o valor de píxel. Si quieres tomar el punto de rotación dentro de este elemento profundo, algo en esa posición, sí, puedes. De acuerdo con la posición del punto de golpe, necesitas tomar un 20% en la dirección del eje, y también necesitas tomar un 30% en la dirección del eje y. Solo una cosa que debes recordar, usando esta propiedad, puedes cambiar la posición del elemento transform. Volvamos al creador de visio studio y veamos cómo funciona Como pueden ver, esta es nuestra profundidad normal. Yo giro esta profundidad desde la posición central a 20 grados. Pero si cambio la posición de origen de transformar a partir de este punto, algunos para atar, transformar origen. Y voy a pasar desde la posición izquierda del eje x, y desde la posición superior del eje. Así que para pasar arriba. Antes de establecer este archivo, quiero volver a esta profundidad en la posición normal. Voy a comentar estas dos líneas. Si configuro este archivo, ahora está de vuelta a la posición normal. Ahora voy a descomentar estas líneas, y ahora voy a poner este archivo, enfocarme en esta esquina Si configuro este archivo, puedes ver el resultado. Desde esta esquina, se mueve a 20 grados. Aumentemos el valor de rotación. Entonces voy a escribir, 80 grados. Si configuro este archivo, puedes ver este resultado. A partir de este punto, gira 80 grados. Volvamos a la posición por defecto. Una vez más, voy a cambiar el punto de rotación. Entonces voy a teclear abajo derecho. Ahora a partir de este punto, va a rotar nuestro elemento. Si configuro este archivo, puedes ver el resultado. Ahora el punto de origen de rotación es este punto. Volvamos a la posición por defecto. Una vez más, voy a cambiar la posición de origen de rotación. Pero esta vez, voy a usar cualquier rincón. Ahora quiero el punto de rotación, algo en este lugar. Dirección del eje X, voy a pasar 20%, y para dirección del eje y, voy a tomar 40%. Si configuro este archivo, puedes ver el resultado. A partir de este punto, gira el elemento, 80 grados. Y si paso x xs valor cero y valor yx, 100 y luego configuro el archivo, y también voy a cambiar el ángulo de rotación, 20 grados y luego volver a establecer este archivo, como pueden ver, ahora nuestro punto de rotación es vuelta esquina inferior Porque en la dirección xs, usamos el valor cero, pero en la dirección del eje y, usamos el valor del 100%. Por eso nuestro punto de rotación es la esquina inferior de vuelta. Ahora la pregunta es, ¿cuál es el caso de uso de esta propiedad? Básicamente, esta propiedad se utiliza para la animación. Como sabéis, este es nuestro tutorial de animación CSS. Por eso tenemos que aprender sobre ello. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender nuestro próximo valor. Vamos a aprender nuestro último valor, que es metrix. Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 10. CSS transforma la matriz 2D: Hola, chicos, me alegro de verles de vuelta. Este es el último tutorial relacionado con la transformación. En este terial, vamos a aprender el valor matricial. Ahora la pregunta es, ¿qué es la matriz? El método matricial combina los dos métodos de transformación en uno solo. Este método toma un total de seis parámetros, que contiene la función de matriz, que le permiten rotar, escalar, mover y sesgar elementos Sobre todo si no usamos demasiado este elemento. Entonces veamos cómo funciona. Como puedes ver, lado a lado, abro mis videos a tu creador y a mi navegador usando la extensión Lipseer, y ya creo un documento EstiML llamado Index four Al principio, voy a llamar a la propiedad name transform, y voy a llamar a nuestra matriz de valor. Al principio, necesitamos pasar escala x valor. Voy a pasar una. En nuestro exceso de dirección, no quiero escalarlo. Por eso paso un valor. A continuación, tenemos que pasar el valor del cielo. Voy a pasar -0.3. Y entonces tenemos que pasar Q x valor. Aquí, voy a pasar cero. A continuación, tenemos que pasar escala y valor, y aquí voy a pasar uno. Ahora sólo nos quedan dos parámetros, traducir x y traducir Y, para traducir x, voy a pasar cero, y para traducir y, voy a pasar cero. Si configuro este archivo, como pueden ver, es solo sesgar nuestro elemento profundo -0.3 grados Si quieres escalar este elemento dos veces, necesitas pasar escala x dos y escala y dos. Si configuro este archivo, puedes ver el resultado. Con Q, también escala nuestro elemento. Este es el caso de uso de este método matricial. Ahora, usemos todos los dos valores de transformación uno por uno con efecto hover e intentemos crear una animación hover Voy a comentar esta línea, y al principio, voy a crear el pseudo selector, D colon hover Entonces dentro de las calibraciones, voy a usar transform property, y voy a atar transform Al principio, voy a usar el valor de escala, y quiero escalar este elemento en general dos veces, así que voy a pasar dos aquí. Si configuro este archivo y coloco mi cursor en este elemento de, puedes ver el resultado Como puedes ver, en un solo paso , completa la transición. Para proporcionar una suavidad en esta transformación, necesitamos usar la propiedad de transición Quiero atar transición aquí, primero, necesitamos declarar el nombre de la propiedad y nuestro nombre de propiedad es transformar. Entonces necesitamos declarar el tiempo de transición, que es de 1 segundo. Si configuro este archivo y coloco mi cursor en este de elemento, se puede ver la suavidad de esta transformación Pero en este ejemplo, nuestra escala de elementos profundos desde la posición central. Pero ahora, quiero cambiar la posición de origen de transformar. Voy a atar, transformar origen. Parte superior izquierda. Si pongo este archivo, y quienquiera que sean mis autos en este elemento profundo, como pueden ver, a partir de este punto, escala nuestro elemento profundo. Usemos nuestra siguiente propiedad de transformación de dos d, que es traducir. Algunos para duplicar esta línea, y voy a comentar la anterior. Aquí voy a atar, traducir. Y quiero mover nuestro elemento profundo, 200 píxeles, dirección xs, y un píxel pt, dirección y x. Si guardo este archivo, y ber macers en este elemento profundo, se puede ver el resultado Mueve nuestro elemento profundo, 200 píxeles, dirección del eje x, y un píxel pt, dirección y x. Usemos nuestro siguiente valor, que es el sesgo. Una vez más, voy a duplicar esta línea y comentar la anterior. Aquí voy a empatar SQ. Y yo xs dirección, quiero girarlo 20 grados, y en dirección y xs, quiero girarlo diez grados. Si configuro este archivo y hober Micers están en este deve, se puede ver Como saben, nuestro origen de transformación se deja fuera. Cuando me hober macers están en este deve, se puede ver Espero que ahora te quede claro, qué es la transformación de dos d y cómo podemos usarla en nuestra animación. Gracias por ver este video, en nuestro próximo tutorial, vamos a aprender tres d transformación, estado de sintonía para nuestro próximo tutorial. 11. Tutorial de CSS Transform 3D: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a iniciar la transformación de tres d. En nuestro capítulo anterior, aprendemos sobre la transformación de dos d. Pero en este capítulo, vamos a aprender tresd transformación. Sin tres d transformación, no podemos imaginar la animación. Entonces veamos los valores relacionados con la transformación de tres d. Como puede ver, hemos sumado diez valores relacionados con la transformación de tres d Rotar x, rotar, rotar z, Ptate tres, traduce, traduce tres, escala tres D, escala, prospectiva y matriz tres En el método rotate x, necesitamos pasar el valor del ángulo. Del mismo modo, necesitamos pasar el valor del ángulo para rotar y pero para el método de rotación tres D, necesitamos pasar el parámetro total de cuatro, x, y, z y el valor del ángulo. En este tutorial, vamos a cubrir este método de cuatro, rotar x, rotar, rotar y rotar tres D. Veamos cómo se trabajan estos métodos en ejemplo real. Como puede ver, tenemos un total cuatro d elemento en nuestro documento. Y me senté por diferente valor de rotación para este ejemplo. Si coloco el cursor rote x d elemento, se puede ver la transformación De esta manera, rotar x trabajado. Aquí utilizamos el valor de rotar x con prospectiva. Si usamos el valor de rotar x, dibuja una línea en x exceso de dirección desde este punto hasta este punto. Déjame mostrarte el verdadero ejemplo. Supongamos que es un elemento profundo. Si uso el valor de rotar x, va a crear una línea desde este punto hasta este punto. Esta es nuestra línea de origen de transformación. Si paso valor positivo, algo 40 grados, entonces va a rotar nuestro elemento de esta manera. Si paso -40 grados, entonces va a rotar este elemento de esta manera. ¿Puedes ver mi cara? Absolutamente no. Pero si utilizo ángulo de 90 grados, entonces va a rotar este elemento así. Ahora el elemento no es visible correctamente. Pero si lo giro 180 grados, ahora se puede ver la parte opuesta de este elemento. De esa manera, rotar el trabajo de valor. Hablemos de nuestro próximo valor, que es rotar. Si las ver micas están en esta profundidad, se puede ver el efecto. Además, utilizamos el valor prospectivo con eso. Que puedas entender este valor fácilmente. Si usamos el valor de giro y, dibuja una línea desde este punto hasta este punto, media y xs dirección. Por eso lo llamamos rotar Y. Usando valor de ángulo, puedes torcerlo b sitio, de lo contrario, lado derecho. Veamos el ejemplo, cómo funciona. Si usamos el valor de giro Y, va a dibujar una línea desde este punto hasta este punto significa dirección yx Esta es nuestra línea de origen, y por defecto, siempre ha llegado al centro. Si paso el parámetro positivo de 40 grados, va a rotar este elemento de esta manera. De igual manera, si paso -40 grados, entonces va a rotar este elemento de esta manera. Si giro este elemento, 90 grados, ahora todo el elemento es menos visible y puedes ver mi cara. Si lo giro, 180 grados, se puede ver la parte opuesta de este elemento. Nuestro siguiente valor es rotar Z. Si pongo el cursor sobre este de, puedes ver el resultado Define tres d rotación a lo largo del eje Z. Veamos cómo funciona. Este es el ejemplo de la rotación z x. Define tres d rotación a lo largo del eje z, y por defecto, punto de origen siempre es centro, y usando valor positivo o negativo, podemos girarlo de esta manera, de lo contrario, de esa manera. Nuestro último y último valor es rotar tres d. Es definir tres rotaciones completas. Si pongo el cursor sobre este deve, se puede ver el resultado Al final de este ejemplo, les voy a dar la demostración de cómo es el trabajo. Comencemos la práctica con el valor de rotar x. Como pueden ver, lado a lado, abro mi curador de visuo studio y mi navegador usando la extensión del servidor Lip Ya creo un documento EstiML llamado demo Dot estiml. Como puede ver dentro de un contenedor padre, creo un contenedor de caja, y configuro un ancho de realce similar para nuestro contenedor padre y nuestro contenedor hijo Para el contenedor padre, establecí un color de fondo gris, y para el contenedor hijo, configuré el color de fondo chocolate. Llamemos a la propiedad transform y usemos rotate x value. Voy a llamar a transformar rotar x, y aquí tenemos que pasar parámetro de ángulo giratorio. Voy a escribir para grado t. Si configuro este archivo, aquí puedes ver el resultado. Oye, ha funcionado correctamente, pero no puedes sentir demasiado el cambio. Para ello, voy a utilizar prospectiva y transición que puedas entenderlo muy fácilmente. Voy a usarlo con selector de hover, punto, caja, colon, hover Son los calibraces, voy a llamar a esta propiedad. Y voy a llamar propiedad de transición por suavidad. Transición, y nuestro nombre de propiedad es transform y nuestra duración de transición es de 1 segundo. Si me senté este archivo y flotaba mis autos están sobre este elemento profundo, se puede ver cómo es el trabajo, pero no está nada claro en absoluto Por eso voy a usar otro valor, que es prospectivo. Te va a dar las tres D, y no voy a explicar cómo funcionan las prospectivas. Para prospectiva, te daré un video por separado. Usemos el valor prospectivo. Entonces escriba prospectiva. Y dentro del paréntesis, necesitamos pasar el valor, y nuestro valor es de 200 píxeles Si configuro este archivo, y luego mi cursor sobre este desarrollo, se puede ver el resultado, cómo es el trabajo Supongamos que crea una línea desde este punto hasta este punto significa x xs dirección. Usando este valor, puedes girarlo hacia arriba de lo contrario hacia abajo. Este es el caso de uso del valor de rotación x. Cambiemos el ángulo de rotación, 90 grados. Si configuro este archivo y pongo el cursor Mi sobre este desarrollo, ahora puedes ver el resultado Ahora es completamente invisible. Si quieres darle la vuelta por completo, entonces necesitas pasar el valor de 180 grados. Uno, 80 grados. Si configuro este archivo y coloco mi cursor en esta profundidad, puedes ver el resultado Como puedes ver, gira nuestro elemento profundo, 180 grados. No sólo eso, también se puede cambiar la posición de origen de la transformación. Déjame mostrarte. Voy a llamar a transformar propiedad de origen. Transformar el origen. Ahora no quiero rotar este elemento a mitad de este elemento. Quiero rotarlo desde esta esquina. En ese caso, necesitamos usar el valor inferior derecho, abajo derecho. Antes de configurar este archivo, también voy a cambiar el ángulo de rotación, que es de 30 grados. Si pongo este archivo y Su mi cursor sobre este desarrollo, como se puede ver desde la esquina inferior derecha, gira 30 grados Espero que ahora te quede claro cómo funcionan rotar x valor. Vamos a saltar a nuestro siguiente valor, que es rotar Y. Pero antes voy a comentar esta línea. Aquí, solo voy a escribir rotar y. si configuro este archivo y Su mi cursor sobre este desarrollo, se puede ver el resultado Como puedes ver, divide nuestro elemento y dibuja una línea desde este punto hasta este punto. Ha sido la dirección de y x. Y a partir de esta línea, se puede torcerla p lado de lo contrario lado derecho, acuerdo con el valor del ángulo. Todo es similar al valor de rotar x. Simplemente dibuja una línea y divida este elemento de este punto a este punto en dirección y x. Por eso lo llamamos rotar Y. Hablemos de nuestro siguiente método, que es rotar Z. Tipo de sonido, rotar Z. Si configuro este archivo y coloco mis autos sobre esta profundidad, se puede ver Trazo una línea en ZD x. Quiero decir medio de este elemento Déjame mostrarte ejemplo y ver cómo funciona. Aquí puedes ver una imagen, y si usas rotar x, dibuja una línea desde este punto hasta este punto. Usando este valor, puedes rotar tu elemento al revés o a la baja Si usa el valor de rotación y, puede rotar su elemento p lado o lado derecho. Si usas rota ese valor, déjame mostrarte cómo es el trabajo. Espero que ahora te quede claro cómo gira ese trabajo de valor. Hablemos de nuestro último valor, que es rotar tres D. Al principio, veamos la demostración real. Si usamos rotar tres D, podemos usar todo el valor de rotación en unos. Esta línea es para la línea de rotación x xs, y esta es para y x, y esta es nuestra línea zx Ahora voy a girarlo en dirección x xs. Al mismo tiempo, voy a girarlo en dirección y hacha, y esta línea es para dirección zerx Al mismo tiempo, podemos girarlo en una dirección z x. Básicamente, se define la rotación de tres D. Al principio, voy a llamar al valor, rotar tres d, y luego dentro de los paréntesis, hay que pasar cuatro parámetros totales, x x, y x, z x, y ángulo Puede especificar el eje de rotación usando un número para los tres primeros argumentos. Pero para el cuarto argumento, es necesario especificar el valor del ángulo. Para x xs, voy a pasar dos, y para yx, voy a pasar menos uno menos uno De igual manera, para z x, también voy a pasar menos uno. Pero en nuestro cuarto parámetro, necesitamos pasar el valor del ángulo, así que para escribir 45 grados. Si configuro este archivo y coloco mi cur sobre este desarrollo, puedes ver el resultado Esta es la jaula de uso del método rotar tres D. Esto es para este tutorial. En nuestro próximo tutorial, voy a cubrir estos dos valores. Traduce Z y traduce tres D. Gracias por ver este video, 12. Tutorial de CSS Transform 3D: Hola chicos, me alegro de verles de vuelta. En esta tuterial, vamos a aprender este método de cuatro traducir, traducir X, traducir Y, traducir y traducir tres t. Ya aprendimos sobre este valor de dos en nuestra tuterial anterior Pero aquí, lo voy a usar con tres transformaciones. Veamos cómo funciona. Como pueden ver, lado a lado, abro mi correador visoto y mi navegador usando la extensión Life Sever, y ya creo documento EstiML llamado Como puede ver dentro del contenedor padre, tenemos un contenedor de caja. Usemos nuestro primer valor. Pero antes voy a llamar a la propiedad transform, alguna manera para escribir transform. Y nuestro primer valor es traducir x. Alguien para escribir, traducir x. Dentro del paréntesis, voy a pasar 200 píxeles Si configuro este archivo y el cursor de Hoberm en este devlement, puedes ver el Es mover mi elemento, 200 píxeles en dirección x x. Y si quieres moverlo en sentido contrario, en ese caso, necesitas pasar -200 píxeles Si configuro mi archivo y el cursor de berma en este cuadro, se puede ver el resultado Ya lo aprendemos en tu material anterior. Entonces hagamos esta transición tres d. Así que voy a pasar otro valor, que es prospectivo, prospectivo, 200 píxeles. También voy a pasar rotar y valor, rotar y, y aquí voy a pasar 30 grados. Si configuro este archivo y pongo el cursor en este elemento profundo, puedes ver el resultado Como puedes ver, mueve nuestro elemento profundo, también, gira nuestro elemento profundo, y sabes que usamos prospectiva, por eso te da tres aspecto D. Hablemos de nuestro siguiente valor, que es traducir Y. Entonces para usar translate Y, y aquí voy a usar valor positivo. Si configuro este archivo y el curser de berma en este de elemento, se puede ver el resultado Déjame usar el valor de rotación x. Entonces ty, gira x. si configuro este archivo y berma curser en esta D, pueden ver, ahora se ve más atractivo y dinámico Vamos a usar nuestra siguiente propiedad, que es traducir Z. Entonces, traducir Z. Si paso 200 pixel, A continuación, establecer este archivo Si calmo mi auto en este de, como pueden ver, no está funcionando Pero ya establecemos traduce ese valor en esta D. Usemos otro valor con eso. Voy a usar rotar valor con eso, rotar, y, 60 grados. Si configuro este archivo y hober mi cuidador en esta D, puedes ver el resultado Pero se ve bastante similar a traducir x, pero no lo es. Déjame mostrarte. Déjame usar el valor prospectivo con eso. Algún tipo prospectivo, prospectivo, 900 píxeles. Si configuro este archivo y hober mi auto en este deve, puedes ver el resultado Déjame mostrarte la verdadera demostración. Entonces puedes entenderlo correctamente. Supongamos que este es nuestro elemento profundo. Al principio, voy a rotar este elemento profundo. Si usamos traduce ese valor, entonces se mueve así. Espero que ahora te quede claro cómo traducir el valor Z es el trabajo. Hablemos de nuestro último valor, que es traducir tres D. Algunos para escribir, traducir tres D. Aquí tenemos que pasar el valor total de tres, x x, x y zx Supongamos que para x x, voy a pasar 50 píxeles, y para x, voy a pasar 50 píxeles también. Para zerx, voy a pasar cero pixel. Si configuro este archivo y autos berma en esta D, se puede ver el resultado Y si aumento, traduzco el valor Z, supongamos que voy a escribir por celda típica y luego establecer este archivo y sobre mi cursor sobre este desarrollo, se puede ver el resultado Al mismo tiempo, se mueve en dirección x xs, dirección y xs y dirección z x. Espero que ahora te quede claro lo que es traducir tres D valor. Esto es para este tutorial. En nuestro próximo tutorial, vamos a cubrir estos dos valores, escala tres D y escala Z. Gracias por ver este video, estad atentos para nuestro próximo tutorial 13. Escala de tutoriales de CSS Transform 3D: Hola, chicos, me alegro de verles de vuelta. Este es el otro Tutorial relacionado tres d transformación. En este tutorial, vamos a aprender estos cuatro métodos, escala X, escala Y, escalas y escala tres. Ya aprendimos sobre el método de escala x y escala Y en nuestros tutoriales anteriores. Pero una vez más, voy a repetir este método en este tutorial. Pero el método más importante para tres D es la escala ight. Define una transformación de escala de tres D dando un valor para el zx, y nuestro último método es la escala tres D. Usando este método, podemos usar tres valores diferentes a la vez Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi editor de código VSO Studio y mi navegador usando la extensión Lp Server, y ya creo un documento ESTEML llamado index Al principio, voy a usar el nombre de la propiedad transform. Entonces, para escribir, transformar aquí. Nuestro primero es escala x, Algún tipo, escala x, escala x, y quiero escalar este elemento dos veces en x dirección sobrante. Voy a pasar dos aquí. Si configuro este archivo y berma autos en este desarrollo, se puede ver el resultado Del mismo modo, podemos usar el valor Y de la escala. Voy a cambiar la escala y. Si configuro este archivo y pongo el cursor sobre este desarrollo, se puede ver el resultado Debido a que no proporcionamos ningún punto de origen de transformación, es por eso que es escala a mitad de este elemento. Es la posición de origen por defecto. Pero si usamos transformar el valor de origen con eso, déjame mostrarte. Y luego establecer este archivo y hobercars están en este desarrollo, puede ver el resultado diferente Hablemos de nuestro valor más importante, que son las escalas ocho. Pero primero, voy a comentar esta línea, y voy a t escalas ocho aquí. Escalas 82 tiempo. Si guardo este archivo y los autos Hoberm están en este desarrollo, como pueden ver, no hay cambios porque este valor sólo funciona con tres d transformación Tenemos que darle tres d. Voy a comentar esta línea, y voy a usar este valor con prospectiva y rotar y. Además, voy a encomiar esta línea Si configuro este archivo, y coloco mi cursor sobre este desarrollo, ahora puedes ver el resultado Si aumento las escalas que valoran, sumo tipo siete aquí, y configuro este archivo y pongo el cursor sobre este desarrollo, ahora se puede ver la diferencia, cómo es De igual manera, si disminuyo el valor de la escala, algún tipo 0.5, y configuro este archivo y coloco mi cursor sobre este desarrollo, puedes ver el resultado Espero que ahora sea para ti, como escalas se trabaja ese método. Hablemos de nuestro último método, que es la escala tres d. Algún tipo, escala tres d aquí, la escala tres D. Usando este método, aquí necesitamos pasar el valor total de tres. Escala X, escala Y y escalas ocho. Usando eso, podemos usar tres valores diferentes a la vez. Para x xs, quiero escalarlo dos veces. Para y xs, quiero escalarlo tres veces, y para zer x, quiero escalarlo cinco veces. Si configuro este archivo y ber mis autos en este desarrollo, se puede ver el resultado. Al principio, escala este elemento dos veces en dirección x, luego tres veces en la dirección de Y x, y luego cinco veces en dirección zerox Este es el boceto U del valor de la escala tres d. Espero que ahora te quede claro. Esto es para este terial. En el próximo uteral, vamos a aprender sobre una nueva propiedad, que es prospectiva Gracias por ver este video, estén atentos para nuestro próximo uteral. 14. Tutorial de perspectiva de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva propiedad, que es la perspectiva de Sess En nuestros tutoriales anteriores, ya lo aprendimos. Pero en este tutorial, lo vamos a utilizar de manera individual. Pero antes de comenzar la práctica, veamos algunos ejemplos. Aquí puedes ver este es el ejemplo de rotar, y este es también el ejemplo de rotar. Pero las diferencias, para este elemento, utilizamos prospectiva. Por eso es proporcionar tres D. Del mismo modo, este es el ejemplo de rotación y x. Para nuestro primer ejemplo, no utilizamos prospectiva. Pero para nuestro segundo ejemplo, utilizamos prospectiva. Por eso es proporcionar tres D. Si usamos prospectiva, se puede ver claramente la rotación, y si no usamos prospectiva, no se puede entender la rotación. Intentemos entenderlo con más detalles. Supongamos que está viendo una pantalla de proyector desde este punto. Se puede decir que la distancia y el ángulo punto de vista, se llaman prospectiva. Se verá más grande si miras más de cerca, y si lo miras desde la distancia, se verá más pequeño. Déjame mostrarte la verdadera demostración. Supongamos que este es nuestro elemento profundo. Si lo miras de cerca, se verá más grande. Y si lo miras desde la distancia, se verá más pequeño. Esto se llama prospectivo. Se ve pequeña y grande a pesar de no ser redimensionada. Espero que ahora te quede claro. Prospectiva viene con otra propiedad, que es el origen prospectivo. Por defecto, viene con centro. Pero puedes cambiar el prospecto donde quieras. Tratemos de entender con detalle el origen prospectivo. Supongamos que esta es tu habitación. Si lo miras desde la posición central, puedes ver todas las paredes y el piso con claridad. Este es tu piso superior, este es tu piso inferior. Esta es tu pared lateral derecha, y esta es tu pared lateral izquierda, y esta es tu pared de fondo. Pero si miras tu habitación desde la esquina superior izquierda, quiero decir desde esta esquina, entonces no puedes ver claramente la planta izquierda y la planta superior. De igual manera, si miras tu habitación desde esta posición, significa posición superior, entonces no puedes ver el último piso con claridad. Se puede ver el piso inferior, pared de fondo, la pared lateral derecha y la pared lateral izquierda. Porque tu posición de origen prospectivo es superior. De igual manera, si miras tu habitación desde la esquina superior derecha, no puedes ver la pared derecha, y además tu piso superior apenas es visible o no. Porque tu origen prospectivo es correcto y superior. Pero si miras tu habitación desde el lado derecho por error, tecleo pared derecha en posición izquierda. Si usa el origen prospectivo del lado derecho, entonces no puede ver la pared derecha correctamente. Se puede ver la pared de fondo, se puede ver el piso inferior, se puede ver el piso superior, y también se puede ver la pared lateral del regazo, pero su pared lateral derecha no es visible. Si usas origen prospectivo inferior derecho, entonces tampoco puedes entender la pared correcta. Como puede ver, tampoco la pared derecha no es visible. Con eso, el piso inferior rara vez es visible. De igual manera, si miras tu habitación desde la posición inferior, entonces no puedes ver el piso inferior correctamente. Si miras tu habitación desde dejar esquina inferior, entonces no puedes ver la pared izquierda. Además no se puede ver el piso inferior completamente. Si usaste solo dejar origen prospectivo, entonces no puedes ver la pared lept Se puede ver la pared derecha, se puede ver la pared de fondo, se puede ver el piso inferior, también se puede ver el piso superior, pero no se puede ver la pared lept Todos estos son valores de origen. También puedes usar el valor porcentual con eso. Con prospectiva, se puede cambiar el origen prospectivo. Comencemos la práctica y tratemos de entender cómo podemos usar la propiedad de origen prospectivo y prospectivo. Como pueden ver, lado a lado, abro mi estudio visual Cortor y mi navegador usando la extensión Lipseer, y ya creo un documento ESTEML llamado Index dot ESTEML abro mi estudio visual Cortor y mi navegador usando la extensión Lipseer, y ya creo un documento ESTEML llamado Index dot ESTEML. Como pueden ver, hay un elemento profundo, y ahora quiero rotar este elemento profundo cuando coloco el cursor sobre este elemento Aquí voy a usar transform property, entonces escribe, transform. Transformar rotar, rotar x, y quiero girarlo hasta 50 grados en dirección xs. Si configuro este archivo y ber Micas están en este elemento profundo, se puede ver el resultado. Como puede ver, gira nuestro elemento, pero no está claro porque no utilizamos ningún valor prospectivo. En nuestras tteriales anteriores, utilizamos prospectiva como valor de transformación Pero ahora voy a usar propiedad prospectiva, y necesitamos usar esta propiedad prospectiva en nuestro contenedor base, no en el contenedor hijo. Aquí tenemos que empatar prospectiva. Y voy a pasar prospectiva de 800 píxeles. Si configuro este archivo y hover mis autos están en este desarrollo, ahora se puede ver el look de tres D. En nuestras tteriales anteriores, utilizamos la prospectiva como valor de transformación Solo hay que recordar, prospectivo darle al elemento tres D look. Además, debe recordar, si usó propiedad prospectiva individualmente, entonces necesita usarla en el contenedor padre, no en el contenedor hijo. Ahora, cambiemos el valor prospectivo. Supongamos que voy a pasar 100. Como ya les dije antes, disminuir el valor del prospectivo hará que las cosas se vean más grandes. Si pongo el cursor sobre este desarrollo, se puede ver la diferencia Ahora se ve más grande porque observamos muy de cerca este elemento. Por eso se ve más grande. De la manera opuesta, si aumentamos el valor prospectivo, 1,200 píxeles, y luego establecemos este archivo, y colocamos mi cursor sobre este desarrollo, puedes ver el resultado Ahora se puede ver el objeto más pequeño. Porque sabemos que un objeto se ve pequeño cuando vimos desde la distancia. Como puede ver, ahora la distancia es de 1,200 píxeles. Por ahora, voy a escribir 800 píxeles prospectiva. Hablemos sobre el origen prospectivo y cómo funciona. Al principio, voy a llamar a este inmueble, que es origen prospectivo, origen prospectivo. Por defecto, ya que el valor es centro y el valor del eje y es centro. Entonces grupo tipo, centro y centro cabello, centro centro. Si configuro este archivo y los hobercars están en este desarrollo, como pueden ver, desde el punto central, gira nuestro elemento Como puede ver, no hay cambios porque esta es la posición central central. Al principio, voy a usar valor correcto, el origen prospectivo, el derecho. Si configuro este archivo y los Hobermcars están en este desarrollo, puede ver Como puedes ver, nuestro elemento no se desborda desde el lado derecho, porque ahora nuestra perspectiva es del lado derecho. Por eso no podemos ver la pared derecha. Del mismo modo, si usamos veluft izquierdo, y configuramos este archivo y las micas Huber están en este de elemento, ahora no se puede ver la Como puedes ver, nuestro elemento no se desborda desde el lado izquierdo, sino que se desborda por el lado derecho. Si usamos alguna forma de cubo, entonces puedes entenderlo correctamente. Puedes probar todo el valor de origen uno por uno. No sólo eso, también se puede utilizar el valor porcentual. Vamos a aprender todo esto cuando vamos a trabajar con proyectos reales. Esto es para este tutorial. Gracias por ver este video, sintonía estatal para nuestro próximo Tutorial. 15. Tutorial de estilo de transformación de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva animación de Sess relacionada con propiedades, y el nombre de la propiedad es transform style Básicamente, esta propiedad trabaja con transformar la propiedad. Aprendamos más sobre ello. La propiedad de estilo de transformación especificó cómo nestate los elementos se renderizan en tres espacios D. Y básicamente, esta propiedad viene con dos valor. Nuestro primer nombre de valor es plano. Precisó que el elemento hijo no conservará su posición tres D. Y este es el valor por defecto. El valor principal e importante es preservar tres. Especifica que los elementos secundarios conservarán su posición de tres D. Básicamente, quiero decir, si usamos preservar tres valores D en el elemento padre, entonces nuestro elemento padre funciona como un objeto tres D. Déjame mostrarte el ejemplo. Aquí puedes ver que hemos animado un elemento hijo. Como se puede ver el elemento profundo más pequeño pasando por el elemento profundo más grande. Como ustedes saben, mayor elemento padre dev. Si usamos tres valores D conservados, entonces podemos realizar este tipo de tres efectos D. Si no usamos el valor de tres D preservado, déjame mostrarte. Ahora puedes ver que nuestro elemento padre no actúa como un elemento tres D, y nuestro elemento hijo no puede pasar por el elemento padre. Entonces este es el medidor de uso de la propiedad de estilo de transformación. Déjame mostrarte otro ejemplo. Aquí puedes ver una inmersión de padres, y dentro de la inmersión de padres, tenemos un hijo de, y yo roto nuestro hijo de 40 grados en la dirección del eje y. Y por defecto, nuestro estilo parent de transform vino con valor flood. Por eso nuestro padre de no actúan como un objeto de tres D. Pero si usamos propiedad de estilo de transformación y usamos preservar el valor de tres D, entonces nuestro fondo deve actúa como un objeto de tres D, y nuestro hijo se mueve profundamente pasado a través del elemento de fondo Sin perder el tiempo, comencemos la práctica. Como pueden ver, lado a lado, abro mi creador de Visor studio y mi navegador usando la extensión Lp Server, y ya creo documento STL llamado index dot STL Aquí puedes ver el total de dos de elemento, elemento padre y nuestro elemento hijo. Como puede ver, ya rotamos nuestro elemento hijo 50 grados en la dirección xs, y ya uso la propiedad prospectiva en nuestro elemento padre, y establecí el valor prospectivo, 800 píxeles, y ahora quiero rotar el elemento padre. Voy a usar transform property en nuestro contenedor padre, transform. Girar y, y quiero girarlo 30 grados en la dirección de y, 30 grados. Si configuro este archivo, puedes ver el resultado. Sí, es rotar nuestro elemento, pero no proporcionó ningún aspecto de tres d porque no usamos ninguna propiedad de estilo de transformación. Voy a usar transformar la propiedad de estilo, transformar el estilo. Por D caída, esta propiedad vino con valor plano, pero voy a utilizar preservar tres D valor. Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver nuestro elemento hijo pasar por el elemento padre, y debes recordar, necesitas usar esta propiedad en tu contenedor padre, no en el contenedor hijo. Si enciendo mi barra de herramientas de desarrollador y selecciono este elemento, como puede ver, nuestro valor transform rotate x es de 50 grados. Oye, este es nuestro elemento hijo. Si aumento el ángulo de rotación, se puede ver la transformación. Si disminuyo el ángulo de rotación, también se puede ver la transformación. Rotemos el contenedor padre. Voy a seleccionar contenedor padre, y voy a rotar este contenedor padre. Si giro el contenedor padre, puedes ver los tres d. Ahora puedes ver claramente nuestro elemento hijo pasar por el elemento padre. Este es el uso kage de transformar la propiedad de estilo. Ahora, cambiemos el origen transformador de nuestro elemento hijo. Origen de transformación tipo Amo y fondo tipo Amo. Si configuro este archivo, ahora puedes ver el resultado. Desde abajo, gira nuestro elemento hijo, 50 grados. Déjeme mostrarle con claridad. Si aumento el valor de rotación o elemento padre, se puede ver claramente. Como se puede ver, desde la parte inferior , gira nuestro elemento. Esto es para este tutorial. Espero que ahora entiendas cuál es la propiedad uskazo transform style Gracias por ver este video, estén atentos para nuestro próximo tutorial. 16. Tutorial de visibilidad de la cara posterior de CSS: Hola, chicos, bienvenidos de nuevo. Una vez más, vengo con un nuevo tutorial, y en este tutorial, vas a aprender una nueva propiedad, que es la visibilidad de backface. Es necesario utilizar esta propiedad con transformar la propiedad. Antes de comenzar la práctica, intentemos entender qué es la visibilidad de backface. La propiedad de visibilidad de cara posterior define si la cara posterior de un elemento debe ser visible o no cuando se enfrenta al usuario Ahora la pregunta es, ¿qué es la cara de atrás? La cara posterior de un elemento es una imagen especular de la cara frontal que se muestra. Supongamos que dentro de este elemento profundo, escribes hola mundo. Si lo giro 180 grados, entonces se puede ver la cara posterior de un elemento Como ya sabéis, es reflejo de tu elemento. También se puede ver la reflexión del texto. Esta propiedad es útil cuando se gira un elemento. Te permite elegir si el usuario debe ver la cara posterior o no Supongamos que no quieres mostrar la cara posterior de un elemento Usando esta propiedad, puedes controlarla. Y nuestra propiedad de visibilidad de backface viene con dos valores, visible y oculto Déjenme explicarlo con objeto tres D. Como puedes ver en tu pantalla, aquí tienes un cubo de tres D. Si usas valor oculto, entonces no puedes ver la parte opuesta de la sube. Pero si usas valor visible, entonces puedes ver la otra parte a través de este cubo. Esta es la principal diferencia de estos dos valores. Déjame mostrarte otro ejemplo. Como puedes ver en tu pantalla, hay dos de elemento, y utilizo transformar la propiedad tanto de este elemento. Y como puede ver, usamos el valor de giro y. Si yo ber en nuestro primer de elemento, se puede ver se puede ver la cara posterior de nuestro primer elemento. Como pueden ver, reflejan nuestro texto. Pero no quiero mostrar la cara posterior cuando rote nuestro elemento. Entonces en este elemento, utilizamos la propiedad de visibilidad de backface. Entonces me ber mi cursor, ahora no se puede ver la cara posterior de este elemento porque usamos valor oculto para este Empecemos la práctica y tratemos de entender cómo funciona. Como pueden ver, lado a lado, abro mi viso así Cortor y mi navegador usando la extensión Lipseer, y ya creo un documento EstiML llamado index dot STML abro mi viso así Cortor y mi navegador usando la extensión Lipseer, y ya creo un documento EstiML llamado index dot STML. Como puedes ver en mi navegador, tenemos hettal dos elementos profundos, contenedor, y caja Y como te dije antes, si quieres usar la propiedad de visibilidad de backface, entonces también necesitas usar transform property Así que dentro del selector over, voy a escribir transform. Transformar rotar y, y quiero girarlo 80 grados. Si configuro este archivo, y los autos Hb M están en este desarrollo, se puede ver que gira nuestro elemento. Además, se puede ver el texto miro, y ahora voy a usar nuestra nueva propiedad, que es la visibilidad de backface. Tengo que escribir visibilidad de cara trasera. Primero, voy a usar el valor visible. Si configuro este archivo y los autos de Hoberm están en este desarrollo, puede ver el Pero si uso valor oculto, déjame mostrarte y establecer este archivo y Huber Makar en este elemento deve Ahora no se puede ver la cara posterior de este elemento. Este es el caso de uso de la propiedad de visibilidad de la cara posterior. Esto es para este tutorial. partir del próximo Tutterial, vamos a aprender Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 17. Tutorial de animación de CSS parte uno: Hola, chicos, me alegro de verles de vuelta. Por último, vamos a aprender animación CSS. Puedes animar cualquier elemento est usando animación CSS. Veamos un ejemplo. Como se puede ver, hay un elemento profundo. Se está animando automáticamente sin pasar el mouse. Es convertir rectángulo círculo y luego es convertir círculo en rectángulo. Este es el pequeño ejemplo de animación. Es trabajo automáticamente. No necesitas ningún efecto hover. Veamos qué tipo de propiedad tenemos en CSS para crear esta animación. Como puedes ver, tenemos un total nueve propiedades relacionadas con la animación CSS. Nuestro primer nombre de propiedad es nombre de animación. Usando esta propiedad, puede definir un nombre para la animación. Luego viene la duración de la animación. Usando esta propiedad, puede definir cuánto tiempo desea ejecutar esta animación. Entonces viene la animación delay propiedad. Se especifica un retraso para el inicio de una animación. Luego viene el recuento de iteraciones de animación. Se especifica el número de veces que se debe reproducir una animación, y nuestra siguiente propiedad es la dirección de la animación. Se especificó si una animación debe ser reproducida hacia adelante, hacia atrás, o en ciclos alternos, y luego viene la función de sincronización de animación. Se especifica la curva de velocidad de la animación. Nuestra siguiente propiedad es el modo de relleno de animación. Se especifica un estilo para el elemento cuando la animación no se está reproduciendo. Vamos a conocerlo en nuestros últimos tutoriales. Nuestra siguiente propiedad es el estado de juego de animación. Se especifica si la animación se está ejecutando o pausa, y nuestra última propiedad es la animación. Esta es la propiedad taquigráfica. Puede usar todo el valor de las propiedades a la vez usando esta propiedad. Vamos a aprender todas estas propiedades una por una. Ahora, para usar todas estas propiedades de animación, necesita crear un selector, y el nombre del selector está en los fotogramas clave de velocidad. Al principio, debe escribir agregar los fotogramas clave de velocidad y luego debe proporcionar cualquier nombre de animación Solo hay que recordar, no proporcione ningún espacio en este nombre. Puede proporcionar guión. También puedes usar guión bajo o estuche de camello. Pero no provean ningún espacio. Luego, dentro del clivrass, debe proporcionar dos palabras clave diferentes de y Ha sido desde donde quieres comenzar la animación, y usando dos palabras clave, necesitas proporcionar el punto final de la animación. Dentro de las calibraciones, se puede utilizar la propiedad CSS. Supongamos que desea cambiar el ancho del contenedor. Sí, puedes. otro método que puedes usarlo. Se puede utilizar porcentaje para el mismo trabajo. Puede reemplazar la posición inicial con 0%, y de manera similar, puede reemplazar en posición con 100%. Ambas declaraciones van a regresar, mismo resultado. Pero aquí puedes usar cualquier valor porcentual 0-100. Supongamos que quieres cambiar el color en el punto de inicio de la animación, y también quieres cambiar el color al 20%. Puede proporcionar múltiples valores si usa este método. Sin perder el tiempo, estudiemos prácticas y veamos cómo funciona. Como pueden ver, lado a lado, abro mi visera sto curator y mi navegador usando la extensión Lp Saver También se puede ver, ya creé documento ESTEML llamado index dot Como puedes ver, hay un elemento deep y el className es box, y ya estilo este elemento deep con 250 pixel, altura 200 pixel También alinearé este elemento profundo en medio de esta página web. Ahora quiero animar esta profundidad. Quiero transformar este rectángulo en un círculo. Con eso, también quiero cambiar el color sin usar el selector Over. Voy a usar diferentes propiedades de animación Css. Al principio, voy a crear Selector de fotogramas clave, en el fotograma clave rojo Después del selector de Kefam, necesitamos proporcionar un nombre de animación Para nuestra animación, voy a tomar ejemplo. Luego dentro de las calibraciones, necesitamos usar dos palabras clave de y dos de y luego voy a usar dos Desde el punto de partida, quiero decir radio de borde cero, algún tipo, propiedad de radio de borde. Radio de borde 0%. Al final de esta animación, quiero cambiar el radio del borde 50%. Radio de borde 50%. Si configuro este archivo, no va a ejecutar la animación porque necesitamos vincular este nombre de animación con esta caja. Para esto, voy a tomar una propiedad, que es nombre de animación, nombre animación, y nuestro nombre de animación es ejemplo. Con este método, puedes usar este fotograma clave varias veces y no necesitas crear esta animación una y otra vez Ahora, con el nombre de la animación, también, es necesario declarar el tiempo de duración de la animación. Voy a llamar a otra propiedad, que es la duración de la animación. Por 2 segundos, quiero ejecutar esta animación. Aquí se puede utilizar el valor de segundo o milisegundo también. Si guardo esta página, puedes ver la animación aquí, pero ejecuta nuestra animación solo por una vez, y tardan dos segundos en completar esta animación. Ahora decido ejecutar esta animación por cinco veces. Para ello, necesitamos usar otra propiedad, que es el recuento de iteraciones de animación Entonces escribe, cuenta de iteraciones de animación, y quiero ejecutarlo cinco veces Por eso me paso cinco aquí. Si guardo este archivo, como pueden ver, se ejecuta nuestra animación cinco veces. Tres, cuatro y cinco. Después de completar el término, deja de ejecutar nuestra animación. Si quieres ejecutar esta animación para siempre, necesitas pasar valor infinito aquí, algún tipo infinito. Si configuro este archivo, como pueden ver, ahora es ejecutar nuestra animación para siempre. No quiero ejecutar esta animación para siempre, así que quiero pasar tres valores aquí. Quiero ejecutarlo tres veces. Ahora, como puedes ver, después de completar la animación, vuelve a la posición anterior en un solo paso. Cuando regresó de valor final a valor inicial, como puede ver, no hay transición. En un solo paso, completa la animación. Para proporcionar la suavidad, necesitamos usar otra propiedad, que es la dirección de la animación Entonces escribe dirección de animación. Y voy a usar valor alterno. Si guardo este archivo, ahora se puede ver la suavidad, cuando vuelve a la posición normal Si lo ejecuto tiempo infinito, se puede ver la suavidad. Como puede ver, cuando vuelve a la posición de inicio, hay una suavidad. Ahora, hablemos de la propiedad de dirección de animación. Básicamente, la dirección de animación vino con cuatro valores, normal, inversa, inversa alterna alterna. Normal es el valor predeterminado. La animación se reproduce de forma normal. Trabaja hacia adelante. De la manera opuesta, el trabajo inverso hacia atrás. Si usa el valor inverso, la animación se reproduce en dirección inversa. Luego viene el valor alterno. Si usa un valor alternativo, al principio, jugó hacia adelante, luego se reproduce hacia atrás. Nuestro último valor es inverso alternativo. En ese caso, la animación se reproduce primero hacia atrás, y luego hacia adelante. Ya aprendiste sobre el valor alterno. Es pasar de la posición de inicio a la posición en, luego de vuelta a la Emposición a la posición de inicio Nuestro siguiente valor se invierte. Déjame mostrarte. Si utilizo este valor y luego configuro este archivo. Como se puede ver, la animación se inicia desde el círculo, y luego se convierte en un cuadrado. Hablemos de nuestro último valor, que es el inverso alternativo. Si utilizo un valor inverso alternativo, y luego configuro este archivo. Como puedes ver, la animación se reproduce primero hacia atrás, luego hacia adelante. Este es el caso de uso de la propiedad de dirección de animación. Por ahora, voy a usar valor alterno. Si configuro este archivo, ya lo aprendiste. Esto es para este tutorial. En el siguiente tutorial, te voy a mostrar los diferentes métodos de fotogramas clave. Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 18. Tutorial de animación de CSS parte dos: Me alegro de verles chicos. En este tutorial, te voy a mostrar el segundo método para ejecutar la animación. En nuestro tutorial anterior, usamos a partir de una palabra clave dos. Pero en este tutorial, vamos a utilizar el valor porcentual. Así que sin perder el tiempo, volvamos al estudio viso Corator Como pueden ver, lado a lado, abro mi visor studio creator y mi navegador usando la extensión Life Sever, y abro mi documento estel anterior Como saben, desde la posición inicial, así que voy a sustituir de por 0% 0%. Y sabes dos k palabra nuestra posición. Entonces voy a sustituir dos k palabra por el 100%. Entonces si guardo este archivo, como pueden ver, es trabajo de la misma manera. Ahora quiero cambiar el color de fondo en la posición final. Entonces voy a usar propiedad de fondo, fondo, y nuestro color de fondo se comió. Si configuro este archivo, como pueden ver, con transformación de forma, también se ha cambiado el color. Como puede ver, para esta animación, utilizamos un total de cuatro propiedades de animación CSS diferentes, Nombre de la animación, duración de la animación, recuento de iteraciones de animación y dirección de animación Ahora les voy a mostrar cómo podemos usar la taquigrafía de esta animación Quiero decir, ¿cómo podemos usar este valor de cuatro propiedades en una sola línea Para ello, necesitamos llamar a otra propiedad de animación, que es animación, Animación. Al principio, tenemos que pasar el nombre de la animación. Como puedes ver, nuestro nombre de animación es ejemplo. Entonces para copiar el nombre y pegarlo aquí. Entonces tenemos que pasar el tiempo de duración de la animación. Como puedes ver, nuestro tiempo de duración de animación es de dos segundos, sonido para pasar dos segundos. Recuerda, necesitas seguir la secuencia, y luego voy a pasar valor de recuento de iteraciones, que es infinito A continuación, voy a pasar el valor de dirección de animación , que es alterno. Por ahora, las cuatro líneas exter no son necesarias, así que voy a comentar estas líneas, y voy a guardar este archivo Como puedes ver, ha funcionado perfectamente. Funciona de la misma manera. Y ahora voy a hablar de otra nueva propiedad, que es retardo de animación. Para ello, voy a comentar esta línea y descomentar estas. Después de la propiedad de duración, voy a escribir delay de animación. Aquí voy a pasar tres es, significa tres segundos. También puede tomar valor de milisegundos. Es malo si reprimo este archivo, nuestra animación se iniciará después 3 segundos. Déjame mostrarte. Algunos para configurar este archivo, como puedes ver, después de 3 segundos, inicia nuestra animación. Este es el caso de uso de la propiedad de retraso. Por fin, voy a usar otra propiedad, que es la función de sincronización de animación. Pero antes te voy a mostrar los valores relacionados con la función de sincronización de animación CSS. Básicamente, tenemos un valor total de seis, es lineal, está adentro, está fuera, está adentro hacia fuera Q semana baser Si usas es valor, especifica una animación con inicio lento, luego primero, luego termina lentamente. Este es el valor predeterminado, y nuestro siguiente valor es lineal. Se especifica una animación con la misma velocidad de principio a fin. Entonces viene nuestro tercer valor, que está en, especificar animación con un inicio lento. De la manera opuesta, tenemos otro valor, fuera, especificar una animación con un final lento. Nuestro quinto valor está adentro hacia fuera, especifique una animación con un inicio y un final lentos. Y nuestro último valor es Q débil vesier. Puedes definir tus propios valores en una función Q we sier. Déjame mostrarte el verdadero ejemplo de cómo funcionan. Aquí puedes ver los elementos con diferentes valores de función de temporización. Lineal está adentro, afuera y está adentro hacia afuera. Como puede ver, utilizamos el mismo tiempo de duración de animación para todo esto. Pero como puedes ver, son trabajo de otra manera. Su velocidad no es la misma. Como puede ver, lineal mantener la misma velocidad de principio a fin, luego llegar nuestro siguiente valor, que es la facilidad. Como puedes ver, comienza con lento luego primero y termina lentamente, y luego viene. Se especifica la animación con inicio lento. Y luego sale. Se especifica la animación con final lento, y nuestro último valor es e in out. Se especifica animación con inicio lento y final lento. Esta es la diferencia entre todos los valores de función de temporización. Déjame mostrarte cómo podemos usarlo prácticamente. Entonces voy a llamar a nuestro nombre de propiedad, que es la función de animación ting. Función de animación ting. Al principio, voy a usar el valor e. Algunos o t e. si guardo este archivo, como pueden ver, comienza con lento, luego primero y n lentamente. Y este es el valor predeterminado, y voy a usar nuestro siguiente valor, que es lineal. Smot Lineal Si guardo este archivo, como pueden ver, mantuvo la misma velocidad. No se puede entender la diferencia en este ejemplo. Puedes entenderlo correctamente cuando iniciemos nuestro ejercicio y proyecto, y luego voy a usar nuestro otro valor, que está en. Si guardo este archivo, como pueden ver, es especificar animación con inicio lento. Nuestro siguiente valor está fuera. Algún tipo está fuera. Si guardo este archivo, como pueden ver, es especificar animación con final lento. Nuestro último valor está dentro. Algún tipo está adentro hacia afuera. Si guardo este archivo, como pueden ver, se especifica la animación con inicio lento y final lento. Y ahora voy a usar nuestro último valor, que es Q basier. Voy a amarrar a Qb basier. Aquí es necesario pasar valor total cuatro, no más de cuatro valor, no menos de cuatro valor. Al principio, voy a tomar 0.1 valor, y luego voy a tomar 0.4 valor. A continuación, voy a tomar 1.0 de valor. Entonces vienen 0.1 valor. Se va a cubrir la animación con cuatro pasos. Para nuestra primera t, va a tomar cero punto una vez más. Para nuestro segundo paso, va a tomar 0.4 segundos, y para nuestro tercer paso, va a tomar una vez más. Para nuestra última t, va a tomar cero punto una vez más. Si configuro este archivo, puedes ver el resultado. Después de 3 segundos, se puede ver el patrón de animación. Con este valor, podrás completar tu animación en un cuarto paso. También puedes usar todo el paso como taquigrafía. Para ello, es necesario utilizar este valor en tercera posición. Primero, debe pasar el nombre de la animación, luego el tiempo de duración, luego la función de temporización, luego el valor dela, luego el recuento de iteraciones y luego la dirección de la animación. No te preocupes por ello. Vamos a aprender todo esto cuando iniciemos nuestros proyectos. Ahora voy a cambiar de color al 50% de la animación. Quiero decir 50% posición de animación. 50% dentro del clisis, quiero cambiar el color de fondo, fondo, Azul Si configuro este archivo, como pueden ver, en la posición del 50% de animación, se destaca el color. Primero, convierte el color chocolate en color azul, luego convierte el color azul en color rojo. Podemos usar tanto valor como queramos aquí. Esto es para este tutorial. En nuestro próximo tutorial, vamos a aprender qué es modo de animación fiel y qué es el modo plast de animación. No te pierdas nuestro próximo video. Gracias por ver este video, sintonía estatal para nuestro próximo tutorial. 19. Tutorial de modo de relleno de animación CSS: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva animación CSS relacionada con propiedades, y nuestro nombre de propiedad es el modo fil de animación CSS. Pero ahora la pregunta es, ¿qué es el modo fil de animación? La propiedad de modo fil de animación especifica un estilo para el elemento cuando la animación no se está reproduciendo. Podemos usarlo antes de que comience. También podemos usarlo después de que termine. De lo contrario, podemos usarlo tanto la condición. Al mismo tiempo, podemos usarlo antes la animación y después de la animación. Ahora, hablemos de los valores relacionados con el modo fil de animación. Esta propiedad viene con valor total de cuatro, ninguno, adelante, atrás, y ambos. Ninguno es el valor predeterminado. La animación no aplicará ningún estilo al elemento antes o después de que se ejecute. Nuestro siguiente valor es adelante. El elemento conservará los valores de estilo establecidos por el último fotograma clave. Básicamente, depende de la dirección de la animación y el recuento de iteraciones de animación Nuestro siguiente valor es al revés. El elemento obtendrá los valores de estilo establecidos por el primer fotograma clave y los conservará durante el periodo de retardo de animación De lo contrario, podemos usar nuestro último valor, que es ambos. La animación seguirá las reglas tanto hacia adelante como hacia atrás, extendiendo las propiedades de la animación en ambas direcciones Entonces vamos a usar este valor de cuatro campos en este tutorial. Empecemos la práctica y veamos cómo funciona. Como pueden ver lado a lado, abro mi correador de visual studio y mi navegador usando la extensión LifeSer, y ya creo documento SML llamado Y también puedes ver un elemento profundo en mi navegador. Y me senté 150 píxeles de ancho y 100 píxeles de alto en este elemento profundo. Ahora voy a animar este elemento profundo, y también le voy a poner color diferente a este elemento Voy a aumentar el ancho de este elemento. Como pueden ver, ya creo el fotograma clave para esta animación, y nuestro nombre de fotograma clave es ejemplo Dentro del carliss, voy a escribir. Al principio, voy a tomar 0%. Dentro del cvss. Al principio, voy a cambiar el color de fondo de fondo. Y voy a poner color amarillo. También voy a aumentar el ancho del ítem. Voy a escribir con ancho. Como pueden ver, nuestro wi anterior es de 150 píxeles, y ahora voy a poner 200 píxeles. También voy a duplicar esta línea tres veces. 0%, luego vienen 50% al fin 100%. En el 50% de la animación, voy a aumentar el ancho a 50 píxeles. Además, voy a cambiar el color de fondo. Color de fondo rojo, y en 100%, voy a decir ancho del artículo 300 píxeles. Además, voy a cambiar el color. Esta vez, voy a usar el color azul. Básicamente, creamos un marco clave de animación simple. Usemos este fotograma clave en esta caja. Para esto, primero, voy a tomar animación de propiedad de animación. Nuestro nombre de animación es ejemplo. Entonces tenemos que pasar el tiempo de duración de la animación, y quiero completar esta animación en 2 segundos. A continuación, voy a pasar el valor de retardo de animación, y quiero retrasar esta animación por 3 segundos. Si configuro este archivo, como pueden ver, después de tres segundos ejecuta nuestra animación. Y después de completar la animación, vuelve a su posición inicial. Ahora voy a usar la propiedad de modo fiel de animación. Podemos usarlo después del valor de duración. De lo contrario, podemos llamar al nombre de la propiedad. Voy a llamar al nombre de la propiedad, Animation fiel mode. Como saben, esta propiedad vino con cuatro valores. Al principio, voy a usar Mal valor. Al revés. Si usamos hacia atrás, es saltar directamente al 0% de esta animación. Permítanme aumentar el tiempo de retardo de animación. Voy a usar 5 segundos para este ejemplo. Si configuro este archivo, como pueden ver, ya salta al 0%. Se inicia desde el 0%. Entonces vienen 50%, luego vienen 100%, y después de completar la animación, vuelve a la posición normal. Déjame mostrarte una vez más. Si configuro este archivo, inicia la animación desde el 0% y luego retrasa por 5 segundos, y luego ejecutando nuestra animación. Como sabéis, si usamos el valor hacia atrás, el elemento obtendrá los valores de estilo que establece la primera fama, y conservará esto durante el periodo de retardo de animación. Vamos a saltar a nuestro siguiente valor, que es hacia adelante. Voy a escribir pelo hacia adelante. Si usamos este valor, simplemente ejecuta nuestra animación. Pero al final, no vuelve al estado inicial. Déjame mostrarte. Si configuro este archivo, como pueden ver, después de 5 segundos, va a ejecutar nuestra animación. Además, se puede ver que no vuelve al estado inicial. Como saben, el elemento conservará los valores de estilo que establece el último fotograma cre Como puedes ver, nuestro último cframe es 100%, y su color de fondo es azul A en esa posición, establecemos el ancho del elemento, 300 píxeles. Vamos a saltar a tu siguiente valor, que es ambos. Si utilizo este valor, Ambos, va a comenzar nuestra animación desde 0%, y después de completar la animación, está atascada en la posición del 100%. Entonces si configuro este archivo, como pueden ver, comienza desde el 0%, luego después de cinco segundos de retraso, inicia nuestra animación. Como se puede ver después de completar la animación, no se vuelve al estado inicial de este elemento. Si usamos este valor, seguirá la regla tanto para adelante como para atrás. Este es el caso de uso de ambos inmuebles. Ahora, hablemos de nuestro último valor, que no es ninguno. Algunos cómo escribir ninguno aquí. Si configuro este archivo, como pueden ver, aquí no va a pasar nada. Después de 5 segundos, simplemente es ejecutar nuestra animación. Este es el caso de uso del valor N. Esto es para este tutorial. Espero que les guste este tutorial. Ahora está claro para ti, qué es el modo de animación fiel. Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 20. Tutorial de modo de estado de animación de CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva animación CSS relacionada con la propiedad, y nuestro nombre de propiedad es animación play state Moore. Ahora la pregunta es, qué es el estado de lugar de animación. La propiedad de estado de lugar de animación, especifique si la animación se está ejecutando o pausa. Puedes ejecutar tu animación. De lo contrario, puede pausar su animación con esta propiedad. Básicamente, esta propiedad viene con dos valores, pausa y funcionamiento. Si usa el valor de pausa, especifica que la animación es pausa, y ejecutar es el valor predeterminado de esta animación. Sin perder el tiempo, comencemos práctico y tratemos de entender qué es el estado del lugar de animación. Como pueden ver, lado a lado, abro mi creador so sto y mi navegador usando la extensión PsAver, y abro mi documento est anterior Ahora, quiero detener mi animación cuando bere mi cursor sobre este elemento profundo. Para eso, necesitamos usar la propiedad de la placa de animación. Como puedes ver, retrasamos nuestra animación por 5 segundos. Si guardo este archivo, se puede ver después de 5 segundos que ejecuta nuestra animación. Y ahora quiero detener esta animación mientras se está ejecutando. Para detener la animación, voy a poner el cursor sobre mi cursor Al principio, voy a crear un selector de hover para esta caja Voy a escribir dot box hover dentro de las maldiciones, voy a usar nuestra propiedad Animación plat. Al principio, voy a usar Pausa. Voy a escribir pausa aquí. Si guardo este archivo, como pueden ver, después de cinco segundos, va a ejecutar nuestra animación. Pero voy a poner el cursor sobre este elemento, como pueden ver, detiene nuestra animación No ejecuto la animación por completo. Yo me quito mis curs como se puede ver completar la animación Déjame mostrarte el ejemplo una vez más. Pero antes voy a reducir el tiempo de retraso, 1 segundo. Si configuro este archivo, como pueden ver, después de una vez más, se ejecuta nuestra animación. Pero cuando hober mi cursor sobre este elemento, detengo la animación Pero ahora voy a quitar el curser de este elemento. Como puedes ver, ahora está completa la animación. Luego volvamos al estado normal de este elemento. Pero ahora quiero ejecutar esta animación, cuando coloco el cursor sobre este elemento Para ello, voy a copiar esta propiedad. Y pegarlo aquí. Por defecto, quiero pausar esta animación. Pero cuando Hoberm cuidador en este elemento, quiero ejecutar esta animación Entonces en nuestro selector de Hober, voy a escribir animación play state running Si configuro este archivo, como se puede ver después una vez más, la animación no se está ejecutando. Pero si acojo a mi cuidador en este elemento, como pueden ver, después de una vez más, ejecuta nuestra animación Este es el caso de uso de la propiedad de la placa de animación. Espero que ahora te quede claro cómo es el trabajo. Gracias por ver este video, melodía S para nuestro próximo torial. 21. Introducción e implementación de la animación GSAP: Hola chicos, bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo Tutorial Real tate animation. Y a partir de este tutorial, vamos a iniciar la animación GreenSok Ahora, intentemos entender qué es la animación GSOC. Este es el sitio web oficial de Greensak Animation. GSP es una biblioteca de animación JavaScript estándar de la industria de GreenSok Eso te permite crear animaciones de alto rendimiento que funcionan en todos los navegadores principales. Entonces yo una palabra, GSOC es una biblioteca de animación JavaScript. Es de mucha ayuda en el desarrollo web. Ahora, abramos la página principal. Entonces esta es la página de inicio de la animación GSAP. Solíamos usar CSS para la animación, pero ahora podemos crear animaciones usando bibliotecas Java Scrib Y ahora la animación se vuelve muy fácil porque no necesitamos usar una gran cantidad de propiedades CSS en nuestro proyecto. No solo animación, usando GSAP, también podemos crear un sitio web Déjame mostrarte la demostración. Estos son el ejemplo de sitio web que podemos crear usando animación GSOC Todo el sitio web lo puedes ver en esta sección crear con animación GSOC Si me desplazo hacia abajo Poco mojado, aquí se puede ver el sitio web hecho con animaciones GSP Supongamos que voy a abrir este sitio web, este sitio web de cartera. Veamos cómo se ve. Aquí puedes ver la animación y las transiciones en este sitio web. animación GSAP le proporciona el aspecto híbrido a su sitio web Déjame mostrarte otros ejemplos. Hay muchos sitios web hechos con animación GSOC. Supongamos que si abro éste, aquí se puede ver el resultado. Cuando me desplazo hacia abajo en mi página, se ve así. Hay muchos ejemplos hechos con animaciones GSAP. Puedes consultar todos los ejemplos uno por uno, y puedes aprender GSAP si tienes los conocimientos básicos del script Java, Atmel No necesitas ningún nivel avanzado de codificación para aprender GSAP Ahora veamos cómo podemos instalar la animación GSOC. Para ello, tenemos que ir y saltar documentación de la sección doc. Y ya abrí mi editor de código Visa Studio y mi navegador usando la extensión Live Server. Entonces como puedes ver en mi directorio de trabajo actual, solo tenemos index dot estil file Ahora voy a crear un archivo JavaScript. Tipo de sonido app dot, y voy a golpear Enter. Y ahora voy a vincular este archivo JavaScript en mi documento estim Entonces aquí voy a usar la etiqueta Script. Fuente de script igual a app dot s. Voy a configurar este archivo. Y puedes tomar cualquier nombre para tu archivo Tower Script. No es obligatorio el uso de Ap Dogs. Puedes usar crypto js, ym Dogs, Hart Dogs. Todo se trata de ti. Ahora volvamos a la página del documento. Después de abrir la sección de documentación, debe hacer clic en Instalar Opción desplegable. De lo contrario, puedes buscar Instalar. Entonces voy a dar click en esta sección Instalar. Y aquí proporciona todo tipo de método de instalación. Usando NPM, Note Package Manager, también, puede usar CN Red de entrega de contenido. También proporciona R. La mejor y más fácil manera de utilizar esta animación es CDN Y este es tu enlace SN proporcionado por GSAP. Así que voy a copiar este enlace y volver a mi es editor de bacalao de Studio. Y voy a pegarlo antes de la etiqueta de script App Do JS. Y voy a poner este archivo. Siempre use su archivo JS personalizado debajo del archivo fuente porque primero su navegador debe tener conocimiento sobre GSA Entonces puede llamar fácilmente a las funciones en su archivo JS personalizado. Y ahora vamos a experimentar con poca animación Además, podemos crear esta animación usando CSS, pero aquí no vamos a usar CSS. Entonces vamos a implementar la animación GSoP. Entonces en nuestra etiqueta corporal, primero, voy a crear una caja de puntos Dep de etiqueta profunda Aquí creo una etiqueta profunda nosotros, cuadro de nombre de clase. Y entonces voy a darle estilo a esta caja un poco. Déjame mostrarte. Entonces voy a usar etiqueta de estilo. Estilo y dentro de la etiqueta de estilo, voy a seleccionar la casilla. Dot box, luego dentro la primera propiedad de Caris, voy a usar rueda Y aquí, voy a st 200 pixel. Además, voy a st altura, altura, 200 pixel. Básicamente, voy a crear una caja cuadrada, y luego voy a decir fondo. Fondo, y podría ser de cualquier color. Por ahora, voy a usar el color rojo porque el color rojo es mucho más visible. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Hicimos nuestra parte STML y Cass. Vamos a saltar al archivo Abdo JS, animación greensock. ¿Te acordaste de nuestros tutoriales anteriores, aprenderemos de ida y vuelta? Supongamos que quiero mover esta caja en dirección xs. Quiero moverlo 100 pixel en dirección xs. Por ahora, esta posición de la caja s es cero, y quiero moverla 100 pixel. Si quieres mover cero a 100, entonces necesitas usar dos. Y si quieres mover 102, cero otra vez, entonces necesitas usar de necesitas recordar el concepto básico al respecto? Ya lo aprendimos en nuestra sección de animación, así que no voy a explicarlo a fondo. Empecemos el código para despejar el concepto. Aquí, voy a escribir GSA. GSA, punto, vamos a usar dos funciones. Dos. Luego dentro del latón redondo, es necesario mencionar el selector, qué elemento desea seleccionar. Voy a seleccionar esta casilla usando su nombre de clase. Entonces dentro de los códigos dobles, voy a escribir punto box. Después com. Siguiente línea, voy a usar calibraceis, y aquí hay que mencionar, ¿qué queremos hacer con esta caja? Quiero mover esta caja en x dirección sobrante. Entonces voy a pasar X, colon, y voy a moverlo hasta 300 píxeles. Y antes de configurar este archivo, si te muestro mi archivo de estimación de punto índice, y si te muestro mi sección de estilo, y como puedes ver en mi sección de estilo, no usamos ninguna animación. Después de establecer este archivo, como puedes ver, no está funcionando porque mi sugerencia automática porque mi sugerencia automática reemplaza esta palabra clave con esta. Nuevamente necesitamos reemplazarlo por GSA. Sí, y voy a configurar este archivo. A para establecer este archivo, como puedes ver, se mueve el elemento de esta posición a esta posición en exceso de dirección. Ahora, déjame explicarte qué está pasando detrás de escena. Así que vamos a inspeccionar esta sección y primero, voy a uni esta opción y luego y después voy a seleccionar este elemento y aquí voy a abrir mi sección de estilo. Como puedes ver en este estilo sion, Como puedes ver en esta sección de estilo, aquí transforma propiedad. Transformar traducir 300 píxeles. Detrás de escena, GSP utiliza esta propiedad sss para mover este elemento Permítanme aclarar el concepto. Voy a extender el valor. Voy a hacer 500. Esta vez, voy a moverlo 500 píxeles. Si configuro este archivo, aquí se puede ver, ahora transformar traducir el valor es x x posición 500 pixel, y xs posición sigue siendo cero porque no movemos este elemento en dirección y x. Por eso es cero. La estructura central hecha con css. Para este tutorial, creo que el servidor en vivo no es obligatorio, así que voy a apagar el servidor Lib. Y por ahora, voy a abrir el archivo Index dot estim de nuestro directorio Como pueden ver, esta vez abro este archivo desde mi directorio. No voy a usar ningún servidor en vivo. Si vuelvo a cargar este navegador, puedes ver la animación Puedes experimentar esta animación. Si uso el servidor en vivo, entonces no está funcionando tan bien. Por ahora, si leo este navegador, como lo pueden ver moviéndose tan rápido, así que voy a decir algo de duración. Aquí, voy a usar coma, luego voy a usar la duración de la llamada a la propiedad. Duración, colon, por ahora, voy a fijar cinco segundos. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a cargar este navegador, ahora puedes ver que nuestra animación tarda cinco segundos en completarlo Si lo vuelvo a cargar, aquí se puede notar de vez en cuando aumenta nuestro exceso de valor Básicamente, cambió la propiedad ss según la duración. Si quieres ejecutar esta animación después de 2 segundos, sí, puedes usar delay. Justo aquí estás en coma, entonces necesitas escribir delay. Retraso, dos puntos, y yo retraso de uno, dos segundos. Si configuro este archivo y vuelvo a armar mi navegador, como pueden ver después de dos segundos, inicia una animación Para que esta animación suceda, no necesitamos escribir una gran cantidad de Sess cote en nuestra sección de Sass Solo necesitamos usar esta cantidad de cote si usamos la biblioteca GSAP A continuación, voy a mover esta caja en dirección y x. Aquí, voy a escribir y, dos puntos, y desde la dirección xs, quiero moverlo, 300 pixel. Si configuro este archivo y vuelvo a cargar mi navegador, como puedes ver después de esperar dos segundos, se mueve x x también se mueve x dirección Al mismo tiempo, si deseas cambiar el color de fondo, puedes usar esta propiedad. Supongamos supongamos que quiero cambiar el fondo, así que voy a tomar propiedad de fondo. Color de fondo. Colón, y quiero decirlo de color verde. Color de fondo verde. Y luego voy a guardar este archivo. Después de configurar este archivo, voy a recargar el navegador. Después de establecer este archivo, como pueden ver, no está funcionando porque creo que hice algunas es. Tenemos que proporcionar este valor es una cadena, así que necesito proporcionar este valor dentro la cita. Entonces voy a usar single. De nuevo, voy a configurar este archivo y volver a dotar mi navegador. Después de rete mi navegador, operando por dos segundos, como puedes ver, inicia la animación, y además cambió el color de fondo de este elemento profundo Por ahora, voy a reducir la duración, voy a hacer que sea de dos segundos. Además, voy a eliminar delay, y volver a configurar este archivo. Como pueden ver, ahora se volvió de rojo a verde. Recuerda, en Css, usamos propiedad de fondo como esta. Fondo, color guión. Pero en el script Java, no utilizamos propiedades de fondo como esta. Aquí utilizamos agua de estuche Camel. Como puedes ver, nuestros personajes C comienzan con el estuche Camel. Utilizamos el caso Camel en el script Java. Aquí se puede utilizar dentro de hy propiedad también escalar propiedad. Supongamos que quiero escalar este elemento. Escala tipo H. Escala, y quiero escalarlo hasta dos veces luego coma. Ahora bien, si ejecuto esta animación, va a extender este elemento dos veces. Déjame mostrarte. Después de ejecutar esta animación, como se puede ver, se extiende el tamaño de la caja. Ahora se ha convertido en 400 píxeles a x xs y 400 píxeles a y x No solo eso puedes establecer w y altura, déjame mostrarte. Entonces otra vez, voy a configurar este archivo y leer mi navegador, y esta vez, voy a configurar w. nosotros y cómo voy a establecer con 100 píxeles. Básicamente, si configuro este archivo y ejecuto esta animación, va a re, va a reducir el ancho del elemento porque por cuatro nuestro ancho de elemento es de 200 píxeles. Entonces, si relaciono esta animación como pueden ver, reduce el ancho de esta. Por ahora, espero que este concepto sea claro para usted, cómo podemos usarlo. En este ejemplo para ejecutar esta animación, necesitamos recargar este navegador Pero en el futuro, para ejecutar esta animación, vamos a usar el disparador de desplazamiento. Entonces cada vez que desplace el navegador, va a ejecutar la animación. Como te dije para entender la animación SAP, debes tener conocimientos básicos sobre SSs y Estable Entonces esto es para este tutorial. Esta es la pequeña introducción y demostración sobre la animación SAP. Espero que disfrutes de este tutorial. Gracias por ver este video, Aturdir para el próximo Tutorial 22. Introducción e implementación de la animación de GSAP parte Dos: Oye, chicos es bueno verte de vuelta. Este es otro tutorial relacionado con la animación de calcetín verde. En nuestro tutorial anterior, creamos esta animación básica usando GSOC Si recargamos esta página, como puedes ver, esta es nuestra animación Tomó 2 segundos completar la animación. Además, redujo el ancho de este elemento. Con eso, también cambia, el color de fondo de este elemento, rojo a verde. Y ahora te voy a mostrar cómo puedes rotar este elemento. Por ahora, voy a comentar este ancho de línea, entonces voy a usar otra propiedad llamada rotate. Rotar, y quiero rotar 360 d verde. C. Si configuro este archivo y lode mi navegador, puedes ver el resultado Básicamente, podemos hacer todas las cosas usando nuestras propiedades de animación en CSS. En el futuro, vamos a aplicar esta animación con eventos. Por eso es importante el script Java, y ahora vamos a saltar a la función from. Ahora voy a comentar todas las líneas. Entonces voy a llamar desde la función. Así que otra vez Amer tipo G SAP punto G, otra vez, mi autosugest, reemplace Entonces Amer tipo GSP menual. S punto desde el interior de la ronda ss. Al principio, voy a seleccionar el elemento box. Caja de puntos. Puede la siguiente línea, voy a casos de uso. Dentro de los casos, necesitamos definir nuestras propiedades y valores, y voy a aplicar exactamente las mismas propiedades. Aquí tipo x x valor es 500. El valor Y es 300. A continuación, voy a pasar valor arraigado. Valor de rotación, Ama aplicar 360 grados. Siguiente valor digo duración. Duración y monta un dos segundos. A continuación, voy a aplicar color de fondo. Color de fondo. El color de fondo, ama apply está en el solo verde. Y quiero establecer este archivo. Entonces básicamente, aplico las mismas propiedades que aplico en mis dos funciones. Si vuelvo a cargar mi navegador, ahora puedes entender cuál es la diferencia entre dos y de función Cuando utilizo dos funciones, movió el elemento desde el origen. Pero cuando aplicas desde la función, denota de nuevo a su lugar de origen Entonces me vuelvo a cargar mi navegador, como pueden ver, volvió al lugar de origen Si vuelvo a recargar mi navegador, como pueden ver, vuelve a la posición original Entonces esa es la diferencia básica entre dos y de función. Si te nota gas, se volvió de color verde a rojo. También gira en sentido opuesto. Ahora hablemos de propiedad repetida. Si desea repetir esta animación varias veces, entonces necesita usar esta propiedad. Él escribe, repite. Repito, y voy a decir repetir tres veces. Si vuelvo a cargar mi navegador, va a repetir esta animación en total cuatro veces Porque por defecto, va a atropellar la animación una vez, luego vas a repetir la animación tres veces. Déjame mostrarte. Entonces voy a recargar mi navegador. Después de recargar mi navegador como puedes ver, va a repetir esta animación en total cuatro veces Ahora bien, si quieres repetirlo tiempo infinito, para eso, puedes usar menos un valor. Si configuro este archivo y vuelvo a cargar mi navegador, como pueden ver, se va a atropellar la animación infe T. No va a parar hasta que cambie el valor. Por ahora, voy a cambiar el valor, repetir, cero, y voy a guardar este archivo. Después de configurar este archivo, voy a recargar mi navegador. Entonces como pueden ver, esta vez, va a detener nuestra repetición de animación. Y ahora voy a aplicar efecto O. Ahora quiero ejecutar mi animación arriba y abajo. Para eso, voy a pasar una propiedad O U, U, y pasar verdadero valor. Cierto. Entonces voy a repetir esta animación. Por el tiempo. Quiero establecer este archivo. Si vuelvo a cargar el navegador, puedes ver el efecto UU Ahora es trabajo como UU. Si hago cierto este valor, entonces se mueve hacia adelante y hacia atrás. Se irá una vez y volverá. Y yo paso repetir valor infinito, luego tiempo infinito, va a hacer lo mismo. No sólo eso, también se puede aplicar la misma propiedad en esta función dos. Entonces te va a proporcionar el mismo efecto, pero lo diferente es, si usamos dos funciones, entonces este elemento no vuelve a la posición original. Se detiene en la posición de destino en ese lugar. Ahora volvamos a la página de punto índice. Como pueden ver, ahora solo tenemos un elemento profundo. Pero voy a dugar esta línea en total tres veces. Ahora tenemos un total de cuatro elementos profundos. Además, voy a comentar algunas propiedades en mi función ap Dots. Primero, voy a quitar la función de rotar. Entonces quiero moverlo solo exceso de dirección. A continuación, voy a eliminar el valor de repetición. Además, voy a descomentar U. Entonces quiero configurar este archivo Después vuelve a la página estel y reduce el tamaño de esta caja Esta vez, voy a hacer que sea 100 pixel nosotros por 100 pixel. Si configuro este archivo y vuelvo a cargar mi navegador, va a aplicar toda la animación de animación, todo el elemento deep porque su clase es la misma Demos un pequeño margen entre ellos. Margen, cinco píxeles. Y voy a poner este archivo. Después de deslizar este archivo, si leo mi navegador, ahora se puede ver la brecha entre ellos. Y ahora voy a cambiar el nombre de la clase todos estos elementos. Esta es la caja uno. Esta es la casilla número dos. Esta es la casilla número tres, y esta es la casilla número cuatro. Y voy a poner este archivo. Ahora volvamos al archivo Apo JS. Esta es la Caja Número uno. Primero, voy a cambiar el estilo de animación. Voy a usar dos funciones. Esta app, dos. Entonces voy a duplicar esta sección varias veces. Básicamente, voy a eliminar todas estas líneas comentadas. No lo necesito. Entonces voy a duplicar esta sección total tres veces. Esta es la casilla número dos. Esta es la casilla número tres. Lo siento, este es el número de caja. Esta es la casilla número tres, y la última es la casilla número cuatro. Si configuro este archivo y reorde mi navegador, va a devolver el mismo resultado Solo para realizar cambios en nuestro punto índice una sección de estilo de archivo SML Aquí voy a apuntar a todo el elemento de una vez. Porque cambio el porque a partir de aquí, cambio los nombres de las clases. Voy a pasar el elemento nombre de la etiqueta nombre D. Y establecer este archivo. Si leo mi navegador, ve a ver el resultado. Ahora, todos los elementos completan la animación al mismo tiempo. Pero ahora quiero correr segundo número después del primer número. Quiero decir después de ejecutar la animación del primer elemento, quiero algo de retraso para el segundo elemento. Para eso, aquí voy a usar otra propiedad llamada delay. Voy a caminar, voy a usar la propiedad de retraso. Demora, y quiero demorar hasta dos segundos. Vaya, el retraso ortográfico es redondo, DE AY. Entonces yo para volver a configurar este archivo y volver a cargar mi navegador. Después de recargar mi navegador, como se puede ver, después de dos segundos de retraso, se runo animación Entonces, uno por uno, puedes retrasar la animación. Supongamos que para el tercer elemento, lo voy a retrasar hasta 4 segundos. Entonces para el cuarto elemento, quiero retrasarlo hasta 6 segundos. De nuevo, voy a configurar este archivo y volver a cargar mi navegador. Después de rojo mi navegador, después de completarlo, está esperando 2 segundos, luego va a funcionar uno por uno. Ahora el problema es, es necesario seleccionar toda la casilla una por una. Además, es necesario aplicar delay multiple time. Pero Green Sock tiene la solución para esto. Entonces voy a comentar toda la línea excepto la primera. Después duplico el primero y comento este duplicado. Y esta vez, voy a seleccionar todas las casillas a la vez. Voy a quitar la caja uno. Además, necesito hacer cambios en nuestro expediente estable. Ahora otra vez, voy a cambiar todo el nombre de la clase. De lo contrario, también podemos agregar otro cuadro de nombre de clase. Aquí voy a agregar caja. Caja. Y quiero establecer este archivo. Básicamente, aquí usamos múltiples clases en el mismo elemento. Ahora lleva de nuevo al archivo Abdo JS. Ahora voy a aplicar el mismo retraso en mi animación. Para eso, sólo para usar una propiedad llamada strager, STA doble GER, escalonada, y voy a Entonces voy a poner este archivo. Después de configurar este archivo, voy a recargar mi navegador. Como puede ver, después de completar el primero, luego necesita ejecutar el segundo. Entonces después de completar el segundo, entonces va a correr el tercero. la misma manera, después de completar el tercero, entonces va a correr el cuarto. Si reduzco los valores tagger value, si lo hago cuatro y luego configuro este archivo, ahora va a hacer lo mismo un poco más rápido Después de completar el primero, va a correr el segundo. Entonces va a correr el tercero. Por fin, va a correr el cuarto. Si reduzco el valor del tigre, si lo hago 1 segundo, uno y luego configuro este archivo y eluyo mi navegador, ahora puedes ver después de 1 segundo, va a ejecutar toda la animación una por una Ahora, no necesitamos escribir esta cantidad de código para obtener el resultado. Sólo una propiedad y valor hacen lo mismo. No necesitamos crear animaciones individuales para eso. La ayuda de escalonar valor, se puede definir el tiempo de retardo entre las animaciones Escalonar el valor va a gestionar sus retrasos individuales. Si abres la documentación de esta animación GSP y buscas dos funciones dos GSAP para funcionar, y si abres esta sección, aquí puedes ver el uso de las propiedades especiales Se pueden ver datos, retraso, duración es, ID, Las. Hay un montón de propiedades relacionadas con la función, y se puede utilizar todo de ella. Después de desplazarse hacia abajo esta página, poco, aquí se puede ver la propiedad stagger Y desde esta sección, se puede leer la documentación sobre la propiedad stagger documentación oficial es la mejor manera de aprender algo. Siempre te da la respuesta correcta y upd fechada. Puedes leer sobre la propiedad UU, UE, fotogramas clave, etcétera En nuestro primer tutorial y el segundo tutorial, solo trato de introducir cómo podemos usar la animación GSP, y ¿cuáles son las propiedades Apenas aprendemos sobre el proceso de trabajo de la animación GSP. partir del siguiente tutorial, vamos a aprender sobre las líneas de tiempo Vamos a aprender sobre distribuidor de pergamino, locomotora, etcétera. Entonces esto es para el Tutorial. Gracias por ver este video, Stedun, para el siguiente 23. Línea de tiempo en GSAP Crea tu primera línea de tiempo: Hola chicos me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva animación GSP relacionada con Tutorial Y en este tutorial, vamos a aprender la línea de tiempo del GSP La línea de tiempo GSP es una herramienta de secuenciación que permite a los usuarios controlar y administrar el tiempo de la animación Básicamente, es un contenedor para gemelos y otras líneas de tiempo, y se utiliza para construir secuencias complejas Con líneas de tiempo, las animaciones se muestran en el agua. Están listados en el fresco. Por lo que se pueden agregar nuevas animaciones sin calcular manualmente los retrasos. Las líneas de tiempo también permiten crear secuencias de animación fácilmente ajustables y resistentes Aquí hay algunas cosas que puedes hacer disp cronogramas. Posicionar la animación en el tiempo, repetir animaciones, incluir retardos antes de la repetición y animación en cadena. En una palabra simple, la línea de tiempo es cualquier cosa que se establezca en un marco de tiempo. Supongamos que esta es nuestra línea de tiempo de cinco segundos. Pero cómo podemos especificar diferentes tareas en diferentes segundos de tiempo. Podemos realizar diferentes tareas en diferentes marcos de tiempo. Básicamente, usando timeline, podemos especificar qué vamos a ejecutar paso a paso. En nuestro tutorial anterior, aprenderemos sobre cómo podemos ejecutar la animación GSAP Si queremos ejecutar animaciones una tras otra, entonces necesitamos proporcionar delay cada una de las animaciones, y para resolver el problema de retardo, GSP introducir timeline Entonces vamos a discutir la línea de tiempo. Y recuerda, nuestra línea de tiempo está conectada entre sí y va paso a paso. Entonces finalmente, estamos en la página de documentación de animación gSap Y en nuestros tutoriales anteriores, ya aprendimos cómo podemos instalar la animación GSP Ahora, volvamos al código de User studio. Entonces como puedes ver, lado a lado, abro mis visores a tu editor de código y a mi navegador Y como puedes ver en mi directorio de trabajo actual, tenemos archivo Coral three, Index dot SML Mind Sess file, y Abdo Y en nuestro archivo STL de punto de índice, ya vinculo animación GSP en esta etiqueta de script, y ya uso enlace SN de animación GSP usando Ahora dentro de la etiqueta del cuerpo, voy a crear la caja Total tres. Entonces Hamer tipo D tiene caja de etiqueta. Esta es la casilla número uno. Después duplico esta sección. Esta es la casilla número dos. De nuevo, voy a duplicar esta sección, y esta es la casilla número tres. Además, voy a asignar una clase. Voy a asignar la misma clase a la que podamos apuntar todas las casillas advce Entonces voy a teclear clase, esto es solo caja. Después copio esta sección y la pego en nuestra caja dos y caja recta. De nuevo, voy a configurar este archivo. Y luego voy a saltar al punto principal css cinco. Primero, voy a usar el selector universal. Empezar dentro del Cis, voy a decir margen, cero. Nuestra siguiente propiedad, voy a usar padding zero, y nuestra tercera propiedad es el tamaño de la caja de tamaño de la caja de borde de la caja. Y luego voy a darle estilo al elemento box. Entonces voy a usar su nombre de clase dot box dentro de los cultivos, primera propiedad, voy a usar peso Peso, 100 píxeles. Altura, 100 píxeles. Entonces voy a usar propiedad de fondo, fondo, y voy a usar color dorado. Además, voy a agregar margen, margen, y voy a agregar cinco píxeles marchando Voy a establecer este archivo. Si me siento este archivo y relaciono mi navegador, aquí se ve el resultado. Y ahora quiero asignar diferente eimation a estos ítems Pero uno tras otro. Y para asignar la animación, vamos a usar GSap Vamos a saltar al archivo GS punto de la aplicación. Primero voy a escribir, Gap. Punto. Nuevamente, nuestro auto Suggesion reemplaza la palabra clave Vuelvo a la posición GSP, punto, y voy a usar la función pro De. Después en conjunto la ronda ss insertan los códigos dobles, al principio, voy a seleccionar el primer elemento, cuadro uno Voy a seleccionar este elemento usando su nombre de identificación, tiene etiqueta cuadro uno. Después Oma inserte el cis, primera propiedad, voy a usar opacidad Opacidad. Primero, voy a hacer cero la opacidad y a continuación, voy a usar duración, tiempo de duración de animación Duración y quiero decir duración total cinco segundos. Si configuro este archivo y vuelvo a cargar mi navegador en 5 segundos, este elemento se convierte en 021 Quiero decir que este elemento opuesto se convierten en 021. Déjame mostrarte. Si vuelvo a cargar mi navegador, como puedes ver dentro de 5 segundos, se convierte en 021 También, voy a decir exceso de valor 300. De exceso de dirección, viene de 300 píxeles. Voy a configurar este archivo y volver a cargar mi navegador, puedes ver el resultado Creo que cinco segundos son demasiado largos para esta animación, así que voy a hacer dos segundos. Entonces voy a comenzar esta sección. Esta vez, voy a seleccionar la casilla número dos. Voy a cambiar el nombre de identificación cuadro número dos, configuro este archivo y recargo mi navegador, luego tanto la animación va a funcionar en conjunto. Déjame mostrarte. Se puede ver el resultado. Ahora tenemos una solución. Podemos usar la propiedad de retraso. Delay, y quiero agregar dos segundos de retraso. Si configuro este archivo y vuelvo cargar mi navegador, así como pueden ver, para usar COA entre estos dos D. Entonces otra vez, voy a configurar este archivo y liderado por navegador Aquí puedes ver después de completar la primera animación y dos segundos de retraso, completar la segunda animación. Si hice lo mismo varias veces, entonces se ha convertido en un código enorme. Supongamos que creamos un sitio web y donde vamos a aprender múltiples efectos, y quiero ejecutar este efecto múltiple uno tras otro. Y si seguimos este método, entonces se ha vuelto horrible. Vamos a usar la línea de tiempo para eso. Voy a comentar todos los códigos. Después, después vuelvo a la sección de documentación. Entonces puedes buscar la línea de tiempo en esta barra lateral de filtros. Además, puede hacer clic en esta opción, línea de tiempo. Aquí solo trato de mostrarte desde donde puedes obtener la documentación de la línea de tiempo. Después sólo volvemos al archivo JS. Primero, voy a declarar una variable. Aquí escriba CS. Cs y mi límite variable es T. TL estadísticas para línea de tiempo, igual a GSA Cronología GS. Función de línea de tiempo de puntos GSA. Aquí creamos la línea de tiempo, y ahora voy a usar el mismo código. Voy a copiar este código y lo voy a ejecutar usando GsAP Déjame mostrarte. Aquí, voy a pegar el código y voy a descommen este Ahora necesitamos esta propiedad DLA. Entonces voy a quitar esta propiedad. Aquí, voy a sustituir GSP por TL. T L. Y voy a poner este archivo. Ahora, aquí creamos una línea de tiempo. Si vuelvo a cargar mi navegador, como puedes ver después de completar el primero, inicia el segundo Pero puedes notar aquí no utilizamos ningún retraso. Si hago lo mismo para el tercero, así que voy a duplicar esta línea y cambiar el nombre de identificación cuadro número tres, y ellos configuran este archivo. Y luego establecer este archivo y volver a cargar por navegador. Ahora puedes ver después de completar el primero, va a comenzar el segundo, luego va a comenzar el tercero. Básicamente, la línea de tiempo reemplaza la propiedad de retraso. Obviamente, puedes usar delay si trabajas con poca cantidad de animación. Si tu animación es grande, de lo contrario, si usas múltiples animaciones, entonces siempre ve con la línea de tiempo. Es muy útil a la hora de crear una serie de efectos. Ahora, nos llevó de vuelta a la documentación. Si quieres repetir tu línea de tiempo, puedes usar este objeto. Déjame mostrarte. Entonces voy a copiar este valor de objeto y propiedad. Después de vuelta al código de visa sudo. Entonces dentro de esta función tine, voy a usar Cal ases. Entonces voy a pegar el valor de repetición. Quiero repetir esta animación total dos veces. Si configuro este archivo y vuelvo a cargar mi navegador, como pueden ver, primero completa el primero, luego el segundo, luego el tercero Y ahora va a repetir la línea de tiempo. Así es como se repite el trabajo. Y si quieres demorar entre estas líneas de tiempo, sí, puedes Solo unidad para usar esta propiedad, repita retraso. Así que copia, esta propiedad y valor, luego de vuelta al con el código de estudio, y después del coma, voy a pegarlo aquí. Se va a repetir este producto de animación dos veces. Además, va a sumar un poco de retraso vez más entre esta línea de tiempo. Si configuro este archivo y vuelvo a cargar mi navegador después de completar la línea de tiempo, puede ver, va a esperar 1 segundo Entonces después una vez más, va a ejecutar la línea de tiempo una vez más. Se puede ver el resultado. Y si aumento el valor, entonces va a esperar mucho tiempo. Además, proporciona algunas otras funciones como pausar, reanudar SC e invertir. Supongamos que si quieres invertir la línea de tiempo, si haces clic en cualquier botón, entonces va a revertir la línea de tiempo. Proporciona todas las diferentes opciones, cómo puedes usarlo. Se puede leer la documentación para el mayor conocimiento al respecto. Desde aquí, podrás conocer todas las opciones. Ahora hablemos del tiempo absoluto. Se midió desde el inicio de la línea de tiempo. Déjame mostrarte el ejemplo. Ahora, vamos a d al código de visa studio, y vamos a d al punto índice una multa estable. Aquí, voy a usar etiqueta de encabezado, H dos, y además voy a asignar un I ID igual a demi y él escribe un texto, hola mundo Y voy a configurar este archivo y volver a cargar mi navegador. Entonces volvamos al archivo Ab dot JS. Aquí, voy a animar esta etiqueta de rumbo. Pero al principio, voy a reducir el valor de repetición. Quiero repetirlo sólo por una vez. Después voy a seleccionar esta etiqueta de encabezado usando la línea de tiempo. TL punto, y voy a usar de método. Después puse el latón redondo. Primero, voy a apuntar primero, voy a apuntar a la etiqueta de encabezado usando el iName Tiene etiqueta Dm. Ca, en la calibración, Ham usa propiedad llamada opacidad Opacidad, y me pongo opacidad cero, y luego voy a usar el tiempo obsoleto exactamente así Hm para usar el tiempo obsoleto, y quiero configurarlo por 3 segundos. Si configuro este archivo y rojo mi navegador, como pueden ver, después de 3 segundos, va a iniciar la animación. Primero, va a mostrar el hellowd, después va a iniciar esta animación una por una Básicamente, agrega un poco de retraso a esta animación. Básicamente, va a mostrar este elemento después de 3 segundos. Pero si muevo este, si muevo esto por debajo de la caja dos, así que voy a cortar esta porción y pegarla debajo de la sección de la caja dos. Si configuro este archivo y vuelvo a cargar mi navegador, hasta 3 segundos, va a mostrar este texto Pero ya inicia esta línea de tiempo. Déjame mostrarte. Si vuelvo a cargar mi navegador, como puedes verlo inicia mi animación, luego arriba 3 segundos, muestra el texto Así funciona si cambio el agua de la misma. Hay muchas cosas así en la línea de tiempo del GSP. Inicio de nivel, y vamos a aprender sobre ello de vez en cuando en nuestro próximo tutorial. A continuación, vamos a crear un sitio web. En nuestro primer Tutorial, aprenderemos cómo podemos usar GSP y en nuestro segundo Tutorial, aprenderemos sobre la línea de tiempo En el siguiente tutorial, voy a intentar crear una página de destino interesante utilizando estos métodos de línea de tiempo. Y también, voy a intentar implementar todas las cosas que aprendí en nuestros tutoriales anteriores. Entonces esto es todo para este Tutorial. Gracias por ver este video, Stune para el siguiente Tutorial 24. Crea diseños de línea de tiempo animados: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la animación DSP Hoy en este tutorial, vamos a crear un hermoso proyecto. Vamos a crear un proyecto de línea de tiempo de animación horizontal. Como puedes ver en mi navegador, tenemos una línea horizontal. Y como puedes ver, creamos una línea de tiempo usando estas cajas. Ahora, quiero animar esta caja, cuando delod mi Para que puedas notar cuando delod mi navegador, primero, puedes ver que se movió la línea horizontal Entonces uno por uno, va a animar nuestras cajas. Cajas con efecto de arcos, efecto de rotación, efecto de escala, efecto de facilidad, y por fin, movemos esta caja desde la dirección opuesta. Cómo podemos crear este efecto de animación. Como sabéis, para crear este efecto de animación, vamos a utilizar la línea de tiempo de GSAP También, vamos a usar propiedades GAP is I. Entonces, sin perder el tiempo, comencemos lo práctico y veamos cómo podemos crear esta hermosa animación. Entonces como pueden ver, estamos en mente visto codor. Y si te das cuenta, puedes ver, en nuestra etiqueta corporal, tenemos una etiqueta profunda principal. Dentro de esta etiqueta profunda principal, creará múltiples cajas. Él va a crear un total de seis cajas, y cada caja viene con diferente identificación. Con eso, H asignamos un cuadro de nombre de clase a cada elemento profundo. Y para definir la posición de la caja, también asignamos a otras clases, box top para posición superior, y para box bottom para posición inferior. Utilizamos esta clase para posicionar nuestro elemento por encima de la línea horizontal. Además, tenemos otra caja de nombre de clase en la parte inferior. Y estas clases solían colocar cajas debajo de la línea horizontal. Ahora, vamos a saltar al archivo CSS. Si te muestro este archivo CSS, al principio, asignamos altura de ganancia fija a nuestra etiqueta media profunda, y además establecemos un color de fondo. Entonces aquí creamos una línea horizontal usando el selector de posto después de posto Primero, creamos un contenido soso, luego lo posicionamos absoluto, porque en nuestro elemento principal, Hos usa posición relativa, Dy D H usa posición absoluta Entonces uso fijo gh w altura, seis pixel el octavo, 1920 pixel. Ahí después de crear la línea horizontal. Aquí creo las cajas, estas cajas. A continuación, creo los círculos. Aquí creamos dos círculos diferentes para boxtop y clases de box bottom Para crear los círculos, también utilízalo después del selector posto Como puedes ver, este círculo y la rosie hechos con selectores postdocla fin, uno por uno, coloco esta caja de acuerdo a la línea horizontal. En este tutorial, no voy a explicarte cómo puedo crear esta estructura STS. No te preocupes, voy a proporcionar el código fuente de esta estructura. Ahora, vamos a saltar al archivo JS, archivo Abdo JS. Pero antes, si te muestro mi archivo STL Index dot, aquí puedes ver, ya vinculo con biblioteca SP usando CL También adjunte el archivo Abdo JS con este documento. Vamos eso al archivo Abdo JS. Entonces, rápido, voy a integrar timeline. Entonces voy a crear un costo variable. Y nuestra variable m es t, TL estrellas para línea de tiempo, igual a g Sap. Función de línea de tiempo de Gap. Segarán dos en esta línea. Después de crear la línea de tiempo, uno por uno, quiero implementar todo el elemento. Al principio, quiero implementar el elemento principal. Voy a seleccionar el nombre de la clase, y luego volver al Apo cinco. Al principio, voy a usar la función de formulario. Tl de Entonces dentro de la ronda ss. Al principio, voy a seleccionar el elemento principal, usando su nombre de clase punto Ming, y quiero mover este elemento en dirección x x. Dentro del heterotipo cals, x colon dentro del doble menos cien Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador, puedes ver el resultado Como pueden ver, vamos a mover este elemento principal del let al lado derecho, creo que esta animación es demasiado rápida. Vamos a usar algo de duración. Aquí, voy a usar propiedad de duración. Duración, y aquí voy a usar fuerza total segunda duración. Creo que esto es suficiente. Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador, puedes ver el efecto Como puede ver, toda la sección se mueve del lado derecho en 4 segundos. Pero si vuelvo a cargar este navegador, como pueden ver el color de fondo del cuerpo sigue siendo blanco Ahora necesitamos emparejar el color de fondo de este cuerpo con este color. Para eso, voy a saltar al archivo estilo punto CSS. Y aquí, voy a usar el mismo color de fondo en mi etiqueta corporal. Entonces al principio, voy a seleccionar la etiqueta corporal. cuerpo está en el craso, voy a usar esta propiedad de fondo, y voy a establecer este archivo Ahora, si vuelvo a mi navegador y lo vuelvo a cargar. Ahora nuestro color de fondo del cuerpo y el color fondo del elemento principal es similar. Y para que esta animación sea más atractiva, hagámosla al 100%. -100%, no pixel. Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador Se puede ver la animación. Cómo es así. Esto es solo animación de la sección principal. Pero como te dije en nuestros tutoriales anteriores, usar Live Server es la opción no basada para animación SSs porque cada vez que guardo mi archivo, vuelve a cargar el navegador Entonces voy a pausar esta grabación por 2 segundos. Y esta vez, abro este documento desde mi directorio, no desde el servidor en vivo. Al principio, en nuestra línea de tiempo, movemos este elemento principal desde la dirección de exceso de -100% Aquí usamos timeline porque uno por uno, quiero realizar mi animación. A continuación, voy a seleccionar nuestra casilla un elemento. Éste. Entonces copio el nombre de identificación y vuelvo al archivo Abdo JS Aquí voy a empatar, básicamente, voy a cavar esta sección y reemplazar punto principal nuestra primera caja, usando su nombre de identificación. Hs esa caja uno. Además, quiero mover este elemento desde la dirección x xs. Aquí quiero decir duración, apenas 1 segundo. Y voy a poner este archivo. Ahora, volvamos al navegador. Si leo este navegador, al principio, va a realizar la animación principal, luego va a realizar la segunda animación. Pero el problema depende la animación para el primer elemento, los círculos van detrás a la línea horizontal. Entonces para resolver el problema, deja eso al archivo style dot cess. Este es nuestro archivo de estilo dot cess. Esta es la línea horizontal. Al principio, en nuestra línea horizontal, voy a decir índice cero, índice Zight, y voy a decir índice cero uno Entonces voy a decir índice cero en nuestra casilla. Voy a escribir índice Zight y Herm pas 999. Y voy a poner este archivo. Aquí uso Big V porque cada vez que necesito por cajas por encima de la línea horizontal. Por eso, aquí me siento línea horizontal zer índice uno y cuadro cero índice 999. Si configuro este archivo y actúo navegador y vuelvo a cargar este navegador, esta vez, se puede ver arriba para ejecutar la animación principal, se mueve la caja Y como se nota, esta vez nuestro círculo está por encima de la línea horizontal. Con eso, quiero que esta animación box sea más atractiva. Hm para establecer la opacidad. Volvamos al archivo de persecución de Abdo y esta vez voy a usar otra opacidad de llamada de propiedad, OPA City opacidad OPA City opacidad Cuando la caja comience a moverse desde la dirección x xs, entonces establecemos el cero opuesto. Si vuelvo al navegador y eluyo mi navegador, ahora se puede ver arriba en la animación principal Si notas cuidadosamente está funcionando correctamente. Pero si aumento la duración, si lo hago 3 segundos para la animación box, y luego otra vez, volver al navegador y volver a cargar el navegador, primero ejecuta la animación principal Ahora puedes notar la opacidad. Aquí puedes notar la opacidad de este elemento, cómo ha cambiado Y ahora quiero llevar esta animación al siguiente nivel. Para eso, necesitamos usar algún efecto de flexibilización. Así que saltemos a la documentación de este sitio web y busquemos flexibilización, EA, AIN Z, puedes buscarla en esta sección vers del lado del filtro Proporcionar ejemplo de animación de flexibilización múltiple, como power one, power two, power three, power four, back, bounds, illustri, etcétera Cada opción es diferente entre sí. Supongamos que si selecciono power dos, así es como va a correr nuestra animación. Si uso la espalda. Así va a funcionar nuestra animación. Este es el grap de esta animación. la misma manera, si quieres usar el efecto illustr, así es como funciona el efecto illustry Supongamos que quiero usar este efecto ilustrar. Copia esta propiedad y valor y luego vuelve al código del estudio. Aquí, a pres la duración, 2.2 0.5 segundo, entonces voy a usar coma A continuación, voy a utilizar esta propiedad y valor ilustrar. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar este navegador, después de realizar la animación principal, se puede ver el efecto try para el primer elemento Por ahora, me gustaría detener la animación profunda principal, porque cada vez va a ejecutar la animación y lleva más tiempo. Primero, voy a comentar esta sección. No te preocupes. Voy a descomentar esta sección más adelante. Entonces voy a configurar este archivo y volver a cargar mi navegador. Ahora solo puedes notar esta animación. Si quieres cambiar el efecto, supongamos que quieres usar ba. En ese caso, justo aquí, necesitas escribir está de vuelta. Después de este archivo, si vuelvo a cargar mi navegador, se puede decir el efecto de espalda Ahora, de la misma manera, quiero traer este elemento desde la dirección opuesta. Quiero traer este elemento desde el lado derecho. Esta vez, quiero traer nuestro último elemento desde el lado derecho. Voy a hacer grande esta sección, y esta vez voy a seleccionar la casilla número seis, porque esta es la última casilla. Seleccionamos esta casilla usando su nombre ID, y luego voy a cambiar la posición del eje x, cien por ciento de la x xs. Si configuro este archivo y vuelvo a un navegador, y vuelvo a cargar mi navegador Al notar, la primera caja viene de este lugar y la segunda caja viene de esta dirección. Tanto la animación haciendo lo mismo, sino solo para cambiar la dirección. A continuación, voy a usar efecto box para este elemento, 2012. Si selecciono esta opción, ya puedes ver cómo funciona esta animación. Volvamos al código de Es studio. Entre la caja uno y la caja seis, quiero colocar la animación de la caja dos. Quiero hacerlo en serie para un duplicado esta sección y seleccionar la casilla dos, y voy a cambiar el valor ese de nuevo a encuadernado Y también, necesitamos cambiar la posición, xs a y x, menos y x posición, y voy a configurar este archivo. Después de configurar este archivo, vamos al navegador. Después del navegador, después de ejecutar la animación de la primera caja, va a ejecutar la segunda animación de cuadro. Vaya, creo que cometí algún error porque necesitamos traer esta caja de abajo, no de arriba Volvamos a las visas a tu código y eliminemos el -100% y fijemos este archivo Después de este archivo, nuevamente, voy a recargar mi navegador Después de ejecutar la primera animación, puedes notar la segunda animación, cómo funciona y proporciona efecto rebote. Después ejecuta la tercera animación. Entonces voy a animar la tercera caja. Entonces volvamos a las visas a tu código, y voy a pigar esta sección Y esta vez quiero seleccionar la casilla número tres, y voy a cambiar la dirección -100%. Con eso. Ahora, con rebote, quiero algún efecto giratorio. Entonces voy a usar una propiedad llamada rotate. Rotar, dos puntos, y quiero girarlo 360 grados, un círculo completo. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, primero ejecuta nuestro primer elemento, luego va a ejecutar el segundo elemento, y si notas, como puedes ver, se inclina el elemento también rooteó el elemento A continuación, voy a apuntar a la cuarta casilla. Nuevamente, estoy de vuelta al código sto y dulicato, número tres Primero, voy a cambiar la dirección, 100% porque quiero moverlo desde abajo. Entonces voy a usar el mismo efecto de límites. Pero esta vez no voy a usar efecto de rotación. Esta vez, voy a usar la habilidad ive. Escala, colon, y quiero hacer escala 0-1. Entonces aquí paso cero. Pero antes de establecer este archivo, necesitamos cambiar el ID, casilla número cuatro, y voy a configurar este archivo. Ahora, saludemos al navegador. Después de relute el navegador, si notas el cuarto cuadro, puedes entender la animación Con efecto rebote , escala el elemento. Y ahora quiero animar el quinto elemento. Para eso, esta vez voy a usar otro efecto. Esta vez, voy a usar efecto lento. Volvamos al código de estudio, y primero, voy a duplicar esta sección. Entonces voy a cambiar la identificación. Casilla cuatro a cinco, y cambio rebote a lento. Al principio, voy a cambiar la dirección -100%, y voy a quitar la escala uno Esta vez, no voy a aplicar efecto de escala, y voy a configurar este archivo. Después de configurar este archivo, se vuelve al navegador y vuelve a cargar el navegador Después de relacionar el navegador, como puedes ver uno por uno, va a realizar todas las animaciones. Arma la animación, animación giratoria, animación a escala, animación de efecto lento. Y animación de espalda desde la dirección opuesta. Y ahora voy a activar mi animación profunda principal. Volvamos al código del estudio de video y descomente esta sección Y vuelve a poner este archivo. Ahora volvamos al navegador y redirijamos mi navegador. Ahora puedes ver primero, puedes ver una línea horizontal venir de esta dirección, luego una por una, realiza toda la animación. Finalmente, creamos esta animación de efecto de línea de tiempo usando GSAM Esto es para el Tutorial, como para ver este video, Sedule para el siguiente Tutorial 25. Enlace animado de CSS Button: Bienvenidos de nuevo chicos. Este es nuestro primer ejercicio. Vamos a comenzar nuestro ejercicio de animación con uno simple. En este tutorial, vamos a aprender cómo podemos crear el botón de enlace animado CSS. Veamos el resultado de esta animación. Déjame mostrarte el resultado de nuestro proyecto. Como pueden ver, hay un botón. Cuando tolva mi cursor sobre él, se puede ver un efecto deslizante. Además, se puede ver que sigue siendo el color del texto. Es un proyecto muy sencillo, pero efectivo para principiantes. Déjame mostrarte cómo podemos crearlo. Como pueden ver, lado a lado, abro mi iso sudo Correor, y mi navegador usando la extensión Live Server Al principio, voy a crear una etiqueta de anclaje en este documento. Entonces voy a escribir A, y voy a escribir algún texto. Haga clic en mí. Yo configuro este archivo, se puede ver el texto en nuestro navegador, haga clic en mí. Además, voy a asignar una clase a esta etiqueta de anclaje. Clase, y nuestro nombre de clase es BTM significa botón. Después dentro de la etiqueta de la cabeza, voy a crear etiqueta de estilo. Después dentro de la etiqueta de estilo, voy a crear un selector usando BTN class dot BTN Después dentro del Calass. Al principio, para nuestra clase de botones, voy a decir un color de fondo. Entonces, para escribir fondo aquí. Antecedentes. Voy a tomar color naranja para nuestro fondo. Si configuro este archivo, puedes ver el resultado, y ahora quiero cambiar el color del texto. Algún tipo, color, color, blanco. Si configuro este archivo, puedes ver el resultado. Si notas, puedes ver un subrayado en este texto, y ahora necesitamos eliminar el subrayado Para eso, necesitamos usar propiedad de decoración de texto. Voy a escribir decoración de texto. Ninguno. Si configuro este archivo, como pueden ver, es eliminar subrayado del texto Ahora agreguemos un poco de relleno a este botón. Algún tipo padding, padding from top en button, voy a asignar pixel, y desde izquierda y derecha, voy a asignar diez pixel. Si configuro este archivo, puedes ver el resultado. Si quieres agregar algún párrafo arriba del botón y debajo del botón. En ese caso, es necesario utilizar el bloque en línea de visualización. Así que escriba la propiedad de visualización. Mostrar bloque en línea. Si no usamos la propiedad display inline, entonces nuestro relleno puede superponerse con el párrafo. Por esa razón, necesitamos usar el bloque en línea de valor de visualización. Ahora quiero aumentar el tamaño de fuente, y también cambio la familia de fuentes. So type familia de fuentes hair, familia de fuentes aerial. Además, voy a aumentar el tamaño de la fuente. Entonces, para escribir tamaño de fuente aquí, tamaño de fuente. 22 píxeles. Si me satisface, ahora ve claramente nuestro botón. Patearme. Ahora puedes ver el color en el fondo. Cuando estoy sobre mi cursor, quiero animar este color de fondo No quiero mostrar este color sin animación. Solo quiero mostrar este borde de color de este botón. Para eso, voy a comentar este fondo de propiedad. Entonces voy a teclear frontera. Borde un píxel, sólido, y voy a usar el color naranja rojo para el borde. Si configuro este archivo, puedes ver el resultado. Además, voy a cambiar el color de la fuente. Voy a usar el mismo color para la forma. Tarifa naranja. Si configuro este archivo, ahora solo se puede ver el borde y el texto, y ahora quiero dar un efecto deslizante usando animación. Para eso, voy a crear un pseudo selector dot BTN Después en conjunto los alias. Al principio, voy a establecer un color de retroceso, escribir fondo, y voy a usar el mismo color para fondo, tasa de naranja, y luego necesitamos posicionarlo. Voy a escribir posición propiedad. Posición absoluta. Si usamos ata value, necesitamos eliminar nuestro contenido. Para eso, voy a escribir códigos dobles de contenido. Tenemos que dejarlo en blanco. Si usamos Ater y antes pseudo selector. Como puedes ver para Ater, utilizamos la posición absoluta. Voy a usar position relative en nuestro contenedor padre, position relative. Después de la posición, tenemos que pasar arriba e izquierda tipo v, arriba, cero, Izquierda, cero, y luego voy a st con y altura para nuestro selector Ater. Primer tipo con w cien por ciento. Y luego también voy a decir altura, altura, 100%. Si configuro este archivo, como pueden ver, nuestro elemento ta cubre todo nuestro botón. Por ahora, voy a decir 0% con, y ahora necesitamos crear el efecto hover de la clase BGN Para eso, voy a escribir punto btn, y voy a crear un selector hover Después dentro del cvss, al principio, voy a cambiar el color del texto del botón Cuando coloco el cursor sobre este botón, quiero cambiar el color del texto del botón Voy a escribir color blanco. Entonces voy a duplicar este selector de hover con vidrio BTN, y ahora voy a crear selector de hover con apter Her colon apter En este selector, quiero extender la maleza. Quiero escribir hierba al cien por ciento. Si configuro este archivo y pongo el cursor sobre este botón, puedes ver el efecto, pero no puedes ver el efecto deslizante Además, no se puede ver el texto porque necesitamos mover el contenedor ter detrás del texto. Para ello, necesitamos usar el índice Z. Algún índice tipo z menos uno. Si configuro este archivo y pongo el cursor sobre este botón, puedes ver el efecto Aquí se puede ver cuando yo por mi cursor sobre él, se encuentra el color del texto. Con eso, aumentó hasta el ancho del selector 100% de 0% a 100%. Y ahora necesitamos usar la transición para nuestra animación. Necesitamos usar esta transición en nuestra clase de padres. Dentro de la clase BTN, voy a escribir transición Transición a todos. aplicar la transición en toda transformación. Por eso uso todo el valor, y luego tenemos que pasar el tiempo de duración de transición. Quiero pasar 0.5 segundo, y luego hay que pasar el modo de transición, que es E. Voy a usar e valor. También, quiero pasar transición de ve. Para eso, voy a usar cero segundos. Si configuro este archivo, va a afectar solo al texto. Si sobre cur en ello, se puede ver el efecto. Puedes ver el efecto de transición en nuestro texto, no el color de fondo. Para obtener este efecto deslizante, necesitamos usar esta transición en nuestro selector superior. Copio esta transición y la pego aquí. Si configuro este archivo y vuelo el cursor mis curs están sobre él, puedes ver el resultado Creamos con éxito nuestro botón de enlace animado. No utilizamos ningún fotograma clave CSS para eso. Oye, este ejercicio no es muy difícil porque quiero iniciar estos proyectos de animación con unos efectos de transición muy simples, no los fotogramas clave CSS. partir de nuestro próximo proyecto, vamos a saltar al difícil. Gracias por ver este video, estén atentos para nuestro próximo ejercicio. 26. CSS 3D Flip on Puro CSS3 3D Button Efectos: bueno verlos de vuelta chicos una vez más, estoy de vuelta con un nuevo y emocionante proyecto de animación. En este proyecto, vamos a crear el botón de suspensión de tres días Sin perder el tiempo, veamos la demostración. Como pueden ver, hay un botón. Si pongo el cursor sobre él, se puede ver el resultado. Aquí puedes ver la parte opuesta de este botón. Da la vuelta al botón y devuelve un nuevo sabor. Haga clic en el cabello. Es un botón de animación hoverific, pero es bastante avanzado Sin perder el tiempo, comencemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi corretor visual studio y mi navegador usando la extensión Lb Server También, puedes ver, ya creo documento estil llamado index dot at Con eso, creo un archivo Sess, style dot Sess. Como pueden ver, vinculo este archivo de estilo con este documento estim Entonces primero, voy a crear una etiqueta de anclaje dentro de la etiqueta body. Entonces escribe A. Por defecto, no quiero redireccionarlo, así que quiero usar tiene tag. Ahora dentro de esta etiqueta ancla, voy a crear tres nuevas etiquetas span. Frente de vidrio Span. Entonces voy a deg esta etiqueta span dos veces. Nuestro primer nombre de clase span es front, y nuestro segundo nombre de clase span es center. Entonces escriba, center, y nuestro nombre de clase de último span está de vuelta. Así que escribe de nuevo. Entonces en nuestra parte frontal, voy a teclear pi, y en nuestra parte trasera, voy a mecanografiar cabello. Para nuestra etiqueta de span central, quiero dejarla en blanco. Si configuro este archivo, como pueden ver, como pueden ver en mi navegador, aquí está sprint, haga clic en aire, esquina superior izquierda de este navegador. Lo hice con éxito sobre una parte estable. Pasemos al archivo de tesis y diseñemos esta página. Al principio, voy a darle estilo a nuestra etiqueta corporal. Entonces para escribir cuerpo. Dentro del Calise, voy a poner marzín cero, Marzin cero Además, quiero st padding zero, padding, zero, y luego voy a usar font family property. Así escriba familia de fuentes, Sans. Además, voy a establecer un color de fondo oscuro a nuestro cuerpo. Antecedentes, y voy a usar hexa ve, tiene, dos, seis, dos, seis, 26 Si configuro este archivo, puedes ver el resultado. Como puedes ver en mi navegador, ahora nuestro color de fondo es gris oscuro, y ahora necesitamos quedarnos esta etiqueta de ira Dentro de la etiqueta de ira, tenemos etiqueta de pan total. Vamos a estrellar la etiqueta de ira. Entonces res A dentro de los cálices al principio, voy a usar la propiedad de posición, posición Posición, absolutamente. Ahora quiero alinear esta etiqueta de ancla, a mitad de esta página. Para eso, voy a usar propiedad top, Top 50%. Entonces voy a usar la propiedad Lip. Dejar 50%. Si configuro este archivo, puedes ver el resultado. Como puedes ver alinea nuestra etiqueta de anclaje, mitad de esta página web. A continuación, voy a usar transform property. Entonces escribe, transforma aquí, transforma. Transformar traducir. Como sabes, usando el método translate, podemos mover un elemento desde su posición actual, acuerdo con x x e yx Para x xs, voy a pasar -50%, y para eje y, también voy a pasar -50% Entonces voy a decir aumentar el ancho a su etiqueta angular. Al principio, voy a teclear nosotros. Nosotros 200 pixel, y luego voy a decir height property, height, height 60 pixel. Si configuro este archivo, se puede ver el resultado, y luego voy a decir texto lign center, text align center Como saben, vamos a crear un botón de tres d sobre. Para ello, necesitamos usar otra propiedad, que es transformar el estilo. Entonces, para escribir, transformar el estilo. Transforma el estilo. Aquí voy a usar preserve tres d v. Esta propiedad especifica cómo se renderizan los elementos anidados en tres espacios D. Como usted sabe, necesitamos usar esta propiedad con transformar propiedad. Sin propiedad transporm, no podemos usar esta propiedad. Lo aprenderemos en nuestra serie de tutoriales, y luego voy a usar otra propiedad, que es prospectiva, prospectiva de 1,000 píxeles. También, voy a decir transformar posición de origen, transformar origen, centro centro. Si configuro este archivo, como pueden ver, ahora alinea perfectamente nuestro contenido en medio de esta página web. No podemos entender la perspectiva y transformación de tres porque no le damos estilo a nuestro objeto span. Ahora necesitamos darle estilo a nuestro objeto span. Como se puede ver, tenemos pro tres span objeto. Vamos a darle estilo a todo el objeto a la vez. Para eso, voy a seleccionar etiqueta span. Span. Dentro de los cavas, al principio, voy a teclear posición propiedad Posición absoluta. A continuación, necesitamos alinear esta etiqueta span. Cero superior, p cero. También, voy a decir y y peso, estatura 100% peso 100%. Y luego voy a usar dis blog, display block, y además voy a alinear el texto dentro de esta etiqueta pan. Voy a atar texto alinear texto alinear centro, y luego voy a decir altura de línea. Altura de línea, 60 píxeles. Si configuro este archivo, aquí se puede ver que se superpone a nuestro texto. A continuación, voy a decir tamaño de fuente tamaño de fuente, 24 píxeles, y también voy a establecer un color de fondo a la etiqueta span. Antecedentes. Voy a usar el valor RGV RGB, como campanas, primero, tenemos que pasar valor rojo, luego tenemos que pasar valor verde, por fin ternera azul Con eso, tenemos que pasar el valor Alfa. Podemos controlar la transparencia usando el valor Alpha. Por eso necesitamos usar este vil. Aquí, voy a pasar 255 por rojo, 255, y luego voy a pasar una vez más, dos fi cinco para verde, y también 255 para azul. Para nuestro Alpha u, voy a pasar 0.10. Ahora necesitamos cambiar el estilo de transformación. Voy a atar transformar estilo transformar estilo, ps tres. Ahora no quiero mostrar la parte posterior de nuestra etiqueta span. Cuando rotas, no queremos mostrar la parte posterior. Para eso, necesitamos usar una propiedad, y ya lo sabes, que es la visibilidad del espacio trasero. Volver atrás spas visibilidad, y voy a establecer el valor oculto porque no quiero mostrar la parte posterior, y luego voy a establecer el radio de borde de la etiqueta span, radio de borde, 30 píxeles. Nuestra siguiente propiedad es la transformación de texto. A continuación, quiero transformar el texto en mayúsculas. Para eso, voy a usar la propiedad de transformación de texto. Transformación de texto, mayúsculas. A continuación, voy a establecer un color a nuestro texto. Color ite. Si configuro este archivo, puedes ver el resultado. Con eso, quiero decir propiedad de transición, transición. 1 segundo. Como saben, tenemos un total tres objetos span dentro de la etiqueta de anclaje. Voy a transformar toda la etiqueta span tema diferente. Al principio, voy a transformar el frontal, y luego voy a transformar el trasero. Por fin, voy a transformar el centro uno, y vamos a ejecutar la transformación usando selector. Volvamos al archivo CSS y comencemos con nuestra primera etiqueta span. Entonces escriba, span dot front. Entonces dentro de los calses, voy a usar transform property, transform, transform rotate x, y quiero girarlo cero d. Con eso, quiero moverlo en dirección z x Voy a escribir, traducir z, 20 pixel. Si configuro este archivo, no se puede ver el resultado porque quiero hacer esta transformación cuando coloco el cursor sobre este botón Ahora quiero rotar este botón cuando flote sobre él. Para eso, necesitamos crear un selector de hover. Entonces para conseguir esta línea y voy a atar ancla tag colon hover Cuando coloco el cursor, quiero rotar nuestra etiqueta de span frontal menos 180 Si configuro este archivo, y coloco mis curs sobre él, puedes ver el resultado Puedes ver nuestra primera etiqueta de pan rotar menos 180 grados. Lo mismo que tenemos que hacer para nuestra etiqueta de pan trasero. Voy a seleccionar este código y obtenemos esta línea. Aquí voy a atar span, dot, back. Por defecto, quiero girarlo 180 grados, y voy a usar el mismo video lo transfiere 20 pixel. En nuestro selector hober, quiero girarlo cero d, atrás, y quiero girarlo cero Si configuro este archivo y los micers hober están en él, ahora se puede ver el efecto giratorio de tres D. Ahora quiero st un color de fondo para nuestra etiqueta de pan central. Éste. Para eso, voy a atar span punto centro. Dentro de las calibraciones, voy a usar propiedad de fondo, fondo, y voy a usar color degradado, y voy a usar gradiente lineal Y voy a usar la dirección de los labios. Quiero pasar a encendida. Coma. Ahora voy a usar el valor de color hexa Ha etiqueta C 30 1a5b. Es un color rosa, y nuestro siguiente color es tiene etiqueta 71 29bd. Es de color morado. Si configuro este archivo, puedes ver el resultado. Ahora, para nuestro objeto de extensión central, quiero activar la visibilidad de retroceso. Voy a escribir Visibilidad de retroceso, y voy a usar valor visible Entonces voy a crear un selector de hover para nuestra etiqueta de span central Y voy a quitar la palabra clave front, y voy a teclear center. Para Rotar, voy a usar menos 18d. Pero para traducir Ocho, voy a usar cero píxeles. Si configuro este archivo y los mikes de Hober están en este botón, puedes ver los tres efectos D. Creamos con éxito tres D flip Her botón. Espero que les guste este proyecto. Gracias por ver este VD, St sintonizado para nuestro próximo ejercicio. 27. Texto animado editable: Un placer verlos, otra vez, estoy de vuelta con un nuevo y emocionante proyecto de animación. En este proyecto, vamos a crear texto animado irritable con efecto Cases brillando Vamos a la pantalla de la computadora y veamos la demostración. Aquí puedes ver cómo brilla nuestro texto, 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 SSS. Puedes usar esta animación en tu sitio web. Puede darle a tu sitio web un azul muy creativo. Sin más arriba, comencemos el proyecto, y veamos cómo podemos crearlo. Como pueden ver, lado a lado, abro por así a codaor y mi navegador usando la extensión Light Server, y ya creo un documento EstiML llamado index dot EstiML llamado index Con eso, vinculo un archivo CSS, estilo punto CSS. Al principio, dentro de la etiqueta body, voy a crear una etiqueta con encabezado, H dos encabezado, y 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. Si quieres que sea irritable contenido, en ese caso, necesitamos usar un atributo, y nuestro nombre de atributo es contenido irritable. Déjame mostrarte. Aquí voy a escribir content it table, y 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. Hemos hecho con éxito nuestra parte de mesa. Vamos a saltar a nuestra parte de diseño. Voy a saltar archivo CSS, estilo CSS. Al principio, voy a usar selector universal, para escribir estrella. Dentro del Calass, quiero establecer margen. Margen, cero. Con eso, también quiero establecer padding, padding zero. Además, quiero usar propiedad oxidante, dimensionamiento de caja, boxizing, Entonces voy a usar familia de fuentes, familia de fuentes. Familia de fuentes, y quiero usar la fuente Aerial. Elevación aérea y sensible. Si digo este archivo, se puede ver el resultado. A continuación, quiero darle estilo a nuestro body tag body. En su lugar los alias, quiero comenzar con la propiedad de visualización Flexión de pantalla. Oye, si no estás familiarizado con flex y leer, puedes revisar mi curso. Entonces justificar el centro de contenido. Además, quiero alinear este ítem al centro. Quiero usar la propiedad align item, Align item center. Nuestra siguiente propiedad es la altura mínima. Necesitamos establecer la altura mínima, la altura M. Altura mínima, quiero usar 100 VH. Con eso, quiero st color de fondo oscuro. Bground, y voy a usar gv ve. Por tarifa, voy a usar cinco. Para el verde, voy a usar 30. Para el azul, voy a usar 71. Si configuro este archivo, se puede ver el color. Se puede ver el color de fondo azulado oscuro, y también centrar nuestro contenido a mitad de esta página Porque usamos flexbox para alinear nuestro contenido y luego llegar la parte más importante, H para encabezar el diseño de etiquetas H dos dentro del caliss, nuestra primera propiedad es posición, posición relativa, y nuestra segunda propiedad es tamaño de fuente Tamaño de fuente seis M. Si configuro este archivo, puede ver el resultado. Con eso, quiero st interlineado entre letras, Espaciado entre letras. Espaciado entre letras, 15 píxeles. Nuestra siguiente propiedad es el color significa color del estanque. Color, y voy a usar r valor giv. Para el rojo, voy a usar cuatro. Para verde, voy a usar 50, y para 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 esta toma en mayúsculas Los bronceados de texto forman mayúsculas. Si configuro este archivo, se puede ver el resultado, y luego voy a st wa wa 100%. El texto alinea al centro, y luego viene la parte muy importante de este video. Ahora, necesitamos reflejar este texto. Quiero crear una medalla de reflexión. Para eso, necesitamos usar una nueva propiedad n box reflect. Déjame mostrarte. Oye, como puedes ver, trabajo con el navegador Chrome. Por eso necesitamos usar un prefijo. Web ket, el nombre de nuestra propiedad, caja refleja. D reflexionar. Al principio, necesitamos declarar la dirección de nuestra reflexión, que es u, 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 establecido. Tercero, necesitamos proporcionar el valor de la Taza. Para el valor Mux, voy a usar gradiente lineal. Aquí voy a escribir gradiente lineal. Dentro de los paréntesis, o el primer valor es transparente. Nuestro segundo valor es v. Dentro de los paréntesis, necesitamos proporcionar el valor argv Pero al principio, voy a encender la envoltura blanca. Ahora voy a pasar el Vu, O primer valor es valor rojo. Para el rojo, voy a usar 11. Para el verde, voy a usar 70. Para el azul, voy a usar 18. Por fin, necesitamos pasar el valor Alpha, como ya saben, el valor Alpha use para transparencia. Para el valor Alfa, 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 altura de línea, altura de línea. Para la altura de línea, voy a usar 0.70 E. A continuación, quiero encender el contorno de este texto Quiero usar la propiedad de esquema. 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, y luego llega nuestra parte final, que es la animación. Al principio, quiero crear un fotograma clave a los fotogramas clave de velocidad. Nuestro nombre de animación es animado. Después dentro de la clase. Como saben, tenemos un total de dos tipos de selector de fotogramas clave. Puedes usar desde o dos palabras clave. De lo contrario, se puede utilizar el valor porcentual. Para este ejemplo, tenemos que ir con valor porcentual. No sólo, necesitamos trabajar con valor porcentual múltiple, y ya preparo el valor porcentual para este ejemplo. Voy a copiarlo y quiero pegarlo aquí. Pegar. Luego dentro de los casos, necesitamos usar nuestra propiedad. Al principio, quiero cambiar el color del texto. Entonces voy a usar el valor del color. Color, y voy a usar valor AGV. Y uso el mismo color, que utilizo en nuestra etiqueta de encabezado. Nuestra siguiente propiedad es la sombra de texto. Entonces escribe, sombra de texto. 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, ¿funcionó correctamente o no? Quiero utilizar la propiedad de innovación. Animación, y nuestra aniación me es animada, y nuestra duración de una nación tm es de 1 segundo, y nuestra dirección de animación es lineal Para nuestro tiempo de duración de aniación, voy a usar rueda infinita Infinito. Si guardo este archivo, veamos qué pasó. Como se puede ver, no pasa nada. Porque para crear el efecto creciente, necesitamos jugar con el valor de sombra de texto. Para eso, necesitamos usar algún selector de porcentaje más. Ya copio el selector de porcentaje y lo voy a pegar aquí. Después dentro de la clase, voy a usar la propiedad de color. Color, color, blanco, tiene etiqueta, F f f. Ahora necesitamos jugar con la propiedad de sombra tex. Algún tipo sombra fiscal. Toma sombra. Al principio, necesitas pasar el valor x xs, que es cero, y luego debes pasar el y xs Vu. Voy a usar cero. Tercero, hay que pasar el valor de Blarns 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 vu. RGB dentro de los paréntesis, voy a escribir, valor rojo C seis, valor verde 149, y valor azul 231 Si configuro este archivo, puedes ver el resultado. Se puede ver como es sangrar. También, se puede ver la reflexión. Y ahora quiero crear este efecto más atractivo. Quiero duplicar esta línea, C P C En la siguiente línea, quiero duplicar esta línea. Ahora solo quiero aumentar el valor de desenfoque, 20 píxeles. Si configuro este archivo, puedes ver el resultado. Ahora se puede ver un borde de efecto de luz creciente de este texto. Después del coma, quiero duplicar esta línea. Una vez más, quiero aumentar el valor de Blarns 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 el último coma y pongo este archivo, se puede ver el efecto. Como puedes ver, ahora nuestro efecto creciente se ve más atractivo. No sólo eso, también es editable. Supongamos que quiere escribir su nombre. Voy a quitar esta, y voy a teclear Smith. Puedes escribir cualquier texto aquí porque utilizamos contenido itable, como puedes ver, contenido editable true 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. 28. Ojos animados siguen el cursor del ratón: Es bueno verlos una vez más Estoy de vuelta con un nuevo y emocionante proyecto de animación Chases, y el nombre de nuestro proyecto es ojos animados siguen el cursor del mouse Veamos la manifestación. Aquí se puede ver una cara. Si te das cuenta, puedes ver sus ojos siguiendo el punto del cursor. Si lo muevo al lado derecho de esta página, puedes ver que es seguir. Si lo muevo al revés de esta cara, también es seguir. Si yo por mi cursor en esta cara, se puede ver que cambió la reacción de la boca. Veamos cómo podemos crear este proyecto. Como pueden ver, lado a lado, abro mi creador de Visual Studio y mi navegador usando la extensión PSEver, y ya creo documento EstiML llamado Index dot estel Ya vinculo este documento Index dot estel Ya vinculo de EstiML con el archivo Sess, Style dot Sess Primero, dentro de la etiqueta body, voy a crear una clase D, D y nuestro nombre de clase es phase. Al principio, quiero crear la cara. Entonces dentro de esta etiqueta profunda, voy a crear otra clase profunda, D,. En esta sección, vamos a crear es de nuestra cara. Entonces dentro de esta sección, vamos a crear dos is. D, más yo, y voy a retar esta diapositiva. Lo hicimos con éxito sobre una parte estable. Primero, creamos una etiqueta para la fase. Luego dentro de esta etiqueta rápida, creamos un bloque para s, y luego llevamos a otra etiqueta profunda por dos s. Ahora, saltemos a la sección de estilo. Al principio, voy a tomar un selector universal, estrella. Dentro de los casos, al principio, voy a usar margin property. Margen, cero, y luego voy a usar padding property, padding zero y box sizing border box. A continuación, voy a estrellar la etiqueta del cuerpo. Cuerpo dentro de las cajas, display flex. Justificar centro de contenido. Utilizo contenedor flexible para alinear nuestro centro de fase de esta página. A continuación, voy a usar la propiedad Align item. Alinee los artículos en el centro. Altura mínima, altura media, 100 VH. Quiero usar toda la página web. Por eso uso 100 VH, y nuestra última propiedad es de fondo. Bground. Para el color de fondo, quiero usar el valor RGV RGV para rojo, voy a usar ocho, y para verde, voy a usar el valor 84 Para el azul, voy a usar 19. Si configuro este archivo, se puede ver el color de fondo. Para este proyecto, voy a usar el color de fondo azul oscuro, y ahora quiero darle estilo a la parte de la cara. Quiero darle estilo a la cara de punto, Dentro de las calibraciones. Al principio, voy a usar la propiedad position, position relative, y nuestra siguiente propiedad es wed wit, 300 pixel. También, quiero decir altura, altura, 300 píxeles también. Nuestra siguiente propiedad es de fondo. Bground, Una vez más, voy a usar el valor RGV. RGV, para valor rojo, voy a usar 255 Para el valor verde, voy a usar 198, y Para el valor Azul, voy a usar 54. Si configuro este archivo, puedes ver el cuadro cuadrado en tu pantalla, y ahora necesitamos convertir la forma cuadrada en una forma redonda. Para eso, voy a usar la propiedad de radio de borde. Radio de borde 50%. Si configuro este archivo, puedes ver el resultado. Además, voy a usar la propiedad display. Expositor de lino. Justificar centro de contenido. Además, voy a usar align item property center. Oye, si no estás familiarizado con CSS Flexbox y avaricia, puedes revisar mis llagas Cs responsivas Damos forma a nuestra fase con éxito. Ahora tenemos que poner boca en esta fase. Para eso, voy a crear fase Colon cool antes selector, antes. Entonces dentro del carro resis, Como ya sabrás, primero vamos a tomar una propiedad en blanco, y nuestro nombre de propiedad es contenido, contener en blanco. Entonces entonces nuestra siguiente propiedad es posición, posición absoluta. Entonces voy a decir altura y peso, peso 150 pixel, altura 70 pixel, y ahora voy a tomar color de fondo. Bground, chocolate. Si pongo este archivo, se puede ver una forma rectangular en medio de esta cara. Ahora tenemos que mover esta cara un poco grande hacia abajo. Para eso, voy a usar el valor máximo. Top 180 píxeles. Si configuro este archivo, puedes ver el resultado. Aquí puede ver que nuestra boca parece una caja cuadrada, y para crear una forma de boca perfecta, necesitamos usar la propiedad de radio de borde. Al principio, quiero establecer un radio de borde en esta esquina. Para eso, voy a usar el radio inferior izquierdo del borde. Borde inferior lept radio, y voy a usar 70 píxeles Si configuro este archivo, se puede ver el resultado, y luego voy a apostar esta línea y reemplazar la vuelta por la derecha. Si configuro este archivo, aquí puedes verlo crear una forma de sonrisa. Ahora quiero cambiar el movimiento de la boca cuando abro el cursor sobre ella. Para ello, necesitamos crear otro selector. Déjame mostrarte. Cara de puntos Colon hover, colon antes. Dentro del caliss, voy a reutilizar este valor y propiedad Voy a copiar la propiedad y valor. Y pegarlo aquí. Ahora, uno por uno, voy a sustituir estos valores. Primero, voy a cambiar el valor máximo, 210 píxeles. Si configuro este archivo y coloco mi cursor sobre él, puedes ver la diferencia Es cambiar la posición de montaje. A continuación, voy a cambiar este radio de agua. Radio cero del labio inferior de la botella. Además, la botella inferior derecha radio cero. Si configuro este archivo y coloco mi cursor sobre él, puedes ver la diferencia Pero no hay transición en esta transformación. Para eso, necesitamos usar la propiedad de transición. Aquí, voy a teclear transición. Transición 0.5 segundos. Si configuro este archivo y vuelo el cursor mis autos están sobre él, puede ver el efecto de transición Se necesitan 0.5 segundos para completar la transformación. Completamos con éxito nuestra sección de boca. Vamos a saltar a la sección de hielo. Como se puede ver dentro del contenedor de hielo, tenemos dos. Vamos a crear el es de esta cara. Al principio, voy a la sección de estilo punto. Luego dentro de la posición Calass relativa, y quiero colocarla en la parte superior -40 pixel, y voy a usar display property display flex Usando esta propiedad y valores, movemos con éxito nuestra sección de hielo en ese lugar, no en la mitad de esta cara. Entonces necesitamos crear la i. voy a seleccionar la clase de hielo, también voy a seleccionar la clase i. Entonces en conjunto los calibrados o primera propiedad es posición, posición relativa, y también voy a decir altura y ancho para esto i. mié Un típico ell, alto un Después de w y altura, voy a stat color de fondo. Antecedentes. Se. Si configuro este archivo, puedes ver el resultado. Básicamente, lado a lado, crea dos cajas cuadradas con una típica entonces altura. Entonces voy a usar la propiedad display. Bloque de visualización. A continuación, voy a usar la propiedad de radio de borde. Radio de borde 50%. Si configuro este archivo, se puede ver la diferencia. Aquí se puede ver uno al lado del otro, crea dos globos oculares, pero no hay hueco entre dos globos oculares Para eso, voy a usar margin property. Margen, cero y 15 píxeles. Si configuro este archivo, se puede ver la diferencia. En general, este valor de margen proporciona un espacio de 30 píxeles entre estos dos ojos, y ahora necesitamos crear los globos oculares para este ojo Al principio, voy a copiar esta línea. Y voy a pegarlo aquí. W I, voy a usar antes de selector. Colon Colon antes. Después dentro del caliss, como saben, primero, necesitamos crear un contenido en blanco, contenido en blanco Nuestra siguiente propiedad es posición, posición absoluta. Además, tenemos que colocarlo, así que voy a usar el valor máximo, Top 50%. Dejó 25 píxeles, y para nuestros globos oculares, me voy a sentar 840 píxeles También altura 40 píxeles. A continuación, voy a usar el color de fondo para nuestro globo ocular, fondo, y voy a usar RGV GV, para verde, voy a pasar 42. Entonces para rojo, voy a pasar 42 una vez más. También para el azul, voy a pasar 42. Yo configuro este archivo, se puede ver el resultado. Como se puede ver, se crean dos cuadro cuadrado gris oscuro. Pero necesitamos que sea de forma redonda. Voy a usar radio fronterizo. Radio fronterizo, 50%. Si configuro este archivo, puedes ver el resultado. Él se puede ver nuestras miradas de hielo bajadas en ese ángulo. Pero quiero cambiar el ángulo de aspecto de hielo, algo en esa posición. Para eso, voy a usar transform property. Transformar traducir -50% para x xs, también -50% para y Si configuro este archivo, puedes ver el resultado. Ahora miremos en ese ángulo. Si er mi cursor en esta fase modi, se puede ver la reacción, pero la bola de hielo no sigue la posición del curser Para eso, necesitamos usar JavaScript. Completamos con éxito nuestra parte de estilismo. En la siguiente parte de este video, vamos a trabajar con JavaScript. Gracias por ver este video, estén atentos para la siguiente parte. 29. Efectos de animación de CSS 3D ondulados del cargador de círculos: Vamos a ver chicos. Nuevamente, estoy vuelta con un nuevo proyecto de animación CSS. En este proyecto, vamos a crear animación de cargador de círculo web. Vamos a DC a la pantalla de mi computadora y veamos la demostración. Aquí puedes verlo crear una onda efectiva muy hermosa usando tres círculos D. Veamos cómo podemos crear esta animación. Como pueden ver, lado a lado, abro mi VSO Studio Creor y mi navegador usando la extensión Light Server, y ya creo un documento STL llamado Index Dot STL También, vinculo este documento con el archivo Tyler SSS. Entonces primero, dentro de mi etiqueta corporal, voy a tomar una etiqueta profunda, D, y así voy a establecer una clase a este cargador de clase profunda. Después dentro de la etiqueta dip, voy a tomar múltiples span. Básicamente, voy a tomar etiqueta span vacía para crear algunos círculos. Para este proyecto, voy a tomar Peptin span tag, así que voy a duplicar esta línea forte time Tenemos etiqueta de 15 span total para 15 círculos. Hemos hecho con éxito nuestra parte de estimación. 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 las calibraciones, voy a usar margin property Mrgin, cero. Entonces voy a usar la propiedad padding. Relleno cero. Entonces yo st este archivo. A continuación, voy a seleccionar la etiqueta corporal. Cuerpo tipo herbario. Después dentro del calvass, al principio, voy a usar la propiedad display Expositor de lino. Justificar centro de contenido. Nuestra siguiente propiedad es el ítem alineado. También es centro, y luego voy a decir altura mínima a nuestra página web. Para eso, voy a usar propiedad de altura media, I N altura. Altura del hombre, 100 VH. Quiero seleccionar toda la página para este proyecto. Por eso uso 100 VH. Nuestra siguiente propiedad es de fondo. Antecedentes, Para fondo, voy a usar RGV valor RGB Para el rojo, voy a escribir 70. Similar para el verde, voy a escribir también 70, 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. Y establecer las calibraciones al principio, voy a usar la propiedad de posición Relacionado con el puesto. También voy a establecer altura y peso a esta cargadora, peso, 300 pixel. Altura, 300 píxeles también. Ahora voy a usar la propiedad más importante, que es transformar el estilo. Transforma el estilo. En nuestra propiedad de estilo de transformación, voy a usar Pi tres D valor, porque quiero darle a nuestro círculo tres D. Nuestra siguiente propiedad es transformar. Transformar nuestro primer valor es prospectivo. Prospectivo, 500 pixel, O siguiente valor es rotar v rotar x, aquí voy a pasar ángulo, 60 grados. A continuación, voy a darle estilo a toda la etiqueta span dentro de la clase loader. Quiero atar espacio de punto. Voy a seleccionar todo el lapso. Luego dentro de las calibraciones, nuestra primera propiedad es la posición, la posición absoluta Nuestra siguiente propiedad es di display block. Y ahora voy a poner frontera a nuestra etiqueta span. Borde, cinco píxeles. Voy a establecer borde con cinco píxeles, y quiero borde sólido, y nuestro color de borde es blanco. Entonces para escribir AF A. Si configuro este archivo, se puede ver el resultado. Aquí puedes ver, solo para crear múltiples cajas en el mismo lugar. Por ahora, no está claro para nosotros. Nuestra siguiente propiedad es sombra de caja, sombra de caja. Voy a posicionar esta sombra, celda cero Pi, cinco píxeles y cero píxeles. Además, voy a usar un color para esta sombra de caja. Etiqueta H CCC. A proporcionar color lightr a nuestra sombra. Ahora, con ese valor, quiero usar otro valor, que es el recuadro También, quiero st sombra dentro de parte de los anillos. Por eso uso inst value. Entonces 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. Dimensionamiento de cajas, y aquí voy a usar valor de cuadro de borde. Además, 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 aún 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. Seleccionemos todas las etiquetas span una por una. Algún tipo, punto, cargador o etiqueta span, span. Colon, y ahora voy a usar el selector h child, el H child. Al principio, voy a seleccionar nuestra primera etiqueta de bolígrafo, así que tecleo una aquí. Entonces dentro del calivass, necesitamos posicionar nuestro primer pen dag Al principio, voy a usar la propiedad top, top zero. Nuestra siguiente propiedad es Lp, Lip también cero, y luego viene nuestra otra propiedad, que es fondo fondo también cero. Nuestra última propiedad de posicionamiento es correcta, correcta, también cero. W eso, voy a usar otra propiedad, que es retardo de animación. Animación, D. Por ahora, voy a dejar 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 boop, y para crear nuestro segundo círculo, voy a duplicar toda esta sección Al principio, voy a cambiar el selector, eh ch dos. Con eso, voy a cambiar valor máximo izquierdo Valu Gottma y Déjame mostrarte. Top ten, vuelta, diez, posición inferior, diez, posición derecha, diez. Si configuro este archivo, aquí se puede ver que aquí no pasa nada. No crea un círculo porque no proporcionamos ninguna unidad. Aquí necesitamos brindar unidad. Quiero proporcionar píxeles aquí, diez píxeles, diez píxeles y diez píxeles. Si configuro este fil, ahora puedes ver el resultado. Hay otro círculo dentro de este círculo. Entonces uno por uno, voy a crear este círculo. Voy a duplicar esta sección, y aquí voy a seleccionar niño tres. Además, voy a aumentar los valores de posición, 20 píxeles, 20 cerdo auto fondo y 20 cerdo sulfo Si configuro esta fille, se puede 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. Como puedes ver, completamos el proceso de creación. Si configuro este archivo, puedes ver el resultado. Se puede ver que todos estos círculos están perfectamente alineados. Aquí puedes ver, y aquí puedes ver cada vez 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, en nuestro selector 14, usamos 130. De esa manera, en nuestro selector 15, agregamos diez píxeles, y pasamos 140 ondas. Creamos con éxito nuestro círculo. Ahora tenemos que animarlo. Solo tenemos que jugar con el valor del índice Z para crear la ola. Así que vamos a crear un fotograma clave para esta animación. Yo estamos en la sección superior y aquí, voy a crear el fotograma clave a la tasa de fotograma clave Entonces tenemos que atar el nombre de Fram clave y nuestro nombre de Fram clave es animado Entonces dentro de la ss, 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 del Crass, en esa posición, quiero transformar los círculos Aquí voy a usar una transformación de propiedad. Transformar, y voy a usar traducir el valor Z. Traducir Z. Y quiero traducirlo -100 pixel en dirección z x A continuación, voy a seleccionar 50% posición, 50%. Después fijó los calibrados. Una vez más, voy a usar transform property. Transformar traducir cien píxeles. Ahora tenemos que llamar a esta animación en nuestra etiqueta span. Aquí, voy a escribir animación. O nombre de animación es animado. Y quiero ejecutar esta animación por 3 segundos. Con eso, también, quiero st flexibilizar el movimiento de animación. Por fin, voy a pasar recuento de iteraciones de animación, que es infinito Si configuro este archivo, como pueden ver, todos los círculos se mueven juntos hacia arriba y hacia abajo, porque usamos el índice Z. Aquí puedes ver, es mover 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. Aquí, al principio, voy a usar 1.4 segundos de retraso. Si configuro este archivo, como pueden ver, después de 1.4 segundos, inicia la animación para nuestro primer hijo. De igual manera, para nuestro segundo hijo, voy a pasar 1.3. Segundo. Para nuestro tercer hijo, voy a pasar 1.2 segundos. Para nuestro cuarto, voy a pasar 1.1 segundo. Para nuestro quinto hijo, voy a pasar 1 segundo. Para nuestro sexto hijo, voy a pasar 0.9 segundos. Para nuestro séptimo hijo, voy a pasar 0.8 segundos. Para nuestro octavo hijo, voy a pasar 0.7 segundos. Para nuestro noveno hijo, voy a pasar 0.6 segundos. Para diez, voy a pasar 0.5 segundos. Para nuestro hijo de 11, voy a pasar 0.4 segundos. Para nuestro th hijo, voy a pasar 0.3 segundos. Para nuestro hijo 13, voy a pasar 0.2 segundos, y para el selector de lapso 14, voy a pasar 0.1 segundos. Para nuestro último, voy a pasar retraso de cero segundos. He establecido con éxito una propiedad de retardo de evació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 parte superior infectada muy hermosa teje. Espero que ahora te quede claro, cómo podemos crear esta animación de círculo web. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 30. Efectos de desplazamiento de imágenes en capas 3D de CSS: Hola. Nuevamente, estoy de vuelta con un nuevo proyecto de animación CSS. En este proyecto, vamos a crear CSS de tres capas D imagen H, y es un buen proyecto para UI UX designer. Veamos la manifestación. Volvamos a la transmisión de la computadora. Como puede ver, hay una plantilla de interfaz de usuario móvil. Si pongo el cursor sobre él, se puede ver un efecto de capa tres D. Se puede ver este tipo de animación la mayor parte del sitio web. Crea nuestro sitio web más atractivo. Entonces veamos cómo podemos crear este proyecto. Por último, estoy en mi retor de código de Visual Studio como pueden ver, ya creo un documento STL nombre índice punto Ya vinculo un archivo CSS con nuestro documento est, style dot CSS. Como puedes ver en mi directorio de trabajo actual, hay una imagen, captura de pantalla punto PG. Déjame mostrarte la imagen. Para este ejemplo, ya tomo una captura de pantalla del archivo CS Epler Puedes elegir tu propio diseño. Depende de ti. Empecemos lo práctico, cómo podemos crear este proyecto. Al principio, voy a crear un contenedor dentro de mi etiqueta corporal. Aquí voy a atar la clase y DP es contenedor de clase. Después inserte esta clase contenedora, voy a usar em tag para insertar imagen. Imagen tipo jamón, I M G. Como puedes ver, nombre de nuestra imagen es ren shot dot JPG. Tipo jamón, captura de pantalla, JPG, y voy a conseguir esta etiqueta de imagen tres veces. Hemos hecho con éxito nuestra parte SML para este ejemplo. Ahora voy a encender mi servidor ip y ver cómo se ve. Sin estilismo, se ve así. Ahora necesitamos saltar a este archivo de estilo para crear el diseño perfecto. Ahora puedes ver lado a lado, abro mi archivo de estilo y mi navegador. Al principio, voy a empezar con body tag. Aquí voy a mecanografiar cuerpo. Después dentro de las calibraciones, voy a usar nuestra primera propiedad, que es el margen Margen cero. Nuestra siguiente propiedad es padding, padding zero. Ahora voy a usar otra propiedad, que es mié mié cien por ciento de altura, 100 VH. Y luego voy a usar la propiedad display. Flexión de pantalla. Y quiero alinear nuestro centro de artículos. Voy a usar la propiedad align item, Align items center y nuestras últimas propiedades justifican el contenido. Justificar centro de contenido. Oye, si no estás familiarizado con, Flexbox y leer, puedes revisar mi código Si configuro este archivo, como pueden ver, aquí no pasa nada. Ahora necesitamos darle estilo a la sección de contenedores. Aquí, voy a escribir contenedor contenedor punto. Después en conjunto los calibrados. Al principio, voy a usar la propiedad position, position relative, y luego quiero decir wa wa, 360 pixel. Nuestra siguiente propiedad es altura, altura, 480 píxeles. Si configuro este archivo, puedes ver el resultado. Se escala hacia abajo nuestro tamaño de contenedor poco peso, y luego quiero establecer algún margen en mi sección superior. Aquí voy a usar margin top property, margin top 150 pixel. A continuación, voy a establecer un fondo a este contenedor. Tipo Hamer fondo, Para fondo, voy a usar, RG B A. Luego dentro de los paréntesis, necesitamos pasar total Para Vue am rojo a más cero. Para Vu verde, también estoy a más cero. Por nuestro valor azul, una vez más, voy a pasar cero. Pero por nuestro valor Alfa, voy a pasar 0.1. Quiero un color de fondo transparente para este contenedor. Nuestra siguiente propiedad es transformar la propiedad. H Amy traform. Transformar, y voy a usar total seis ve. Primero, voy a usar rotar. Girar -30 grados. Con eso, quiero usar SQ y la escala servirá. SQ 25 dg. Y escala 0.8 tiempo. Si configuro este archivo, puedes ver el resultado, y ahora necesitamos posicionar la etiqueta de imagen dentro de la etiqueta contenedor. Para eso, voy a seleccionar contenedor con imagen etiqueta punto contenedor espacio imagen. Luego dentro de los alias, nuestra primera propiedad es posición, posición absoluta e imagen con 100% Si configuro este archivo y te muestro mi navegador. Ahora puedes verlo perfectamente en posición como queramos, luego llegar la parte más importante. Ahora necesitamos jugar con la opacidad y la transformación con efecto hover . Déjame mostrarte cómo. Como puede ver en mi estimable documento, tenemos total cuatro imagen Ahora necesitamos seleccionar toda la imagen una por una. Para eso, voy a usar el selector Chi. Déjame mostrarte hacer Contenedor Colon hover. Entonces espacio imagen colon eh niño niño. Yo puse las carreras abajo cuatro. Primero, selecciono cuarto hijo del grupo de imágenes. Entonces en conjunto los cálices, voy a usar transform property Transformar traducir 160 píxeles en dirección exxs y menos 160 ill en su dirección Con eso, voy a usar propiedad de opacidad. Opacidad, Uno, quiero mostrar la opacidad completa. Por eso selecciono uno. A continuación, voy a seleccionar nuestra tercera imagen. Voy a seleccionar esta línea y duplicarla. I Niño tres. También voy a cambiar transformar valor y valor de oposición. Opacidad, 0.8, y traducir para x x seis, voy a pasar de uno a 20 píxeles Para yx, también voy a pasar menos uno a 20 píxeles. Ahora una vez más, voy a seleccionar 1 segundo dm. Voy a conseguir esta línea y Hm tipo dos, n h dos. Para x xx, voy a pasar ocho t, y para xx, voy a pasar menos ocho. Hm para decir opacidad 0.6. Una vez más, voy a duplicar esta línea para seleccionar nuestra primera imagen. N chile uno. En nuestra transformación, voy a seleccionar 40 píxeles y -40 cerdo azufre y eje. Opacidad, voy a escribir 0.4. Si configuro este archivo y vuelvo a mi navegador chrome y ber mi cursor sobre esta imagen, puedes ver el efecto. Pero no hay transición en esta imagen. Ahora necesitamos establecer una transición para dar un efecto de suavidad. Una vez más, estoy de vuelta a mi codaor, y aquí voy a llamar a nuestra propiedad de transición Transición 0.5 segundos. Además, necesitamos llamar a la misma propiedad en nuestra sección de contenedores. Transición 0.5 segundos. Si configuro este archivo y vuelvo a mi navegador Chrome, si pongo el cursor sobre esta imagen, puedes ver esta transición de suavidad Espero que ahora te quede claro cómo podemos crear tres efectos de libración de imagen en capas d Gracias por ver este video, estado afinado para nuestro próximo proyecto. 31. Efectos de animación de rotación 3D CSS3: Hola chicos. Nuevamente, estoy de vuelta con un nuevo proyecto de animación de Sess En este proyecto, vamos a crear tres animaciones de rotación D. Sin perder el tiempo, veamos la demostración. En este proyecto, vamos a crear tres animaciones de rotación D. Aquí puedes ver la demostración, cómo se gira y cómo se ve. Sin perder el tiempo, estudiemos lo práctico y veamos cómo podemos crear este tipo de animación en tres D. Aquí puedes ver lado a lado, abro mi visual studio Correlator y mi navegador usando la extensión Live Server, y ya creo un archivo estim llamado index dot estim También vinculo este archivo con nuestro archivo de estilo estilo punto Sss. Entonces primero, dentro de la etiqueta body, voy a crear una D, D, y también voy a establecer una caja de clase clase. Entonces es esta etiqueta dip, voy a crear otra etiqueta dip, D, y no voy a establecer ningún nombre de clase para esta etiqueta dip. Entonces dentro de esta etiqueta dip, voy a crear un total de cuatro span tag span. Voy a duplicar esta etiqueta de pan tres veces. Ahora tenemos etiqueta total de cuatro span. Si configuro este archivo, no se puede ver nada en mi navegador. Hemos hecho con éxito nuestra parte esta. Ahora saltemos al archivo styler Sass y comencemos a diseñar nuestros elementos Primero, voy a comenzar con la etiqueta corporal. Aquí voy a escribir boding. Después pones las casas, primero, voy a usar propiedad de margen. Margen, cero. Entonces voy a usar la propiedad padding. Relleno cero. Nuestra segunda propiedad es de fondo. Fondo, y voy a decir un color de fondo. Para eso, voy a usar el valor R GV, RGB. Para el rojo, voy a usar 66. También, para el verde, voy a usar 66. 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. Ahora voy a darle estilo a esta sección de caja. Para eso, voy a seleccionar punto o clase ellos es caja. Entonces en los calibss, nuestra primera propiedad es Posición absoluta. Nuestra siguiente propiedad es top top. Quiero posicionarlo a mitad de esta página. Por eso voy a pasar el 50%, el 50%. Nuestra siguiente propiedad es t Let también 50%. Entonces voy a usar transform property. Transformar. Aquí voy a utilizar prospectiva prospectiva, prospectiva de 1,000 píxeles. Con esa perspectiva nuestros tres motel no funcionan correctamente. A continuación, voy a decir altura y ancho, Weed, 200 pixel. Después altura, altura, 300 píxeles. Además, necesitamos usar otra propiedad, que es transformar el estilo. Transformar estilo, voy a usar preserve tres D, y ahora necesitamos darle estilo a este, este profundo, que está dentro de este padre D. Aquí voy a seleccionar got box, space D. Luego dentro la calis O primera propiedad está position, position absolute, y nuestra segunda propiedad es top zero top Y también voy a usar p cero. Entonces voy a decir altura y ancho a este elemento profundo. Wight al 100%. También altura 100%. Ahora, digamos un color de fondo y veamos cómo se ralentiza. Antecedentes. Voy a usar el color blanco. Si configuro este archivo, puedes ver el resultado. Aquí puedes verlo crear una caja, pero no se alinea en medio de esta página. Ahora necesitamos alinear esta casilla, a mitad de esta página. Para eso, aquí voy a usar al valor. Déjame mostrarte. Aquí voy a teclear función al. C A L C. Luego dentro de la ronda ss. Tenemos que calcular la posición. Como puedes ver, nuestra altura es de 300 píxeles. Aquí voy a importarnos 150 pixel. Desde el 50% de la posición, mitad de la altura, que es de 150 píxeles. Del mismo modo, voy a usar función L para nuestra posición izquierda. C A LC, ajuste la prensa redonda, 50% menos. Aquí puedes ver, nuestro ancho es de 200 píxeles. Voy a -100 pixel wi. Ahora bien, si configuro este archivo, como pueden ver, ahora nuestro DV está perfectamente alineado medio de esta página. Luego volvamos a la sección profunda, y aquí voy a usar transformar la propiedad estela Transformar transformar, estilo, transformar estilo sirven tres D, y ahora necesitamos diseñar nuestra etiqueta span, que está dentro de esta etiqueta dip. Aquí, voy a seleccionar cuadro de puntos, espacio, D, lapso de espacio. Luego dentro de las calibraciones, nuestra primera propiedad es la posición, la posición absoluta Y top zero. Tarde también cero. Nuestra siguiente propiedad es display display, y él voy a usar block. Además, tenemos que establecer dentro de la altura. Nosotros al 100%. Altura cien por ciento, y luego voy a establecer fondo. Bground, para fondo, voy a usar color degradado lineal, gradiente lineal Al principio, necesitamos pasar el ángulo de gradiente, y nuestro ángulo de gradiente es de cero grados. C, y aquí, voy a proporcionar total de tres colores, O primer color es más opaco, F uno, F uno, F uno Vamos a encender el rap de barrio. Ahora se puede ver con claridad. Entonces nuestro siguiente color es tiene etiqueta BBB, es un color gris claro O tercero también va a volver a usar este color. Copia el color y pegarlo aquí. Si configuro este archivo, aquí puedes ver el color degradado. Comienza con color gris claro, luego poco d color gris, y una vez más, color gris claro. Entonces voy a decir radio de borde a este color degradado. Déjeme mostrarlo. 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 d padre. Entonces, para comentar esta línea y establecer una vez más. Ahora puedes ver el resultado. Ahora necesitamos seleccionar toda la etiqueta span una por una. Para eso voy a seleccionar. Voy a escribir punto box, space, D, space, span. Colón, h niño, h hijo uno. Entonces dentro de la ronda ss, voy a usar una transformación de nombre de propiedad. Transformar Quiero rotar nuestro primer hijo en la dirección del eje x. Aquí voy a escribir rotar x v, rotar x, y quiero girarlo cero grados, y después voy a seleccionar toda la sección y duplicarla. Ahora voy a seleccionar a nuestro segundo hijo. Quiero rotar éste en dirección s, 45 grados. Entonces voy a duplicar una vez más. Ahora voy a seleccionar tercer hijo. Y 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 decir ángulo de rotación 90 grados. También, voy a decir este expediente. Ahora voy a rotar toda la sección en la dirección de y x. 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 d, y se puede ver y se puede ver toda la parte de la etiqueta span. Y ahora necesitamos trabajar con nuestra parte final, que es la parte de animación. Aquí, voy a llamar a nuestra animación propiedad animación. O nombre de animación es animado. Y nuestro tiempo de duración de animación es de cinco segundos, y nuestra dirección de animación es lineal, y quiero ejecutar esta animación por tiempo infinito. Aquí voy a usar animación iteración count infinite. Ahora necesitamos crear el fotograma clave para esta animación. Voy a copiar el nombre de la animación. Por fin, voy a crear el fotograma clave en el fotograma clave de velocidad. Fotogramas clave, y nuestro nombre de animación es anime. Entonces dentro de lo craso, aquí voy a usar el valor porcentual a posición 0%, Son los calibrados Voy a usar transformar probidad, transformar. Transforme primero, quiero decir prospectiva, prospectiva 1,000 píxeles. Después de prospectivo, voy a st rotar x valor, rotar x cero tv. Entonces voy a dubgar esta sección, y en posición al 100%, voy a establecer rotar x 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 rotación de tres D e ion. Gracias por ver este video, estado afinado para nuestro próximo proyecto. 32. Nube lluviosa animada parte Uno: Para verlos una vez más, estoy de vuelta con un nuevo proyecto de animación de Sess En este proyecto, vamos a crear Nube lluviosa. Es un proyecto de animación de tesis muy avanzado porque vamos a usar Variable share. 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 Rendomly puedes notar gotas de lluvia. Sin perder el tiempo, veamos cómo podemos crear este proyecto. Como pueden ver, lado a lado, abro mi editor de código Visa Studio y mi bowser usando la extensión life Server, y ya creo archivo Index dot ESTEML. También creo archivo estilo doot Sess. Como puede ver, vinculamos nuestro archivo de estilo con este documento de ESTEML Como saben, necesitamos comenzar con la estructura de las ESTs. Al principio, voy a crear un contenedor, que va a contener Cloud y R. Voy a crear un contenedor de clase, punto D. Como puedes ver, creamos un contenedor de nombre de clase. Entonces dentro de este contenedor profundo, voy a crear Cloud. Aquí, voy a crear otro trato. De punto Clou voy a configurar este archivo. Ahora voy a saltar a la sección de estilo, estilo punto archivo CSS. Al principio, voy a seleccionar la página del documento usando Universal select Firme type star. Después configuro los Cales, primero, voy a usar la propiedad margin. Margen, cero. Con eso, también, voy a usar padding. Relleno, también cero. Entonces voy a usar la propiedad de dimensionamiento de cajas. Dimensionamiento de cajas, y aquí voy a usar Bodi box V. Por caídas, no hay vuelta de fusión en este documento Ahora voy a darle estilo a nuestra etiqueta corporal. Aquí voy a teclear cuerpo. Entonces en cambio los alias, al principio, voy a usar display property display. Flexión de pantalla. A continuación, voy a utilizar justificar el contenido. Justificar centro de contenido. Además, necesitamos usar otra propiedad, alinear elementos. Alinee los artículos en el centro. Si no estás familiarizado con flex box y avaricia, entonces puedes revisar mi curso Entonces voy a decir altura mínima a esta página. Entonces, para escribir altura media, altura media hund VH Nuestra siguiente propiedad es fondo, fondo, y voy a decir color de fondo. Voy a decir algo de color gris oscuro. Gris oscuro. Quiero algo de color más oscuro, selecciono este color, éste, y voy a decir este archivo. Este color es bueno para nuestro ejemplo, y puedes elegir tu propio color. Ahora necesitamos darle estilo a la sección de contenedores. Copio este nombre de clase de contenedor, y aquí, voy a escribir contenedor de punto. Entonces dentro de la posición cis o primeras propiedades posicionar realmente. Además, voy a decir altura a este contenedor. Altura, algo por debajo del píxel. Y voy a decir de este lado. Ahora necesitamos diseñar la porción de nube. Entonces para copiar la nube de nombre de clase, y luego un contenedor, soy nube de puntos de pizarra. Entonces dentro de los alias, nuestra primera propiedad es la posición, la posición relativa También, lo voy a decir dentro de altura a esta nube. Necesitamos 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 hexa D H tag FF eight. Si configuro este archivo, como pueden ver, crea un rectángulo, y necesitamos darle forma redonda. Por eso voy a usar la propiedad de radio fronterizo. borde, radio de borde, 100 píxeles. Vamos a poner el pal y C. Además, voy a posicionarlo desde arriba. Aquí voy a usar la propiedad superior. Top 50 píxeles. Voy a establecer este, y para darle forma de nube, necesitamos usar el selector posto Aquí voy a crear un post selector para la nube. Nube D Colon colon. Entonces dentro de los jarrones, voy a crear soso contener contener soso Básicamente, voy a crear una copia de esta nube. Una siguiente propiedad es posición, posición, y esta vez, voy a usar obsoleto, obsoleto. A continuación, quiero trasladar esta nueva nube a esta posición. Para eso, necesitamos usar la propiedad. Top -50 píxeles. Entonces voy a decir con y altura a esta nube. W 110 píxeles. También voy a decir altura, altura, así que 110 pixel. Y luego voy a decir color de fondo. Fondo, y para el color de fondo, voy a decir también blanco. Voy a establecer este archivo. Ahora tenemos que darle forma redonda. Para eso, necesitamos usar radio fronterizo. Radio de borde 50%. Voy a st esta. Para colocarlo en medio, necesitamos mover este círculo del lado izquierdo. Aquí voy a usar lift property lap lap 40 pixel. Si configuro este archivo, puedes 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 g cero, y de izquierda, voy a g 30 pixel. Por fin, voy a darle color sólido a esta sombra de caja. El tipo H tiene etiqueta, color blanco, FF. Si configuro este tiempo, se puede ver el resultado. Como puedes ver, creamos una forma de nube perfecta usando una antesis sml En la siguiente parte de este proyecto, vamos a crear en. Gracias por ver este video, nos vemos en la siguiente parte. 33. Nube lluviosa animada, parte Dos: Qué verles 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. Sin perder el tiempo, empecemos. Al principio, voy a crear una etiqueta profunda, que va a contener gotas de lluvia. de.in. Como puedes ver, creamos un elemento profundo con clase lluvia. Entonces dentro de este elemento profundo, voy a crear una etiqueta de span múltiple para nuestras gotas de lluvia. Aquí, dentro de esta etiqueta profunda, voy a crear pan tag. 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. Para borrar una variable Sess, necesitamos usar das sine. Déjame mostrarte cómo. D y nuestra variable yo es I. Entonces entonces necesitamos usar colon. Entonces necesitamos usar col para establecer nuestra variable. Después de dos puntos necesitamos aportar el valor. F valor, él voy a escribir un número aleatorio, algo 11. Total, voy a usar 20 gotas de lluvia, pero puedes usar tanto como quieras. Quiero duplicar esta línea. Aquí voy a pasar. De nuevo, voy a duplicar esta línea. Aquí voy a pasar t. Puedes usar número aleatorio, cualquier número aleatorio. Se trata de un pre. Lo duplican una vez más. Aquí, voy a usar 14. Entonces otra vez, voy a usar 18. Vamos a prote esta sección para ahorrarte tiempo. Y luego voy a duplicar de nuevo esta sección de trabajo. Yo creo 20 gotas de lluvia usando etiqueta span. Si configuro este archivo, como pueden ver , nada está teniendo aquí. Ahora necesitamos darle estilo a las gotas de lluvia en nuestro archivo Sess. Quiero copiar el nombre de la clase en, y en nuestro archivo de estilo, voy a seleccionar esta clase, do. 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 la gota de lluvia. Para eso, necesitamos seleccionar la etiqueta rain and span. Para eso, necesitamos seleccionar span tag.in, space, span. Luego dentro del calvass, O primeras propiedades posicionar la posición relativa Nuestra siguiente propiedad es i wit altura, celda de diez picos. También pesan diez celdas pico. Ahora voy a decir color dground a nuestras gotas de lluvia. Aquí voy a usar la propiedad dground, background. L et's fijaron el expediente y vean qué pasó. Si configuro el archivo, como pueden ver, se veía como una línea de estado. Pero estas son las 20 gotas de lluvia. Vamos a tener un poco de acolchado a nuestra lluvia. Aquí voy a usar la propiedad padding, padding. Primero, para top end bottom, voy a usar cero, y para Leptina derecha, voy a usar 20 píxeles Si configuro este archivo, puedes ver el resultado. Entonces necesitamos *** margen entre gotas de lluvia. Para eso, necesitamos usar la propiedad de margen. Margen. Para arriba e abajo, voy a usar cero F etin w derecho, voy a usar dos píxeles Ahora puedes ver que nuestros puntos corridos están perfectamente organizados. Ahora necesitamos gp los puntos de lluvia de forma redonda o eso, necesitamos usar la propiedad border radius. Aquí, voy a teclear radio fronterizo. Radio de borde 50%. Vamos a guardar el archivo, y podrás ver el resultado. Ahora se tiende a crear la animación. Voy a usar la propiedad de animación, animación, y nuestro nombre de animación es animado. Y nuestra duración de anación es de cinco segundos. Además, la dirección es lineal. Por fin, necesitamos proporcionar recuento de iteraciones de anuación, que es infinito Porque quiero seguir nuestras tarifas de tiempo infinito. Ahora, agreguemos el fotograma a esta animación. Así que escribe a la velocidad los fotogramas clave, y nuestra anación es animada Después dentro de los alias. Primero, en la posición del 0%. Voy a usar transform property, transform, y quiero mover estos puntos rojos hacia abajo. Por eso necesitamos usar translate Y. Translate y. quiero comenzar nuestra animación de punto rojo desde la posición 0%. Por eso paso cero. De igual manera, voy a duplicar esta línea y en la posición del 70%, quiero moverla hacia abajo 300 píxeles. Por eso voy a pasar 300. También en la posición del 100%, quiero usar 300 píxeles. Vamos a configurar el archivo y ver, es correcto o no. Como puedes ver, la animación funciona perfectamente, y con la propiedad de traducirla, quiero usar escala escala a 0% posición, quiero escalarla una vez. Entonces en la posición del 70%, quiero escalarlo una vez más. Pero en posición al 100%, quiero escalarlo zo. 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 transform origin, y voy a usar bottom, luego venir 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 al azar. Si recuerdas, como puedes ver en mi archivo STL, creamos nuestra etiqueta span con variable y nuestro límite de variación es I, y establecemos un valor aleatorio a esta variable, 161112, etcétera Voy a usar este valor aleatorio para crear un anillo real. Volvamos al archivo CSS, y aquí, voy a usar la propiedad de duración de la animación. Duración de la animación. Además, voy a usar la función Kal, que es una función de CSS, quiero dividir 15 segundos, e o variable I. Aquí voy a escribir donde entonces dentro de la ronda ss, nuestro mismo nombre es I, y para enfriar muy bien, necesitamos usar da da. Entonces I. Si configuro este archivo, nuestras gotas de lluvia caen al azar Me veo muy bonita. Y ahora se ve como gotas de lluvia reales. Solo tenemos que cambiar el color de las gotas de lluvia, y voy a usar el color blanco para eso Si configuro este archivo, ahora puedes ver que funcionó perfectamente. Nuestro proyecto está casi pescada. Necesitamos crear el terreno para crear una porción de tierra en ese lugar, necesitamos usar la propiedad del fondo de la frontera. Tenemos que encontrar el contenedor Aquí, voy a teclear border bottom. Y voy a usar borde de dos píxeles. También quiero color sólido para nuestro borde, sólido, nuestro color de borde es blanco, es. Si configuro este archivo, puedes ver el resultado. Además, necesito quitar las gotas de lluvia del fondo. Aquí voy a escribir bottom ten pixel. He probado 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, estado afinado para nuestro próximo proyecto. 34. Animación de carga de CSS: bueno verlos de vuelta chicos, una vez más, estoy de vuelta con un nuevo proyecto de animación. Como puedes ver en esta animación, cómo funciona la animación de carga. Sin perder el tiempo, veamos cómo podemos crearlo. Como se puede ver, lado a lado, abro mi visor Studio editor de código y mi navegador usando la extensión del servidor Lx, y ya creé STL nombre del documento índice punto STL Con eso, también creas o estilizas archivo Sass. Entonces primero, dentro de la etiqueta body, voy a crear la etiqueta H dos, H dos. Dentro de la etiqueta S dos, voy a escribir blod. El punto n. Pero en mi etiqueta H dos, voy a usar datos en. Datos de tipo Hm. Texto de datos. Entonces igual a dentro del doble cos, voy a pasar el mismo texto, cargando. Copia el texto y pégalo dentro de los códigos dobles. Si configuro esta página, puedes ver el texto en mi navegador. Esta es nuestra parte estable. Ahora tenemos que saltar al archivo o Sess Al principio, voy a importar un formulario. Déjame mostrarte. Aquí vemos importo popping scorm, y la fuente es 700 Es una forma negrita, y ahora voy a seleccionar selector universal. Estrella en cambio el Cass o primera propiedad es margen. Margen, cero o segunda propiedad es padding. Relleno también z. o tercera propiedad es el tamaño de la caja, tamaño de Bob, y cómo voy a usar la caja de borde. Y entonces voy a usar la propiedad familiar cariñosa. Familia tipográfica, familia Fon, y aquí voy a usar Poppins Esta fuente es de Sensory fame. Soto coma, voy a escribir Sensorial. 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 tyle nuestra sección de cuerpo. Él para usar cuerpo. Cuerpo dentro de las Cs se muestra nuestra primera propiedad, y voy a usar escama. Quiero colocar este texto en medio del discurso. Por eso voy a usar escama. Entonces nuestra siguiente propiedad es justificar el contenido. Justificar contener centro. También, voy a alinear este ítem. Alinear el centro del artículo. Si configuro este archivo, se puede ver la res, y luego voy a decir altura mínima. Hm tipo altura mínima, altura mínima cien VH. Con eso, también, quiero decir antecedentes. Para fondo, voy a usar RGV color, RGP. También puedes usar cualquier color más oscuro. Pero aquí voy a usar algo de peso 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. Es una p, y después siguiente, voy a darle estilo a este tipo H dos. Aquí, voy a empatar H dos. Después pongo las calibraciones, voy a escribir posición Posición relativa, O siguiente propiedad es tamaño de fuente. Tamaño de fuente. 14 V. Si configuro este archivo, puede ver el resultado. Ahora se ve perfecto. Y ahora voy a configurar el color del teléfono. H Voy a atar color, y voy a usar el mismo color RGV Copo el valor, y lo voy a pegar aquí. Voy a establecer este archivo. Ahora puedes ver que coincide con el color de fondo. Por eso no se puede ver el color. Nuestra siguiente propiedad es tomar. Para eso, de nuevo, voy a usar el color RGV. Pero esta vez, voy a cambiar el, y nuestro valor es 2108 y para el azul, voy a usar 146 Si configuro este archivo, aún no se puede ver este trazo porque no hacemos st trazo. Por eso voy a pasar 0.3. V. Si configuro este archivo, ahora puedes ver el motivo. Además, se puede aumentar el trazo. Es una PU, y ahora necesitamos replicar la forma usando la selección de postura Para eso, voy a escribir H dos colon colon cuatro. Luego dentro de los calibrados o primer contenido de propiedades. Y aquí voy a usar la función Nutria. Ahora tenemos que pasar este atributo, data text. Copo este atributo 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 top top zero. Dejemos también a cero. También, voy a decir, Por ahora, voy a pasar 30 pixel. Si configuro este archivo, no se puede decir nada porque no establecemos ningún color y altura a este elemento. Para eso, voy a usar propiedad de altura. Altura 100%. También voy a usar el color. Color, aquí, voy a usar un vdu hexadecimal, tiene etiqueta 01f 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 text trasf property. Pero antes voy a usar punto y coma. Entonces voy a escribir Tex transform. Texto trasfm mayúsculas. Y luego también para establecer trazo a este slo. Aquí, voy a usar esta propiedad y valor, y después del color, voy a pasarlo. Pero esta vez, voy a cambiar la rueda. Aquí voy a pasar cero VH h. trazo con cero V. Si configuro este archivo, puedes ver el resultado. Si puedes notar puedes ver, no hay trazo en este slo Nuestra siguiente propiedad es desbordamiento, desbordamiento calentado. Establece este archivo, ahora podrás ver el resultado. Como pueden ver, nuestro ocho es cero y Olow z. Por eso, no se puede ver el texto Pero si aumento el valor de ocho, déjame mostrarte 40 pi cell, y luego establecer este archivo, puedes ver el resultado. Como puedes ver lento, llena el texto con el color. De igual manera, si aumento el valor, 90 pick cell y luego configuro este archivo, también se puede ver el resultado. En la animación, necesitamos jugar con esta propiedad. Por ahora, voy a hacer el cero, y luego establecer este archivo. A continuación, voy a usar otra propiedad, que es frontera. Escritura fronteriza. Borde derecho, y voy a usar borde sólido de dos píxeles, sólido. Además, voy a usar un color Hodsimal. 01f e87. 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, es como esta línea rellena el color a este texto. De nuevo, aquí 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 animado. Quiero ejecutar esta animación durante 6 segundos, y nuestra dirección de animación es lineal. Quiero ejecutar esta animación por tiempo infinito. Aquí voy a usar infinito. Ahora necesitamos crear el marco clave. Tipo H en los fotogramas clave de velocidad. Fotogramas clave y nuestro nombre de animación es animado. Como pueden ver, tecleo ortografía incorrecta para animar. Por eso voy a corregirlo. Y voy a escribir el nombre animate. Después dentro del Calass en posición 0%. Nuevamente, dentro de los casos, me puse moto w, w cero, y voy a temas de esta sección. Ahora, en la posición del 70%, soy moto set w cien por ciento. Si configuro este archivo, puedes ver la animación. Cómo es el trabajo. Funcionó perfectamente. Si juego con algún valor porcentual con 0%, voy a pasar el 10% También con el 10%, voy a pasar el 100%. En 0% posición, 10% posición, y 100% posición, quiero stoke cero Pero en 70% posición y 90% posición de esta animación, quiero la semana al 100%. Si configuro este archivo, ahora es perfecto. Cómo es sw. Esto es exactamente lo que queremos. Gracias por ver este video, estén atentos para nuestro próximo proyecto.