Animaciones creativas de CSS y JavaScript: ¡la guía completa con 150 proyectos!

1. Animaciones creativas avanzadas en CSS y Javascript - 140 proyectos: ¿Estás buscando un curso que te lleve desde un principiante completo hasta construir hermosas avanzadas animaciones CSS y Javascript para tus sitios web, o has tomado otros cursos de CSS, pero aún así quieres mejorar tus habilidades CSS y llevarlas al siguiente nivel dominando las animaciones CSS y Javascript Si es así, entonces has venido al lugar correcto. Yo soy y este es el curso de animaciones CSS y Javascript más vendido. En mi, en este curso dominarás animaciones CSS y Javascript, transiciones y transformaciones, e incluso la propiedad CSS clip path, todo mientras codificas 140 animaciones creativas y efectos paso a paso completamente desde cero. Y a medida que construyas cada uno de estos ejemplos, aprenderás nuevas ideas y obtendrás inspiración para ayudarte a crear animaciones avanzadas y convertirte en un desarrollador web mejor y más seguro. Entonces, ¿qué hay en este curso? Bueno, comenzaremos por mirar la propiedad de transición CSS y sus diferentes funciones, y veremos cómo puede dar vida a tus elementos HTML. Después pasaremos a las transformaciones CSS, que abren las puertas a muchas opciones creativas. Mover elementos HTML alrededor de la página para escalarlos, girarlos y obligarlos Allí dominaremos todas las funciones de transformación que podemos usar en dos entornos D y tres D. Entonces llegamos a la parte divertida. Usaremos todo lo que aprendimos sobre CSS, transformaciones y transiciones para elaborar algunos ejemplos creativos que te inspirarán y te ayudarán a aprovechar al máximo lo que has aprendido. Comenzaremos creando muchos efectos de botón diferentes, luego probaremos efectos de imagen, efectos de menú, luego efectos de tarjeta e incluso algunas otras transformaciones geniales, ejemplos como texto y efectos de redes sociales. Luego pasaremos a dominar CSS, animaciones y fotogramas clave Aprenderemos todo sobre ellos, todas sus diferentes propiedades que facilitan la creación de animaciones web creativas y avanzadas. En la siguiente sección, estaremos creando más de 40 proyectos de animación creativa utilizando diferentes técnicas. Estoy seguro de que estos ejemplos te sorprenderán y pondrán en marcha tu imaginación mostrándote cuántas cosas increíbles se pueden hacer usando las habilidades que has aprendido Después de eso, aprenderemos sobre la propiedad de ruta de clip CSS, que nos permite crear efectos de gran apariencia y abre la puerta a ideas aún más creativas. Aprenderemos cómo podemos usarlo para crear algunos proyectos diferentes muy geniales. Ahora en su recorrido por este curso, muchos de mis alumnos me pidieron que subiera una nueva sección con algunos efectos Javascript. Entonces, a tu solicitud, ahora puedes consultar esta sección al final del curso, donde llevaremos nuestras habilidades a la siguiente etapa y aprovecharemos el poder de Javascript para crear algunos efectos avanzados geniales que son imposibles de crear usando solo CSS. Para tener una idea general de los proyectos que vamos a crear a lo largo del curso, les exhorto a que revisen la primera conferencia de cada sección. Ahí he incluido una vista previa de todos los efectos que vamos a crear. Creo que se puede ver que este curso está repleto de contenido. Viene con 18 horas de video descargable y todos los recursos de codificación para los proyectos en los que trabajaremos a lo largo del curso Ten en cuenta cuando se subió por primera vez. Este curso es de sólo media hora de duración. Entonces ya sabes, siempre estoy tratando de agregar contenido nuevo con diferentes ideas para ayudarte a mantenerte al día con las nuevas técnicas actuales de CSS y Javascript para crear todos los efectos geniales que ves por ahí. Si quieres avanzar en tus habilidades CSS y Javascript, este curso realmente es perfecto para ti. Más de 19,000 estudiantes ya se inscribieron y dejaron cientos de críticas de cinco estrellas Seguro que disfrutarás del curso tanto como ellos. No esperes y te preguntes. Acompáñanos en el curso hoy y te veré por dentro. 2. 2: qué son las transiciones CSS: Hola a todos. Bienvenido a esta lección donde estaremos hablando de transiciones CSS. Entonces, en primer lugar, ¿cuál es la propiedad de transición CSS? ¿ Y qué puede hacer por nosotros? Bueno, la transición como una propiedad CSS aplicada a un elemento específico para hacer que otras propiedades de este elemento específico cambien suavemente a lo largo de una duración determinada. O animado de una manera agradable cuando se cierne sobre, o por otro ejemplo, enfocándose en ese elemento. Veamos un ejemplo de lo que quiero decir aquí en mi HTML. Se puede ver aquí mismo tengo un botón sencillo. Y aquí en mi CSS, he agregado algunos estilos al botón. Se puede ver que acabo de cambiar la altura, el ancho, y el tamaño de la fuente para hacerlo más grande. Cambia el color del texto a blanco y quita el borde, luego agrega un color de fondo azul. Y puedes ver en el navegador aquí como nuestro botón. Ahora, agreguemos una nueva declaración CSS. Entonces iré aquí mismo y diré botón en el hover. Es decir, cuando muevo mi cursor sobre el botón, quiero cambiar el color de fondo a verde. Ahora si voy y paso el cursor sobre mi botón, se puede ver el color de fondo azul cambia a verde. Y cuando alejo el ratón, el color de fondo vuelve al azul. Pero habrás notado que este cambio de azul a verde, Está sucediendo tan rápido. Parece un interruptor de encendido y apagado. Se siente bastante mecánico. Creo que se verá mucho mejor si este cambio ocurre más suavemente. Y eso es exactamente lo que la transición CSS puede hacer por nosotros. Por lo que dijimos que la transición hace que el cambio de las propiedades CSS se produzca sin problemas durante un periodo de tiempo específico. Para definir una transición, necesitamos usar al menos dos cosas. El primero es la propiedad CSS que cambiará del estado inicial al estado final. El segundo es la duración, lo que significa que la cantidad de tiempo que este cambio tardará en completarse tiene sentido, ¿verdad? Entonces para hacer eso, necesitamos declarar a las propiedades CSS. El primero se llama la propiedad de transición, que es la propiedad a la que desea aplicar la transición o hacer el cambio sin problemas son muy bien. En este caso es el color de fondo. Y el segundo es una duración de transición, que es el lapso de tiempo que el inmueble tomará para cambiar del estado inicial al final. Digamos 1 segundo. Y ahora cuando voy y paso el cursor sobre el botón, puede ver que el cambio ocurre sin problemas de una manera agradable y es mucho mejor que antes de que se aplicara la transición. Y cuando me muevo, el color de fondo vuelve al azul muy bien. Ahora, la propiedad de duración de transición Conectar Establecer milisegundos así como segundos. Por ejemplo, puedo cambiar este 1 segundo a, digamos, 3000 milisegundos, que en realidad son tres segundos. Entonces cuando vuelvo a pasar el cursor sobre el botón, la cadena debería ocurrir en una duración más larga. 3. 3: opciones de transición CSS: Hola a todos. En esta lección seguiremos hablando de la propiedad de transición y de las otras opciones con las que podemos lidiar al usarla en nuestros elementos HTML. Ahora, además de la propiedad de transición y la duración de transición de la que hablamos en la última lección. Y recuerda dijimos que son necesarias para que la transición trabaje en los elementos. También tenemos dos propiedades adicionales que podemos utilizar para tomar un mayor control de nuestra transición. Y esos son la función de cronometraje de transición y el retraso de transición. En primer lugar, la función de sincronización de transición simplemente se refiere a cómo se producirá el cambio en la propiedad. Por ejemplo, ¿el color de fondo empezará a cambiar lentamente al inicio de la duración de la transición y luego más rápido al final? ¿ O cambiará al mismo ritmo durante todo el periodo de transición? Esas preguntas pueden ser respondidas por la función de cronometraje de transición. Ahora la función de sincronización de transición tiene cinco valores diferentes que podemos usar. En primer lugar, la facilidad, que se aplica por defecto, si no usas la función de sincronización de transición, lo que hace es hacer que la cadena empiece lento, luego ir más rápido en el medio, y luego disminuir un poco antes del final. Segundo lineal en el que el cambio se producirá a la misma velocidad desde el principio hasta el final durante toda la duración de la transición. Tercero es n, en el que el cambio comienza con lentitud y luego se acelera antes del final. En adelante. Facilidad de salida, que a diferencia de la facilidad de entrada, comienza rápido y luego se ralentiza al final. Y por último, facilidad de entrada, salida en la que el cambio comienza lento, luego se acelera en el medio, luego terminar lento. Es algo así como facilidad. No hay tanta diferencia entre ellos. Genial. Entonces veamos los en acción. Tengo cinco valores de función de temporización de transición aquí en mi navegador, y tengo una demo para cada uno de ellos. Ahora, la propiedad que cambiará aquí es la posición del div. Entonces cuando pase el cursor sobre cualquiera de ellos, se moverá una distancia específica horizontalmente y luego regresará a su ubicación original cuando pase el cursor, así. Ahora, antes de ver los diferentes valores, Echemos un vistazo a ellos en el editor de código y veamos cómo creamos este movimiento horizontal. Entonces aquí en mi HTML, tengo un div con una clase de contenedor. Entonces dentro de ella, tengo cinco divs hijos, todos ellos teniendo con movimiento de clase que está usando un CSS para agregar los estilos generales para todos los divs. Y cada uno de ellos tiene un ID específico para que podamos cambiar la función de temporización de transición de acuerdo a ese ID. Por lo que puedes ver el primero tiene una identificación de facilidad. Su función de sincronización de transición será 0s. El segundo es lineal. Después facilidad de entrada, facilidad de salida y facilidad de entrada. Y cuando vamos a nuestro CSS, aquí hemos seleccionado la clase Move y añadido algunos estilos genéricos para que los videos se vean mejor. Al igual que algunos márgenes con altura, relleno y demás. Y aquí en la última línea, declaramos la propiedad de transición, que es el traductor que se encarga de cambiar la ubicación de los dibs de izquierda a derecha sobre nuestra duración de transición de tres segundos. Entonces si miramos aquí al final del archivo CSS, se puede ver que estamos apuntando a todos los divs. Y cuando pasemos sobre ellos, ellos traducirán, o en otras palabras, su ubicación en la página cambiará. Se moverán 900 píxeles en el eje x u horizontalmente y 0 verticalmente. Esta es una propiedad transformada de la que aprenderemos más adelante en el curso. Pero quiero que sepan que esto sólo cambiará la ubicación de los div 900 píxeles a la derecha. Cuando pasamos por encima de él. Por encima de eso, he dirigido a cada div con su ID único y he añadido los cinco valores diferentes de la función de sincronización de transición. Entonces aquí he añadido facilidad para el primero, lineal para el segundo, y luego facilidad de entrada, facilidad de salida y facilidad de entrada, salida. Entonces para envolver las cosas, lo que estamos haciendo aquí es simple. Acabamos de decir al navegador, cuando pase el cursor sobre cualquier div, quiero que se mueva 900 píxeles a la derecha. Y quiero que este cambio o este movimiento ocurra sin problemas a lo largo de tres segundos. Y quiero que cada div se mueva de manera diferente. Por lo que el primero se moverá de manera diferente al segundo, que se moverá de manera diferente al tercero, y así sucesivamente. Ahora, está bien, volvamos al navegador. Y cuando paso el cursor sobre 0s, que es el predeterminado, puedes ver que empieza lento, luego se vuelve más rápido cuando regresa a ralentizar antes del final. Y cuando me aleje, también volverá lento, luego rápido, luego lento. Pero para lineal, si me muevo, ve que va a la misma velocidad durante todo el tiempo de duración. Se mueve a la misma velocidad durante todos los tres segundos. Y facilidad en. Lento al principio, luego más rápido al final. Y cuando me alejo, regresa lento. Entonces más rápido otra vez al final. Relájate rápido al principio, luego despacio al final. Y cuando me alejo, regresa rápido. Y luego despacio otra vez al final. Facilidad de entrada y salida, Comienza lento, luego se mueve más rápido en el medio, luego despacio de nuevo al final. Muy bien, ahora, la segunda propiedad de la que hablaremos en esta lección se llama el retraso de transición. Y simplemente representa el tiempo que la transición espera antes de que comience. Acepta valores de tiempo en segundos o milisegundos. Ahora, aquí en nuestro HTML, tenemos el botón de la primera lección. Creo que recuerdas que cuando pasemos el cursor sobre ese botón, el color de fondo cambiará de azul a verde, así. Ahora volvamos a nuestro CSS. Iré justo aquí debajo de la propiedad de duración de transición. Y añadiré retardo de transmisión dos segundos. Y ahora cuando pase el cursor sobre el botón, debería esperar dos segundos antes de que comience el cambio en los colores de fondo. Y esa es simplemente la propiedad de retraso de transición. 4. 4: diferentes formas de escribir la propiedad de transición: Hola a todos. En esta lección seguiremos hablando de las diversas opciones de transición que tenemos. Entonces en las lecciones anteriores, aprendimos que la transición hace que el cambio en una propiedad CSS específica se produzca sin problemas sobre un valor de tiempo específico. Pero, ¿podemos usar la transición en más de una propiedad, decir, ¿podemos hacer más de un cambio de propiedad sin problemas? Bueno, la respuesta es sí. Aquí en mi CSS, iré aquí mismo y le agregaré color. Negro. Entonces cuando pase el cursor sobre el botón, quiero que el color de fondo cambie de azul a verde, y que el color del texto cambie de blanco a negro. Ahora, veamos esto en el navegador. Pasa el cursor sobre el botón y verás que el color del texto cambia rápido sin transición. Entonces, ¿cómo podemos aplicarle la transición? Es tan fácil. Volver a nuestro CSS. Iré aquí mismo y le agregaré un espacio. Entonces otra propiedad de transición, que es el color por supuesto. Y ahora cuando vuelva al navegador y pase el cursor sobre el botón, se puede ver que el color del texto cambia sin problemas junto con el color de fondo. Y realmente podemos extender esto, significado. Podemos cambiar tantas propiedades como queramos. Entonces, por ejemplo, vamos a nuestro CSS. Y también quiero cambiar el ancho del botón a, digamos, 600 píxeles cuando pase el cursor sobre él. Y subiré aquí y agregaré espacio que ancho para que cambie sin problemas. Y cuando voy al navegador y paso el cursor sobre el botón, se puede ver que todo está cambiando bien juntos. Y en caso de que necesites cambiar muchas propiedades, digamos cinco o seis. Y piensas que será difícil escribirlos todos aquí. Simplemente puedes eliminarlos y agregar la palabra clave all. Al hacer esto, todas las propiedades se incluirán en la transición. Entonces veamos eso. No se puede ver nada cambia. Genial. Ahora hemos aprendido todas las propiedades de transiciones CSS con las que podemos trabajar. Pero hay una propiedad abreviada que podemos usar para mezclarlos todos en una sola línea, y solo se llama transición. Por lo que voy a quitar estas dos líneas y voy a añadir transición. Entonces la propiedad de transición justo aquí. Sólo transitaré el fondo. Después un espacio y la duración de transición de tres segundos. Esos son suficientes para que ocurra la transición. Pero si quieres agregar las otras propiedades, entonces agrega otro espacio y agrega la función de temporización de transición. Digamos facilidad en otro espacio y el retraso de transición al final, digamos solo 1 segundo. Y cuando vemos eso en el navegador, puede ver cuando pase el cursor sobre el botón, esperará 1 segundo. Inicia el cambio en el fondo de color a lo largo de tres segundos. Y de nuevo, podemos elegir más de una propiedad. Para agregar más de una propiedad. En este método corto, utilizamos una coma para separar las diversas propiedades. Entonces iré aquí mismo y añadiré una coma. Entonces añadiré la otra propiedad que quiero cambiar, que es el color. Entonces la duración de transición, digamos dos segundos esta vez. Y luego la función de sincronización de transición, digamos facilidad. Y por último, la duración de la transición. Ahora queremos hacer algo fresco aquí. Queremos que el cambio en el color del texto comience después del cambio en los acabados de color de fondo. Por lo que debemos agregar una duración de transición de cuatro segundos, tres para la propia transición de fondo, y uno para su retraso. Por lo que de vuelta al navegador. Pondré el cursor sobre el botón y verás que cambia el color de fondo. Y después de eso, el color del texto comienza a cambiar. Y por supuesto, podemos agregar otras propiedades. Entonces volveré a nuestro CSS e iré aquí mismo, quitaré este nuevo ancho y añadiré una nueva propiedad, digamos border-radius, 50 por ciento. Por lo que el radio fronterizo cambiará también. Y luego subiré aquí e incluiré esto en la transición y añadiré una duración de transición de cuatro segundos, luego me aligeraré para la función de temporización de transición, y luego seis segundos para la duración de la transición. Por lo que comenzará después de que terminen las dos primeras propiedades. Entonces cuando regrese al navegador y pase el cursor sobre el botón, se puede ver el fondo cambiará cuando el color del texto, y finalmente, el borde radio. Y por supuesto, podemos usar la palabra clave all si solo queremos animar todas las propiedades juntas, eliminaré todo esto y solo digo, oh, entonces la duración de transición de tres segundos y luego la facilidad en. Y por último, el retraso de transición de dos segundos. Y cuando vemos eso en el navegador, se puede ver que todas las propiedades están cambiando entre sí. Pero te diste cuenta ahora que no podemos controlar el retraso de transmisión como pudimos en el método anterior, porque ahora todas las propiedades están empezando y terminando juntas. Entonces eso es todo para esta lección, y te veré en la siguiente. 5. 5: qué propiedades pueden transitarse: Hola a todos. En las lecciones anteriores, aprendimos qué es una transición, cómo funciona en todas las opciones disponibles y sintaxis que podemos usar en una transición. Si recuerdas, dijimos que la transición enemigos el cambio en las propiedades CSS a lo largo de una duración específica. Pero no todas las propiedades CSS se pueden usar con transiciones porque el cambio en estas propiedades no ocurre gradualmente. Se trata de cambios de un estado a otro sin ningún valor intermedio. Propiedades que no son animables. A nuestros les gusta la imagen de fondo, porque no puede cambiar gradualmente de una imagen a otra. Display también no es una propiedad animable. Y hay muchos más como estilo de borde, posición, flotador, fondo, repetición, font-family, y así sucesivamente. Por otro lado, las propiedades animables son aquellas que se pueden expresar por números. Porque el navegador puede calcular o interpelar valores intermedios, como ancho, alto, ancho del borde, relleno, margen, altura de línea, opacidad. Tú idea Gabby. También podemos animar las propiedades que se expresan por colores, como el color y el color de fondo. Y si quieres un recurso para encontrar todas las propiedades animables, el sitio desarrollador dot mozilla.org tiene una lista de todas ellas. Por lo que solo puedes ir a Google y escribir qué propiedades CSS se pueden transicionar. Y luego haga clic en el sitio de Mozilla. Y te llevará a esta lista donde tienes todas las propiedades animables. Ahora para que veas estas propiedades animables en acción, he creado esta página la cual contiene algunas de ellas. Por ejemplo, si paso el cursor sobre este div, opacidad transitará así. Por lo que puedes descargar este archivo de los recursos y cuenta con estas propiedades para ver cómo se ven mientras se transitan. 6. 6: CSS 2D transforma: Hola a todos y bienvenidos a esta nueva sección del curso donde estaremos aprendiendo sobre las transformaciones 2D. Entonces, ¿qué transforma nuestro CSS y qué pueden hacer por nosotros? Bueno, en el último capítulo, aprendimos sobre las transiciones CSS, lo que nos permitió lidiar con las propiedades CSS aplicadas a elementos específicos y hacer que esas propiedades cambiaran sin problemas durante un periodo de tiempo específico. En este capítulo, no estaremos aprendiendo a controlar las propiedades aplicadas a los elementos, sino que controlaremos los elementos mismos, como divs e imágenes, etcétera. En otras palabras, aprenderemos a cambiar el tamaño, la forma y la posición del elemento. Y eso es lo que las transformaciones CSS son nuestro encuadernado. El inmueble transformado tiene cuatro funciones que podemos utilizar para controlar cómo se mostrarán nuestros elementos. Y esas funciones son la función de escala, que nos permite redimensionar los elementos, es decir, aumentar o disminuir su altura o anchura. El traducir función, que nos permite mover el elemento y cambiar su posición a cualquier punto en el navegador horizontal o verticalmente. La función de rotación, que nos permite rotar los elementos en un entorno 2D por cualquier grado o cualquier número de giros que queramos. Y la función sesgada, que nos permite sesgar los elementos a lo largo del eje x o del eje y. Entonces ahora, después de ver lo que las transformaciones CSS pueden hacer por nosotros y qué funciones se utilizan con él. En la siguiente lección, comenzaremos a aprender estas funciones, y comenzaremos con la función de traducir. Entonces nos vemos en la siguiente lección. 7. 7: función curvas de CSS: Hola a todos. En esta lección estaremos aprendiendo cómo cambiar la posición de los elementos HTML como divs, imágenes, y así sucesivamente usando la función Transformar Traducir. Ahora, cada vez que quieras usar la propiedad transform, escribirás así. Transformar. Entonces la función de transformación que desea aplicar, que se traduce para esta lección y luego paréntesis. Y dentro de esos, el valor para la función especificada. Ahora hablemos un poco de la función de traducir. Básicamente, la función de traducción mueve elementos alrededor del navegador a lo largo del eje x y el eje y. Entonces, por ejemplo, si escribo algo como esto, transformo traducir y píxeles, diez píxeles, esto moverá el elemento 10 píxeles a la derecha y diez píxeles hacia abajo desde su posición original. Entonces intentemos eso. Puedes ver aquí en mi HTML, todo lo que tengo es una imagen que vamos a probar todas las funciones encima y arriba aquí y añadir algunos estilos para que la imagen se vea bien cuando la veamos. Y si vamos al navegador, se puede ver que la imagen está sentada aquí. Por lo que queremos cambiar la posición de la imagen, es decir, queremos que se mueva horizontal o verticalmente. Entonces primero, queremos que se mueva horizontalmente. Podemos hacer esto fácilmente mediante el uso de la propiedad transform translate. Por lo que volveré a nuestro editor de códigos y apuntaré a la imagen. Y cuando pase el rato sobre él, añadiré transformada. Y la función que quiero es traducir, y quiero moverla horizontalmente a lo largo del eje x. Entonces diré traducir x, y luego agregaré el valor de la distancia que quiero que se mueva el elemento, digamos 500 píxeles. Y subamos aquí y sumamos algunas transiciones para que el movimiento ocurra sin problemas. Por lo que voy a añadir transición. Y luego la propiedad queremos cambiar sin problemas, que por supuesto se transforma, y luego la duración de la animación. Digamos que dos segundos. Genial. Entonces ahora lo que debería pasar cuando pase el cursor sobre la imagen es que se mueve 500 píxeles horizontalmente a lo largo del eje x hacia la derecha. Por lo que de vuelta al navegador. Y cuando pase el cursor sobre la imagen, por supuesto se moverá sin problemas 500 píxeles a la derecha. Ahora, también podemos usar valores negativos para la propiedad translate, y funcionará bien, pero el elemento se moverá hacia la izquierda, no hacia la derecha. Por lo que volvamos a nuestro editor de códigos. Y yo iré aquí mismo y sumaré menos 500. Y cuando regrese y vuelvo a colocar sobre la imagen, esta vez se moverá a la izquierda. Genial. A continuación queremos mover la imagen verticalmente, no horizontalmente. Suficientemente fácil. Usaremos Traducir Y en lugar de X. Así que volveré a nuestro editor de códigos y cambiaré esta x a una yAsí que cuando utilicemos valores positivos, la imagen se moverá hacia abajo. Pero en este caso estamos usando valores negativos. Por lo que debemos avanzar hacia la parte superior, de vuelta al navegador. Y cuando pase el cursor sobre la imagen, puede ver que se mueve 500 píxeles hacia la parte superior. Y volvamos a nuestro editor de códigos y usemos 500 píxeles positivos. Y por supuesto se moverá hacia abajo. Ahora, podemos combinar estas dos funciones en una sola función llamada simplemente traducir. Por lo que volvamos a nuestro editor de códigos. Voy a quitar este y Ahora la función de traducir acepta dos valores. El primer valor es X, que moverá la imagen a lo largo del eje x. Por lo que diré menos 500 píxeles, por ejemplo. Y el segundo valor es y, que indica el movimiento verticalmente a lo largo del eje y, digamos 200 píxeles. Y ahora cuando pase el cursor sobre la imagen, no debería moverse menos 500 píxeles a lo largo del eje x, significa 500 píxeles a la izquierda y 200 píxeles hacia abajo al mismo tiempo. Y así, la imagen se mueve horizontal y verticalmente al mismo tiempo. Por lo que para envolver las cosas, Traducir es una de las funciones que podemos usar con la propiedad transform. Y nos permite cambiar la posición de los elementos HTML en la página. Puede ser Traducir X, que moverá el elemento horizontalmente hacia la derecha si el valor es positivo o hacia la izquierda si el valor es negativo. O puede ser Traducir Y, que moverá los elementos verticalmente hacia abajo si es positivo o hacia arriba si es negativo. Y solo podemos usar Traducir, que acepta dos valores, x e y, que eliminan al mismo tiempo el elemento a lo largo de ambos ejes. 8. 8: función en escala CSS: Hola a todos. En esta lección aprenderemos cómo cambiar el tamaño de los elementos HTML utilizando la función de escala. Por lo que la función de escala nos permite cambiar el tamaño de los elementos fácilmente. Pero, ¿a qué nos referimos cuando decimos redimensionar elementos? Bueno, cambiar el tamaño de los elementos significa cambiar su ancho o altura o ambos de esos aspectos. Entonces, empecemos con el ancho. Podemos cambiar el tamaño de los elementos con fácilmente usando escala x. Así que tengo la misma imagen de la lección anterior, y voy a ir justo aquí cuando pase el cursor sobre la imagen y añadiré la escala de transformación x. y la función de escala excepto los números que cuánto cambiará el ancho del elemento con respecto a su ancho original. Entonces, por ejemplo, si añadí a aquí, esto hará que el ancho de la imagen aumente al doble del tamaño original. Entonces si fueron 100 pixeles , serán 200 pixeles. Y si cambio los dos a 1.5 , serán 150 píxeles. Entonces veamos esto. Se puede ver cuando paso el cursor sobre la imagen, su ancho aumenta y se duplica. Ahora también puedo disminuir el ancho. Por lo que puedo volver al editor de código y usar 0.5, por ejemplo, lo que disminuirá el ancho de la imagen a la mitad del original. Al igual que esto. Gran nanoescala, la altura de los elementos, podemos usar escala y en lugar de x. así que volvamos a nuestro editor de código. Voy a cambiar esto a y. y eso debería disminuir la altura para tener como celda. Y por supuesto, podemos aumentar la altura mediante el uso de valores mayores a uno. A ver cómo se ve eso. Por lo que volvamos a nuestro editor de códigos. Voy a cambiar este 0.5 a 1.5. Y esto debería aumentar la altura. Igual que eso. Al igual que traducir, la función de escala puede tomar dos argumentos, x e y, donde el valor x define cuánto aumentará o disminuirá el ancho de los elementos en relación con su ancho original. Y el valor y define cuánto aumentará o disminuirá su altura respecto a su altura original. Por lo que volvamos a nuestro editor de códigos. Iré aquí mismo y quitaré este y y agregaré dos. Por lo que se duplicará el ancho y otros dos. Por lo que también se duplicará la altura. Y la imagen debería ser dos veces más grande. Ahora, cuando pase el cursor sobre la imagen, se puede ver que se está haciendo más grande y tiene este bonito zoom en efecto. Ahora si vuelvo a nuestro editor de códigos y elimino este segundo valor y dejo sólo este primer valor. Esto escalará el ancho y la altura juntos. Al igual que si no quitáramos el segundo valor. Entonces si hice este punto 2, 5, esto debería escalar la imagen hasta un 25 por ciento de su tamaño original. Por lo que para envolver las cosas, la escala es una de las funciones que podemos usar con la propiedad transform. Y nos permite cambiar el ancho de un elemento HTML o su altura o ambos simultáneamente. Se puede escalar x, lo que aumentará el elemento con si el valor es mayor que uno, o disminuirlo si el valor era menor que uno. O se puede escalar y, lo que aumentará la altura del elemento si es positivo, o lo disminuirá si es negativo. Y solo podemos usar la escala, que acepta dos valores, x e y. y cambiaremos el ancho y la altura del elemento al mismo tiempo. 9. 9: función rotada CSS: Hola a todos. En esta lección, aprenderemos cómo rotar elementos HTML en un entorno 2D utilizando la función de rotación. Por lo que la función de rotación acepta un valor, que es el ángulo o el número de grados. Se desea rotar el elemento por, seguido de DEG cuatro grados. Entonces, en realidad intentemos rotar nuestra imagen. Iré aquí mismo y agregaré transformar, rotar, y digamos 20 grados. Entonces lo que esto hará es que rotará la imagen 20 grados en el sentido de las agujas del reloj. Entonces cuando voy al navegador y paso el cursor sobre la imagen, se puede ver que está girando en sentido horario 20 grados. De acuerdo, volvamos a nuestro editor de códigos y probemos algo así como 90 grados. Se puede ver que la imagen ahora está girada 90 grados. Probemos 180 grados. Y ahora se puede ver la imagen gira 180 grados y se voltea verticalmente. A continuación, voy a probar 360 grados, lo que hará que la imagen gire círculo completo, luego volver a la forma en que era antes. Ahora, también podemos usar grados negativos para la función de rotación, que rotará elementos HTML en sentido contrario a las agujas del reloj. Entonces volveré a mi editor de códigos y cambiaré esto a, digamos, menos 60 grados. Y ahora cuando pase el cursor sobre el borde, girará 60 grados en sentido contrario a las agujas del reloj. Genial. Ahora, la función de rotación también acepta valores en otras unidades. Por ejemplo, podemos usar giros para decirle al elemento hasta dónde debe girar. Entonces si voy a mi editor de códigos, quita esto y agrega un giro. Y ahora cuando vaya al navegador y pase el cursor sobre la imagen, girará un giro completo en el sentido de las agujas del reloj, que es igual a 360 grados. E incluso podemos usar términos negativos para hacer que el elemento gire en sentido contrario a las agujas del reloj. Entonces, por ejemplo, usemos menos 0.5 vueltas. Y ahora la imagen está girando medio giro en sentido contrario a las agujas del reloj. Otra unidad que podemos utilizar con la función de rotación son los gradientes. Por lo que un círculo completo es de 400 gradientes. Probemos esos. Iré al editor de códigos y cambiaré esto a 200 gradientes. Y ahora cuando pase el cursor sobre la imagen, debería girar media vuelta así. En el mundo real, la función de rotación se usa con grados la mayor parte del tiempo, pero solo quería hacerte saber de estas otras unidades. Entonces eso es todo para la función de rotación. Es realmente simple. Entonces los veré en la siguiente lección. 10. 10 - función de skew: Hola a todos. En esta lección aprenderemos a sesgar elementos horizontal o verticalmente usando la función sesgada. El sesgo de la función es como las funciones de traducción y escala, lo que significa que tenemos actos de sesgo para sesgar los elementos horizontalmente y sesgar ¿por qué los sesgan verticalmente? O simplemente podemos usar sesgo. Y el primer valor será x, y el segundo será yAhora , sesgo es similar para rotar en términos de unidades, utilizamos grados para determinar cuánto se debe sesgar el elemento. Bien, ahora veamos cómo funciona en acción. Iré aquí mismo y añadiré Transform Skew x, digamos 30 grados. Y ahora cuando voy al navegador y paso el cursor sobre la imagen, se puede ver que se sesga horizontalmente en 30 grados. Y podemos cambiar la dirección sesgada usando valores negativos. Entonces intentemos eso. Volveré a mi CSS y haré este menos 30. Y ahora cuando pase el rato sobre él, debería estar sesgada en la otra dirección. Ahora, sesguemos la imagen verticalmente usando la función sesgada y. Volveré a nuestro editor de códigos y luego cambiaré esta x a y. y ahora cuando pase el cursor sobre la imagen, puedes ver sesgada verticalmente. Y para que se sesgue verticalmente en dirección opuesta, podemos retroceder y quitar el menos para que sea positivo. Y cuando vuelvo a rondar sobre él, se sesgará del otro lado. Ahora, como dijimos, podemos sesgar los elementos HTML tanto horizontal como verticalmente al mismo tiempo usando solo sesgo, que acepta dos valores. El primero es para ACS y el segundo es rewire. Entonces volveré a mi editor de códigos y haré que esto solo se sesgue. Y luego hacer que se sesgue en 20 grados horizontalmente y 40 grados en vertical. Y ahora cuando vuelvo sobre él, se puede ver que está sesgada en ambos sentidos. 11. 11: origen de transformación CSS: Hola a todos. Después de terminar todas las funciones de transformación 2D en esta lección, aprenderemos sobre una nueva propiedad llamada transformación origen. Bueno, el origen transformado es el punto que una transformación toma como referencia cuando funciona. Es decir, el punto alrededor del cual se aplica la transformación. Entonces por ejemplo, aquí en mi navegador y tengo dos imágenes, he añadido transformar girar en 30 grados a ambas. Por lo que cuando pase por encima de ellos, deben rotar en el mismo grado. Pero la diferencia es que he cambiado el origen transformado de la segunda imagen para estar en la esquina superior izquierda, pero no cambié nada para la primera. Por lo que sólo tiene rotación de transformación. Ahora cuando paso el cursor sobre la primera imagen, se puede ver que aquí no pasa nada extraño. Simplemente gira 30 grados en el sentido de las agujas del reloj como vimos antes en la lección anterior. Pero ahora voy a pasar el rato sobre la segunda imagen. Aquí está pasando algo interesante. El imagen está girando 30 grados en el sentido de las agujas del reloj, pero está girando en su esquina superior izquierda, que es el origen de la transformación, mientras que la primera imagen está girando desde su punto central, lo que nos dice que el punto central es el valor por defecto de origen de transformación. Ahora, hablemos de los valores que transforman el origen acepta. Puede aceptar palabras clave como un valor, como arriba, abajo, derecha e izquierda. Entonces intentemos eso de nuevo a nuestro editor de código. Y aquí sólo tengo una imagen. Entonces cuando pasamos el cursor sobre esta imagen, queremos agregar transformada y rotarla en 45 grados, por ejemplo. Y subiremos aquí y agregaremos top de origen de transformación. Y ahora cuando vamos al navegador y pasamos el cursor sobre la imagen, se puede ver que está girando desde el centro superior de la imagen ahora. Ok, Next es una demo para las otras palabras clave que transforman el origen exceptúa. Entonces veamos cómo funcionan. En primer lugar, tenemos tab. Dijimos que girará el div alrededor del centro superior del elemento. Entonces exactamente justo aquí. Al igual que así. Entonces tenemos, correcto. Y en este caso el div rotará desde el centro de su lado derecho, Exactamente justo aquí, así. Ahora, quiero que paren el video y adivinen cómo todos los siguientes div, se van a mover. Así que pausa ahora. Muy bien, Así que abajo por supuesto, lo hará pivotar alrededor del punto central inferior justo aquí. Al igual que esto. Después nos queda, que rotarán alrededor de este punto. Igual que eso. Después arriba a la derecha, que girará alrededor de la esquina superior derecha, luego abajo a la derecha, luego abajo a la izquierda, y finalmente arriba a la izquierda. Ahora, el origen transformado también puede aceptar valores como porcentajes. Partimos desde la esquina superior izquierda del elemento. Por lo que el primer valor porcentual es X porcentaje. Y cuando el porcentaje X es del 100%, eso significa que partimos desde la esquina superior izquierda, luego nos movemos 100% a través del elemento con hacia la derecha, lo que significa que terminaremos en la esquina derecha del elemento. Y entonces el porcentaje Y indica hasta dónde nos moveremos verticalmente con respecto a la altura del elemento. Entonces si es 100% está bien, entonces nos moveríamos hacia abajo una distancia igual a la altura del elemento. Por lo que nuestro origen transformado terminará en la esquina inferior derecha del elemento. Ahora, digamos que queremos hacer el origen de transformación del elemento en el centro utilizando el método de porcentaje. Entonces lo que debemos hacer es poner x como 50% y luego y como 50 por ciento también. Y debe estar centrado. De acuerdo, probemos este método en acción. Iré aquí mismo y agregaré origen transformado, digamos 30 por ciento a la derecha y luego 80% al fondo. Y luego cuando vayamos al navegador, nos moveremos 30% a la derecha, luego 80% a la parte inferior. Por lo que el origen transformado estará en algún lugar por aquí. Otros valores que transforman el origen acepta o píxeles. Por lo que solo puedes decir, quiero que se mueva 50 píxeles a la derecha y luego 100 píxeles hacia abajo. Y este será nuestro punto de origen transformado. Entonces intentemos eso. Iré aquí mismo y le sumaré 300 pixeles. Por lo que esa es la mitad del ancho. A continuación, agregue 150 píxeles, que es la mitad de la altura justo aquí. Por lo que ahora el punto de origen de la transformación debe estar en el centro. Igual que eso. Entonces eso es todo para esta lección, todos, y los veré en la siguiente. 12. 12 - traducir en 3D: Hola a todos. Bienvenido a esta nueva sección del curso. En esta sección, aprenderemos a utilizar algunas de las propiedades de las que hablamos en la sección anterior. Pero en un entorno 3D. Ahora, la mayor diferencia entre los entornos 2D y 3D es el eje z. En entornos 2D, tenemos el eje x, que es horizontal, y el eje y, que es vertical. Pero en 3D, también tenemos el eje z, que es perpendicular a ambos. Ahora, con el fin de crear un entorno 3D en un plano 2D, como la pantalla de nuestra computadora, necesitamos crear algo llamado perspectiva. Se puede pensar en la perspectiva como la distancia entre nuestros ojos y la pantalla de la computadora. Creo que lo entenderás más cuando lo veamos en acción. Pero quiero que recuerden que cada vez que se quiere trabajar con un entorno 3D, necesita definir primero la perspectiva. Por lo que comenzaremos con la propiedad translate. En la sección anterior, aprendimos a traducir o mover elementos HTML horizontal o verticalmente usando las funciones de traducir X y traducir Y. Y ahora queremos usar Traducir Z y ver qué va a obtener. Entonces aquí en mi HTML, sólo tengo una imagen, y voy a ir justo aquí y añadir transformar, traducir Z, digamos 300 píxeles. Entonces cuando pase el cursor sobre la imagen, quiero que se mueva 300 píxeles en la dirección z. Pero dijimos antes de usar cualquiera de las propiedades de transformación 3D, necesitamos crear perspectiva. Y para ello, utilizamos una propiedad llamada prospectiva y la agregamos al contenedor de los elementos HTML que queremos que transforme. En nuestro caso, el contenedor de la imagen es el cuerpo. Por lo que apuntaré al cuerpo y añadiré perspectiva. Y recuerden dijimos que la perspectiva es la distancia entre nuestros ojos, los ojos del espectador, y la pantalla de la computadora. Por lo que acepta valores en píxeles. Entonces digamos 100 pixeles. Y ahora cuando voy al navegador y paso por encima de la imagen, ves que algo interesante está pasando aquí. El tipo de imagen es cada vez más grande. El ancho y la altura van en aumento, igual que lo que sucedió cuando usamos la propiedad Escala en la sección anterior. Pero en realidad, eso no es lo que está pasando aquí. Lo que realmente está pasando aquí es que la imagen se está moviendo hacia nosotros. Entonces se está acercando a nuestros ojos. Y por eso parece más grande, pero su ancho y altura no han cambiado. Por lo que ahora se puede pensar en el eje z como la línea trazada entre dos puntos. El primero son nuestros ojos, y el segundo es la pantalla. Entonces cuando movemos el elemento a lo largo del eje z, se moverá a lo largo de esta línea y o se acercará o alejará de nuestros ojos. Por ejemplo, si vuelvo a mi editor de códigos y cambio estos 300 píxeles a menos 300 píxeles. Ahora, cuando me inclino sobre la imagen, se puede ver que se está haciendo más pequeña porque en realidad se está alejando de nuestros ojos. Volveré de nuevo y quitaré este grado menos. Entonces ahora, ¿cuál es la perspectiva que agregamos justo aquí en el cuerpo? Bueno, antes de hablar de eso, cambiémoslo en realidad a 500 píxeles y veamos qué obtenemos. Por lo que antes de recargar mi navegador, al pasar el cursor sobre la imagen, puede ver que la imagen se está acercando a mí por 300 píxeles en una perspectiva de 1, 0, 0, 0, 0, 0. Por lo que actualizaré mi navegador para cambiar a una perspectiva de 500 píxeles. Y luego pasaré por encima de la imagen. Y se puede ver en este caso, la imagen se está acercando mucho más que la primera vez con esta nueva perspectiva. Y eso se debe a que la nueva perspectiva es más pequeña. La distancia ahora entre nuestros ojos y la imagen es de 500 píxeles. Entonces cuando se mueve 300 píxeles hacia nosotros, entonces terminará a 200 píxeles de distancia de nuestros ojos. Si bien, cuando estábamos usando una perspectiva de cien, diez cientos píxeles, terminó a 700 píxeles de nuestros ojos. Por lo que parece más pequeño. Veamos otro ejemplo. Por lo que volveré a mi editor de códigos y cambiaré estos 300 píxeles por cualquier valor mayor que la perspectiva, que actualmente es de 500 píxeles. Entonces digamos 800 píxeles. Ahora, antes de que pase el rato sobre la imagen, imaginemos lo que va a pasar. La distancia entre la imagen y nuestros ojos es de 500 píxeles. Y queremos que la imagen se mueva 800 píxeles hacia nosotros. Entonces lo que sucederá es que la imagen se moverá hacia nosotros hasta que pase más allá de nuestros ojos. Y no vamos a poder verlo porque va a estar detrás de nosotros, o tal vez detrás de nuestros globos oculares en nuestras cráneos, lo que suena un poco aterrador, pero no te preocupes, es seguro. Entonces, cuando me cierro sobre él, se puede ver que desaparece más allá de nuestros ojos. Entonces para envolver las cosas, cada vez que queremos crear un entorno 3D, tenemos que agregar perspectiva al contenedor de elementos primero. Y la perspectiva es la distancia entre el espectador y la pantalla. 13. 13: rotar en 3D: Hola a todos. En esta lección, aprenderemos cómo rotar elementos dentro un entorno 3D utilizando la función Transformar Rotar. Entonces aquí en nuestro código tenemos nuestra imagen y está sentado aquí en nuestro navegador. Y aquí arriba se puede ver que tenemos una perspectiva de 500 píxeles. Porque recuerden, cada vez que queremos usar las propiedades de transformación, necesitamos definir primero la perspectiva. Entonces ahora empecemos a usar la función de rotación. En primer lugar, tenemos Girar X, lo que hará que el elemento gire sobre su eje eje. Entonces tenemos rotar y, lo que lo hará girar sobre su eje y. Y por último, z, que por supuesto lo hará girar sobre su eje z. Entonces empecemos con rotar Z. Iré aquí mismo dentro del selector de imágenes y añadiré transformación, rotar Z, digamos 120 grados. Y iré al navegador y recargaré. Ahora antes de pasar el rato sobre la imagen, estamos girando Z hará, es hará que la imagen gire sobre su eje z, que es como una línea que pasa de la pantalla a nuestros ojos. Por lo que no debería verse diferente a la función de rotación que usamos antes cuando estábamos tratando con transformaciones 2D. Por lo que pasaré por encima de la imagen y se puede ver que gira alrededor del eje z en 120 grados. Bien. Entonces rotar Z en realidad es similar a rotar, lo que aprendimos antes. Genial. A continuación hablaremos de Rotar huevo. Iré aquí mismo y cambiaré, rotaré Z para rotar x. Y quiero que rote 60 grados. Y lo que esto hará es que lo haga girar sobre su eje x, que es horizontal. Por lo que pasaré sobre la imagen y se puede ver que gira en 3D a lo largo del eje horizontal. Entonces, por ejemplo, si vuelvo atrás y cambio de 60 grados a 90 grados, entonces vuelvo atrás y pase el cursor sobre la imagen. Se puede ver que la imagen rotará 90 grados hasta que desaparezca. Lo que está pasando aquí es que la imagen gira hasta que sólo podemos ver su borde. Y como no tiene espesor, desaparece. Entonces tenemos rotar y. volveré y cambiaré, giraré x, giraré y, y volveré a cambiar los grados a 60. Entonces cuando voy a pasar el cursor sobre la imagen, se puede ver que gira sobre su eje y, que es vertical con el tiempo. Y eso es todo para esta lección, todos y yo los veremos en la próxima. 14. 15 - efecto rotativo creativo: Hola a todos. En esta lección, aprenderemos cómo crear este bonito efecto cuando pasemos el cursor sobre un botón. Se puede ver que cuando pasamos sobre él, el fondo amarillo está girando en la esquina inferior izquierda del enlace hasta que cubre todo el asunto. Entonces empecemos aquí en mi HTML, solo iré aquí mismo y añadiré una etiqueta de ancla. Y di que me flote. Entonces iré a mi CSS y añadiré algunos estilos. Por lo que en primer lugar, voy a apuntar al cuerpo y añadir altura 100 vh. Entonces agregaré display, flex, justifique contenido, centro, alinee ítems centro también. Entonces lo que harán estas tres líneas de código es que solo le enviarán el enlace horizontal y verticalmente usando Flexbox. Esto no tiene nada que ver con la animación CSS. Y si quieres aprender más sobre flexbox, que es un must learn para cualquier desarrollador web hoy en día, tengo un curso sobre eso aquí en Udemy. Puedes comprobarlo si te interesa. Entonces empecemos a peinar nuestro enlace. Yo lo apuntaré. Después agrega decoración de texto. Ninguno. Color. Este bonito color negro. Familia de fuentes, Sans Serif. Tamaño de fuente 45 píxeles, borde, cinco píxeles, sólido y son de buen color negro. Entonces añadiré relleno, 40 pixels y 80 pixels de izquierda y derecha. Entonces sumaré grado relativo de posición. Por lo que ahora con el fin de crear el bonito fondo amarillo, tendremos que utilizar el pseudo elemento antes. Y si no sabes qué seudo elementos son, solo te permiten insertar código antes o después de los elementos HTML. Entonces diré un colon antes. Entonces no agregaré ningún contenido porque no queremos agregar texto. Y después de eso, sumaré posición absoluta, y sumaré izquierda 0, luego top 0 también. Ahora tenemos nuestro pseudo elemento antes y su posición está en la esquina superior izquierda del enlace, justo aquí, porque agregamos izquierda 0 para que se mueva 0 distancia de la izquierda. O en otras palabras, simplemente se quedará a la izquierda del enlace. Y también estará en la parte superior, como dijimos, top a 0 también. Por lo que ahora mismo que antes, pseudo elemento es solo un punto en la esquina superior izquierda del enlace. Cuando en nuestro ejemplo, queremos que sea un fondo amarillo que ocupe todo el ancho y la altura del enlace. Por lo que podemos hacer eso fácilmente agregando color de fondo, nuestro color amarillo, luego altura 100%, y ancho 100% también. Bien. Por lo que ahora se puede ver que el pseudo elemento antes está apareciendo como el color de fondo y ocupando todo el ancho y la altura del enlace. Igual que queríamos. Pero hay un problema con un fondo amarillo ahora está ocultando el texto debajo de él. Entonces ahora no podemos ver las palabras flotando me. Esto se puede arreglar fácilmente yendo aquí mismo y agregando z-index min.1, para que el texto vuelva a aparecer frente al fondo amarillo. Genial. Entonces ahora si echamos un vistazo a nuestra demo, puede ver que al pasar el cursor sobre ella con fondo amarillo gira en sentido horario desde su esquina inferior izquierda hasta que termina horizontalmente con una rotación de 0 grados. Y para conseguir este efecto, iré aquí mismo y agregaré origen transformado abajo a la izquierda, ya que la rotación está girando en este punto, luego Transformar, Girar menos 90 grados, para que esta sea la posición inicial y el fondo amarillo. Entonces añadiré transformación de transición 1 segundo. Ahora cuando paso el cursor sobre el enlace, quería hacer algunos cambios en el fondo amarillo. Por lo que voy a añadir transformación, rotar en 0 grados, es decir devuelto a su posición horizontal original. Y ahora cuando voy a pasar el cursor sobre el enlace, se puede ver el grado de rotación ahora es 0. Cuando me alejo, vuelve a menos 90 grados. Por lo que sólo nos queda una cosa que hacer, que es ocultar la parte del fondo amarillo fuera del enlace. Esto se puede hacer fácilmente yendo a enlace y simplemente diciendo desbordamiento oculto. Y ahora estamos obteniendo el efecto que queríamos en nuestro botón. Ahora, podemos usar la misma técnica para obtener diferentes resultados, que también se verán bastante bien. Entonces probemos algunos de ellos. Digamos que queremos que el fondo amarillo gire desde la esquina inferior derecha, no desde la parte inferior izquierda. Esto se puede hacer cambiando algunas de las propiedades que agregamos. Pero primero, volvamos a nuestro CSS y eliminemos esta línea de código para que podamos ver el cuadro amarillo fuera del enlace. Para que la caja amarilla gire desde la esquina inferior derecha, solo podemos ir aquí y cambiar el origen de la transformación a la parte inferior derecha en lugar de abajo izquierda. Por lo que ahora se puede ver el fondo amarillo gira desde la esquina inferior derecha en menos 90 grados. Pero ahora cambiemos esta rotación a 90 grados en lugar de menos 90 grados. Y ahora el fondo amarillo gira 90 grados. Ahora vayamos a nuestro CSS y añadamos desbordamiento oculto de nuevo. Y ahora cuando pase el cursor sobre el enlace, se puede ver que tenemos el mismo efecto que antes, pero esta vez la rotación está centrada en la esquina inferior derecha, no en la parte inferior izquierda. Ahora, tengo un pequeño reto para ti. Quiero que intentes que el fondo amarillo gire alrededor a diferentes puntos. El primero es la esquina superior izquierda. El segundo es la esquina superior derecha. Solo necesitarás cambiar dos valores, el origen de la transformación y el ángulo de rotación. Así que prueba eso y dime si pudiste hacerlo en la sección de preguntas y respuestas. 15. 16: efecto de botón creativo: Hola a todos. En esta lección, vamos a crear este bonito efecto de deslizamiento flotante. Entonces, al pasar el cursor sobre este enlace, se puede ver el fondo deslizar suavemente de izquierda a derecha y el color cambia a blanco. Y cuando me alejo, el fondo se desliza de nuevo hacia la izquierda. Entonces veamos cómo podemos hacer esto. Aquí en mi HTML, sólo voy a añadir una etiqueta de ancla y sólo decir hover me. Entonces iré a mi CSS y añadiré algunos estilos. Voy a apuntar al enlace, y voy a añadir algunos estilos para que se vea más bonito. Por lo que voy a añadir decoración de texto, ninguna. Entonces color. Este bonito color. Familia de fuentes. Sans Serif. Tamaño de fuente 40 píxeles, borde, tres píxeles, sólido. Y nuestro color. Después relleno 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces sumaré posición, relativa, y finalmente, transición todos 1 segundo. Ahora puedes ver que nuestro enlace se ve mucho más bonito y podemos empezar a trabajar en este efecto de borrado. Por lo que la idea detrás de este efecto de deslizamiento es que vamos a crear un pseudo elemento antes que ocupará todo el ancho y la altura del enlace. Entonces lo traduciremos fuera del enlace. Y al pasar el cursor sobre el enlace, retiraremos la traducción para que regrese a su lugar donde la podamos ver. Y esto tendrá mucho más sentido cuando creamos juntos. Entonces iré aquí mismo en mi CSS y añadiré dos puntos antes. Y entonces voy a vaciar el contenido. Entonces por debajo de eso, sumaré posición absoluta, y luego izquierda 0 y top 0 también. Entonces tenemos que hacer que ocupe todo el ancho y la altura de nuestro contenedor. Por lo que sumaré altura 100%, luego ancho 100%. Y voy a añadir un color de fondo. Nuestro color, claro. Entonces sumaré z-índice minús1, y les diré por qué agregamos esto en un segundo. Genial. Por lo que cuando miras el enlace, puedes ver que el pseudo elemento antes está ocupando todo el ancho y alto del enlace. Y el texto ha desaparecido como que tiene el mismo color que el fondo, por lo que no podemos verlo. Por lo que ahora queremos crear este movimiento blanco desde la izquierda que se puede hacer fácilmente usando la función translate, que estoy seguro que recuerdan. Vamos a mover los elementos alrededor de la pantalla. Por lo que voy a ir justo aquí en el pseudo elemento antes y voy a añadir transformada. Traducir X menos 100%. Ahora estoy seguro de que recuerdan que los valores negativos, los elementos de cine a la izquierda y los positivos lo mueven a la derecha. Por lo que ahora se puede ver el pseudo elemento antes movido a la izquierda por el 100% de su ancho. Y se puede ver el texto ahora aparece aquí mismo. Genial. Entonces ahora cuando se cierne sobre el enlace, quiero que pasen dos cosas. Yo quería antes pseudo elemento volver a su posición. Y quiero que el color cambie a blanco. Entonces al pasar el cursor sobre el enlace, quiero hacer que pasen algunos cambios al pseudo elemento antes. Y esos cambios lo están devolviendo a su posición. Por lo que voy a añadir transform translate X 0 para que regrese de vuelta a su lugar original. Y quiero que este cambio ocurra sin problemas. Entonces subiré aquí en el pseudo elemento y añadiré transición, oh, 1 segundo. Por lo que ahora cuando voy a pasar el cursor sobre el enlace, se puede ver que el fondo se mueve suavemente desde la izquierda hasta su posición original. Una cosa que queda por hacer y eso es esconder el fondo fuera del enlace. Y esto se puede hacer simplemente yendo a la etiqueta de anclaje y agregando desbordamiento oculto. Por lo que ahora se puede ver que el fondo es invisible fuera del enlace ya. Y tenemos el efecto que queremos. Por último, necesitamos cambiar el color del texto a blanco al pasar el cursor también. Por lo que iré a mi CSS y al pasar el cursor sobre el enlace, quiero que el color cambie a blanco. Y esto también sucederá sin problemas porque agregamos una transición aquí arriba en la declaración de la etiqueta de anclaje. Por lo que ahora cuando pase el cursor sobre él, se puede ver que el color del texto está cambiando demasiado ancho. Ahora, en cuanto al índice Z que he agregado aquí mismo. Hice esto porque cuando creé el pseudo elemento antes y le di todo el ancho y la altura del enlace. El texto estaba oculto detrás de él, es decir, cubrió el texto. Entonces por ejemplo, si voy y lo quito así. Después pase el cursor sobre el enlace. Se puede ver que las etiquetas se ocultarán detrás del fondo. Por lo que lo agregamos para que el texto aparezca frente a él para que podamos verlo. Genial. Entonces ahora que entendemos el concepto detrás de este movimiento blanco, podemos modificarlo fácilmente para obtener resultados diferentes. Entonces digamos que queremos que este movimiento blanco sea del lado derecho, no del lado izquierdo. Podemos hacerlo cambiando sólo una línea de código. Entonces aquí en mi CSS, cambiaré el Traducir X para el fondo al 100% en lugar de menos 100%, que la posición inicial antes de pasar el cursor sobre él sea a la derecha, no a la izquierda. Entonces cuando voy y vuelvo a pasar el cursor sobre el enlace, se puede ver que el ligero movimiento es ahora del lado derecho. Y digamos que queremos que el deslizar sea de arriba a abajo. Entonces en lugar de usar translate x, usaremos Traducir Y esta vez. Entonces cambiaré x a y, y lo queremos de arriba a abajo. Entonces diremos menos 100% porque los valores negativos mueven los elementos hacia arriba. Y de nuevo, voy a cambiar esta x de aquí a y. y ahora puedes ver cuando pase el cursor sobre el enlace, el fondo se desliza de arriba a abajo. Entonces ahora quiero que jueguen con esos valores y creen más efectos. Puede sentirse libre de compartir lo que se te ocurre con otros alumnos en la Q y una sección. 16. 17 – efecto creativo: Hola a todos. En esta lección estaremos creando un bonito efecto flotante. Entonces cuando pase el cursor sobre el enlace, debería suceder este bonito efecto. Está bien, así que empecemos por ir aquí en mi HTML. Al agregar un enlace, solo di hover me. Entonces iré a mi CSS y añadiré algunos estilos. Voy a apuntar al enlace y añadir relleno, 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces añadiré fuente, familia, Sans Serif, luego decoración de texto, ninguno para deshacerme del subrayado. Entonces color. El agudo 2626. Tamaño de fuente, 45 píxeles. Espaciado entre letras. Dos píxeles, borde cinco píxeles, sólido. Y de nuevo, este color, posición relativa y transición 1 segundo. Entonces así es como se ve ahora el enlace. Muy bien, entonces tendremos que usar el pseudo elemento antes. Y si no sabes qué es eso, solo te permite insertar código antes de tu elemento. Ya veremos cómo funciona esto en un segundo. Entonces diré un colon antes. Y dentro de ese contenido, vacío. Por lo que no obtengo ningún texto dentro de este pseudo elemento. Y luego posición absoluta 0, izquierda, 0, ancho, 100%, altura, 100%. Por lo que debe tomar todo el ancho y alto de un enlace y luego color de fondo, nuestra transición de color. 1 segundo. Por lo que ahora puedes ver nuestro pseudo elemento aparece en la parte superior del link y ya no somos capaces de ver el enlace. Genial. Seguro que recuerdas las funciones de rotación x, rotación y que aprendimos antes en el curso. Y que recuerdes que girar x hace que el elemento gire a lo largo del eje x, mientras que girar y lo hace girar a lo largo del eje y. Repasemos eso juntos. Aquí, tengo dos imágenes y he establecido la rotación x para la primera a 90 grados al pasar sobre ella. Entonces veamos qué pasará cuando pase el rato sobre él. Se puede ver la imagen se gira 90 grados a lo largo del eje x para que ahora no la podamos ver porque la parte de ella que nos está enfrentando ahora. Su filo. Y dije la rotación y para la segunda imagen a 90 grados en flotando también. Por lo que ahora cuando pase el cursor sobre él, se puede ver que la imagen se gira a lo largo del eje y en 90 grados hasta que también desapareció. Muy bien, Ahora que hemos revisado qué rotar x y rotar, ¿por qué hacer? Volvamos a nuestro CSS. Iré aquí mismo y agregaré rotar x 90 grados, nuestro pseudo elemento para que rote 90 grados y desaparezca igual que en el ejemplo de imagen. Genial. Entonces ahora lo que quiero hacer es cuando pase el cursor sobre el enlace, quiero quitar la rotación del pseudo elemento antes para que vuelva derecho a donde estaba antes de desaparecer. Por lo que apuntaré al enlace y cuando pase el cursor sobre él, quería hacer algunos cambios al pseudo elemento antes. Quiero restablecer la rotación alrededor del eje x a 0 para que vuelva a aparecer y podamos verlo. Y debido a que estoy usando la transición aquí arriba, este cambio en la rotación debería ocurrir sin problemas. Por lo que ahora cuando pase el cursor sobre el enlace, se puede ver que el pseudo elemento antes vuelve y muestra eso muy bien. Ahora, necesitamos cambiar el color del texto cuando pasemos el cursor sobre el enlace a blanco. Por lo que apuntaré al enlace. Y cuando pase el rato sobre él, quiero cambiar el color a blanco. Y si ahora vuelvo sobre el enlace, se puede ver que no pasa nada. El color del texto no está apareciendo. Y eso se debe a que el pseudo elemento está apareciendo encima del enlace y el texto está yaciendo debajo de él. Entonces lo que podemos hacer es ir justo aquí en el pseudo elemento y agregar índice Z menos uno para que el texto aparezca delante del pseudo elemento. Entonces ahora cuando voy a pasar el rato sobre el enlace, se puede ver el texto aparece y tenemos un bonito efecto flotante pasando. Ahora, intentamos rotar x. Vamos más allá e intentemos rotar y, mezclarlos y ver qué va a obtener. Entonces copiaré este pseudo elemento, lo pegaré de nuevo, y solo cambiaré antes a después. De acuerdo, entonces ahora tenemos dos pseudo elementos. Simplemente cambiaré la función de rotación a y. por lo que girará a lo largo del eje y hasta que no podamos verlo más. Y voy a copiar este efecto flotante. Pega de nuevo y cambia antes a después de X a Y. que cuando pase el cursor sobre él, la rotación a lo largo del eje y vuelva a 0. Imagen aparece muy bien con el pseudo elemento antes. Y ahora cuando voy y vuelvo sobre él, se puede ver que los pseudo elementos antes y después se están apareciendo juntos, dándole este efecto realmente bonito. Y eso es exactamente lo que queríamos. 17. 18: efecto de estirar creativo: Hola a todos. En esta lección, vamos a crear este bonito efecto hover. Se puede ver cuando paso el cursor sobre el enlace, el texto se vuelve más audaz y tanto el espaciado entre letras como el grosor del borde aumentan. Este es un efecto fácil pero bonito. Entonces veamos cómo podemos hacerlo. Aquí en mi HTML, se puede ver que he implementado una fuente de Google Fonts llamada Roboto en este ejemplo. Por lo que iré aquí mismo y añadiré una etiqueta de ancla. Y voy a decir sólo botón. Entonces iré a mi CSS para agregar algunos estilos. Voy a apuntar a la etiqueta de anclaje y añadir decoración de texto. Ninguno. Acolchado, 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces le añadiré color. Este bonito color rojo y borde, tres píxeles, sólido. Y nuestro color rojo. Entonces voy a añadir transformación de texto. mayúscula, tamaño de fuente 40 pixels. Y font-family. Roboto. Entonces font-weight 300, lo que lo hará un poco más ligero. Después el espaciado entre letras menos dos píxeles para que las letras estén más cerca una de la otra. Y finalmente, transición o 0.5 segundos para que el cambio ocurra sin problemas. Y ahora puedes ver el enlace se ve exactamente como nuestra demo. Ahora tenemos que crear el efecto que queremos sobre el hovering. Por lo que apuntaré al enlace y al rondar, cambiaré el peso de la fuente a 900, por lo que será mucho más audaz. Entonces añadiré espaciado entre letras diez píxeles para que las letras estén un poco alejadas unas de otras. Y luego copiaré la frontera desde aquí arriba y la pegaré. Y cambiaré esto a siete píxeles en lugar de tres píxeles. Y eso es todo. Cuando paso el cursor sobre el enlace, se puede ver que el cambio es agradable y suave, justo como queremos. 18. 19: efecto de deslizado creativo: Hola a todos. En esta lección, crearemos este bonito efecto de deslizamiento de arriba a abajo. Y si notan, este efecto es muy similar a lo que creamos en la lección anterior. El principal diferencia es que aquí tenemos contenido en el pseudo elemento, que es la palabra año. Y por supuesto hay algunas diferencias en cómo se ven los botones, pero usaremos los mismos archivos del ejemplo anterior y haremos algunos cambios para obtener este efecto. Entonces aquí está el HTML del ejemplo anterior, y no vamos a cambiar nada en él en absoluto. Los cambios estarán en nuestro CSS. Entonces vamos a nuestro CSS. Y antes de hacer algo más, vamos a cambiar cómo será el enlace. Entonces lo primero que haré es añadir un bonito fondo gris oscuro al cuerpo. Y después de eso, haré algunos cambios en el enlace. Entonces cambiaré el color a blanco. Las familias tipográficas, bien. El tamaño de la fuente está bien. Y aquí cambiaré el color del borde a blanco también. Y eso es todo para el enlace en sí. Ahora, tenemos que agregarle el pseudo elemento antes. Entonces en este ejemplo, necesitamos agregar contenido aquí mismo. Por lo que voy a escribir año y voy a añadir color blanco. Y también cambiaré el color de fondo a este color rojo. Y ahora cuando pase el cursor sobre el enlace, se puede ver la palabra año aparece detrás del texto del enlace. Esto sucede porque el índice z se establece en menos uno justo aquí. Por lo que voy a quitar esto. Y ahora cuando pase el cursor sobre el enlace, se puede ver la palabra sí, aparece delante del botón. Genial, por lo que ahora necesitamos centrar nuestra palabra en segundo plano. Esto es muy fácil usando Flexbox. Por lo que voy a ir justo aquí y añadir display flex para que controlemos cualquier cosa que esté en este pseudo elemento usando Flexbox. Y añadiré alinear elementos centro para centrar el contenido verticalmente y justify-content center así como para centrarlo horizontalmente. Entonces ahora cuando paso el cursor sobre el botón, puedes ver que la palabra ahora está perfectamente centrada dentro del pseudo elemento. 19. 20 - efecto brillante creativo: Hola a todos. En esta lección, crearemos este efecto al pasar el cursor sobre un botón. Entonces veamos que en nuestra demo más lenta para ver qué es exactamente lo que está pasando, flotaré sobre el enlace. Y se puede ver que el color de fondo está cambiando a algún color rojo. Y hay una gruesa línea blanca que está inclinada en un ángulo de 45 grados y está pasando por el eslabón. Al mismo tiempo cambia el color de fondo. Genial, ¿verdad? Entonces veamos cómo podemos hacer esto. En primer lugar, voy a ir a mi HTML y voy a añadir una etiqueta de ancla. Y sólo di rondando. Entonces iré a mi CSS para agregar algunos estilos. Añadiré un fondo gris oscuro al cuerpo. Entonces debajo de eso, apuntaré a la etiqueta de anclaje y agregaré decoración de texto. Ninguno. Entonces color, blanco. Familia de fuentes. Sans Serif. Tamaño de fuente 40 pixels. Borde, tres píxeles. Blanco sólido. Acolchado. 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces añadiré transición 0, 0, 3 segundos posición relativa. Y a continuación, hagamos que el color de fondo cambie a rojo al pasar el cursor sobre el enlace. Entonces iré aquí mismo y diré a. Y sobre flotando. Voy a cambiar el color de fondo a nuestro color rojo. Y ahora cuando pase el cursor sobre el enlace, se puede ver que el color de fondo cambia para leer. Bien. Ahora queremos crear una gruesa línea blanca que cruce el enlace. Y usaremos el pseudo elemento antes para eso. Por lo que voy a ir a mi CSS y decir un colon antes. Y voy a vaciar el contenido. Entonces voy a hacer el color de fondo blanco. Entonces diré top 0, izquierda 0 también. Después ancho 100%, y altura 50 píxeles, luego posiciona absoluta. Y luego cuando le echamos un vistazo, se puede ver que tiene un fondo blanco ocupando todo el ancho del enlace y teniendo un alto de 50 píxeles. Ahora, queremos moverlo a la izquierda fuera del enlace para que cuando pase el cursor sobre él, se mueva de izquierda a derecha. Entonces iré aquí mismo y agregaré transformada, traduciré X menos 100%. Y ahora se puede ver que se traduce fuera del enlace a la izquierda por una distancia igual al 100% de su ancho. A continuación, quiero rotarlo 45 grados porque está girado y yo demo. Por lo que iré aquí mismo y añadiré otra función de transformación que es girar 45 grados. Y ahora puedes ver que está rotado. Bien. Ahora queremos que se mueva a la derecha todo el camino a través del enlace cuando pasemos el cursor sobre él. Y esto se puede hacer, no hay problema. Por lo que iré a mi CSS y estamos flotando sobre el enlace. Quiero hacer algunos cambios sucedieron al pseudo elemento antes. Añadiré transformar traducir X 100% para que se mueva a la derecha por el 100% de su ancho. Después rota 45 grados. Por lo que permanecerá girado durante el movimiento. Y ahora cuando pase el cursor sobre el enlace, se puede ver que el pseudo elemento antes se mueve de izquierda a derecha pasando por el enlace. Pero aún tenemos un pequeño problema. Y eso es deshacerse del pseudo elemento fuera del enlace. Podemos solucionar eso no hay problema yendo al selector de etiquetas de anclaje y agregando desbordamiento oculto para que cualquier cosa fuera de él se oculte. Y ahora cuando pase el cursor sobre el enlace, se puede ver que estamos obteniendo el efecto exacto que queremos. 20. 22: efecto de botones creativos: Hola a todos. En esta lección, vamos a crear este bonito efecto hover. Estaremos utilizando tanto los pseudo elementos antes como el después en este ejemplo. Entonces veamos cómo podemos hacer eso. Bueno, antes que nada, voy a empezar aquí mismo en el HTML, y voy a añadir una etiqueta de ancla. Y sólo di hochame. Entonces necesitamos ir a nuestro CSS y agregar algunos estilos. Por lo que apuntaré a la etiqueta de anclaje. Entonces añadiré texto, decoración. Ninguno. Color de fondo. Este bonito color gris oscuro. Font-familia. San Serif. Tamaño de fuente 40 pixels, borde. Para píxeles, color gris sólido y oscuro. Entonces añadiré relleno, 40 píxeles de arriba e abajo y 80 píxeles de izquierda y derecha. Y por último, sumaré posición relativa. Bien. Ahora empecemos a trabajar en los pseudo elementos antes y después. Crearé los pseudo elementos antes para nuestro enlace. Y voy a decir contenido. Después me pasan las palabras, luego posicionarme absoluta, arriba, 0, izquierda, 0, altura, 100%, ancho, 100% también. Entonces color de fondo. Este bonito color amarillo. Entonces colorea nuestro color gris oscuro. Y ahora necesitamos centrar el contenido dentro de ella. Y lo haremos usando Flexbox. Por lo que añadiré flex display, luego justificaré el centro de contenido con el fin de centrarlo horizontalmente. Después alinear elementos centro también con el fin de ascender al contenido verticalmente. Y por último, iré y agregaré transición o 0.5 segundos gris. Por lo que ahora tenemos el pseudo elemento antes con este fondo amarillo establecido en la parte superior de nuestro enlace. Ahora vamos a trabajar en el pseudo elemento después. Simplemente copiaré todo eso. Vuelve a pegarlo. Y cambiaré antes a después. Y ahora el elemento after 0 está sentado en la parte superior del antes. ¿ De acuerdo? Voy a ir justo aquí en el pseudo elemento después y voy a añadir transformar traducir. Y quiero traducirlo por menos 100% horizontalmente. Por lo que se moverá a la izquierda. Y lo traduciré al 100% verticalmente. Por lo que se moverá al fondo. Por lo que ahora debe mover el 100% de su ancho a la izquierda y el 100% de su altura a la parte inferior. Al igual que vemos aquí. Cuadrícula. Ahora tenemos los pseudo elementos antes sentados en la parte superior del enlace. Y el pseudo elemento después se encuentra en su nueva posición. Sigamos moviéndonos en rondando. Quiero antes de un pseudo elemento para moverse a la esquina superior derecha fuera del enlace. Y quiero que el pseudo elemento después ocupe su lugar. Esto es fácil de hacer. Por lo que voy a ir justo aquí. Y cuando pase el cursor sobre el enlace, quiero hacer que pasen algunos cambios al pseudo elemento antes. Voy a añadir transformar traducir. Yo quería moverme a la derecha. Por lo que sumaré el 100% de su ancho a la derecha. Y quiero que se mueva a la cima. Por lo que sumaré menos 100% de su altura a la parte superior. Y así, al pasar el cursor sobre el enlace, se puede ver que el pseudo elemento antes se mueve a esta nueva posición. Ahora, queremos hacer que el pseudo elemento después tome su lugar. Esto será muy fácil de hacer. Simplemente copiaré eso y cambiaré antes a después. Entonces haré tanto el Traducir X como el translate y 0 para que vuelva a su posición original. Y ahora cuando pase el cursor sobre el enlace, se puede ver el pseudo elemento antes deja su lugar para el pseudo elemento después. Ahora bien, si te das cuenta, puedes ver que aún tenemos el color azul del enlace detrás del pseudo elemento antes. Y aparece cuando pasamos el rato. Para que podamos deshacernos de eso. No hay problema simplemente volviendo a los enlaces, la conferencia y agregando color transparente para que desaparezca. Y añadiré desbordamiento oculto para que los elementos no aparezcan fuera del enlace. Y ahora cuando pasamos el cursor sobre el enlace, puedes ver que todo luce exactamente como esperábamos. 21. 21 - efecto creativo de texto: Hola a todos. Bienvenidos a esta lección del curso. En esta lección, crearemos este bonito efecto hover y usaremos el pseudo elemento antes para crearlo. Entonces veamos cómo podemos hacer eso. Empezaré aquí en mi HTML agregando un enlace. Y yo solo diré que me cierren. Entonces iré a mi CSS para agregar algunos estilos. Voy a apuntar al enlace. Entonces añadiré texto, decoración. Ninguno. Color. Este bonito color gris oscuro. Familia de fuentes. Sans serif. Tamaño de fuente 40 píxeles, borde, tres píxeles, sólido. Y nuestro color gris oscuro. Entonces añadiré relleno, 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces sumaré transición o 0.5 segundos. Y por último, posición relativa. Y ahora nuestro enlace se ve mucho mejor. Bien. Ahora utilizaremos el pseudo elemento antes para crear nuestro efecto. Entonces iré aquí mismo y le añadiré un colon antes. Y voy a añadir contenido. Colócame. Después posición absoluta, arriba, 0, izquierda 0, luego altura, 100%, ancho, 100% también. Por lo que ocupa todo el ancho y la altura del enlace. Entonces añadiré color de fondo, nuestro color gris oscuro. Y por último, color blanco. Y ahora se puede ver el pseudo elemento antes se establece en la parte superior del enlace con su color de fondo gris oscuro. Por lo que ahora queremos centrar el contenido dentro del pseudo elemento antes, y usaremos flexbox para hacerlo. Por lo que iré aquí mismo y agregaré display. Flex, luego justificar el contenido y alinear elementos centro también. Genial, Así que a continuación haremos algún trabajo en nuestro afecto. La idea detrás es que vamos a hacer que este fondo gris oscuro escala hasta cerca de cinco veces su tamaño original. Por lo que será muy enorme. Y haremos su opacidad 0 para que sea transparente. Y cuando pasemos el cursor sobre el enlace, haremos que vuelva a escalar a uno, y la opacidad cambiará a 1 también, por lo que será visible. Hagamos eso. Iré aquí mismo dentro del pseudo elemento antes, y añadiré escala de transformación cinco veces. Y se puede ver que se escala a cinco veces su tamaño y es enorme. Ahora, quiero que se oculte fuera del enlace. Por lo que iré aquí mismo dentro del selector de enlaces. Y voy a añadir desbordamiento oculto. Y ahora se pueden ver las partes del pseudo elemento antes fuera del enlace u oculto. Impresionante, Sigamos adelante. Ahora. Tenemos que hacerlos ante pseudo elemento transparentes. Por lo que iré aquí mismo y le añadiré opacidad 0. Y ahora puedes ver que está oculto. Entonces sumaré transición, todos ceros, cinco segundos. Ahora estoy rondando. Queremos hacer de nuevo una escala del pseudo elemento. Y también queremos hacerla visible haciéndome una opacidad. Entonces hagámoslo. Voy a añadir un colon, hover, colon antes. Y dentro de ella, añadiré transformación, escala uno, luego opacidad uno. Y ahora cuando voy a pasar el cursor sobre el enlace, se puede ver el pseudo elemento antes que aparece y se escala hasta su tamaño original, dándonos el efecto que queríamos. 22. 22: efecto swapping circular: Hola a todos. Bienvenidos a esta nueva lección en el curso. En esta lección vamos a crear este gran efecto de botón de mirar. Para que veas cuando paso el cursor sobre el botón, un fondo rojo rellena el botón de arriba a abajo. Entonces, vamos a averiguar cómo podemos hacer eso. En primer lugar, voy a ir a clasificar aquí en mi HTML y añadir un botón y darle una clase de btn. Y voy a decir sólo botón. Entonces iré a mi CSS para agregar algunos estilos a este botón. Empezaré por apuntar el botón usando la clase que agregamos. Y seguiré agregando un borde, dos píxeles, sólido. Y ahora usaremos el color jitomate. Entonces eliminaré el fondo agregando fondo. Ninguno. Entonces le agregaremos color. Tomate nuevamente para el texto. Después relleno 20 píxeles de arriba e abajo y 40 píxeles de izquierda y derecha. Entonces necesitamos aumentar un poco el tamaño de la fuente. Por lo que voy a añadir font-size 25 pixels. Entonces el texto transforma el puntero del cursor en mayúsculas para hacer que el cursor se convierta en una mano se situaría sobre el botón. Después transición o 0.5 segundos porque vamos a cambiar el color del texto cuando pasemos el cursor sobre el botón. Y necesitamos que eso suceda sin problemas. Ahora, ¿verdad? Ahora tenemos nuestro botón sentado aquí y ya se ve impresionante. Entonces vamos a trabajar en el efecto que se cierne. Utilizaremos el pseudo elemento antes para crear el fondo rojo. Entonces iré aquí mismo y diré colon BTN antes. Entonces dentro de ella, añadiré contenido vacío porque no queremos ningún texto ni nada por el estilo. Entonces posición absoluta, superior, 0, izquierda, 0, ancho, 100%, altura, 100%. Y vamos a añadir fondo, jitomate. De acuerdo, así que aquí se puede ver el fondo rojo está sentado encima del botón, ocupando todo el ancho y la altura del botón. Y está ocultando el texto debajo de él. Entonces arreglemos eso yendo aquí mismo dentro del fondo rojo y agregando índice Z menos uno. Ahora el botón está sentado encima del fondo rojo, pero no lo podemos ver ahora porque tiene el mismo color que el fondo. Entonces si subimos aquí dentro del selector de botones y cambiamos el color a blanco, por ejemplo. Ya puedes ver el texto ahora aparece. Muy bien, Volvamos a ponerlo de nuevo a tomate. Ahora, sigamos trabajando en el fondo rojo. Si vamos a nuestra demo y echamos un vistazo rápido, se puede ver que estoy rondando. El fondo rojo obtiene un radio de borde desde las esquinas inferior izquierda e inferior derecha. Entonces volvamos atrás y añadamos eso a nuestro botón. Iré aquí mismo dentro del pseudo elemento antes. Y sumaré radio de frontera 0, 050%, y 50 por ciento. Entonces 0 de las esquinas superior izquierda y superior derecha, porque no queremos ninguna curva en esas. Y 50 por ciento de abajo a la izquierda y abajo a la derecha. Y aquí se puede ver el fondo rojo ahora tiene esas curvas en la parte inferior. Enfriar. Ahora vamos a trabajar en el efecto que se cierne. Lo que haremos es establecer la altura del fondo rojo en 0. Después al pasar el cursor sobre el botón, haremos que aumente su altura para que se llene y cubra el botón. Entonces vamos a ocuparnos de eso. Iré aquí mismo dentro del fondo rojo, y haré la altura 0% en vez de 100%. Por lo que ahora se puede ver el fondo rojo ya no es visible. Entonces vamos a ir aquí y decir BTN en el colon hover antes. Y volveremos a hacer que la altura sea 100%. Entonces para que este cambio de altura ocurra sin problemas, subiré aquí y agregaré transición 0, 0, 0.5 segundos. Bien. Por lo que ahora cuando voy y pase el cursor sobre el botón, puede ver que la altura de fondo rojo se vuelve 100% de nuevo. Pero claro, por el radio fronterizo que le agregamos, No está cubriendo todo el botón. Por lo que necesitamos aumentar su altura y hacerlo más del 100% en el hovering. Entonces vayamos aquí y cambiemos esto 100% a, digamos 190%. Y ahora cuando voy y vuelvo a pasar el cursor sobre el botón, se puede ver el fondo rojo cubre el botón. Pero debido a que ahora su altura es 100% del sitio de botones, está desbordando. Nosotros podemos ocuparnos de eso. No hay problema entrando aquí mismo dentro del selector de botones y agregando desbordamiento oculto para evitar cualquier desbordamiento del botón. Impresionante, Ahora se ve exactamente como queremos. Pero nos queda una cosa, que es hacer que el color del texto cambie a blanco al pasar el cursor sobre el botón. Por lo que iré aquí mismo y agregaré btn. Y en el hover. Voy a añadir color, blanco. Excelente. Ahora puedes ver que tenemos el mismo efecto que queremos, y se ve genial. Ahora que hemos aprendido el concepto o la idea detrás de todo esto, podemos manipular este efecto y hacer que suceda desde una dirección diferente, de abajo hacia arriba por ejemplo. Entonces todo lo que necesitaremos hacer es cambiar la pestaña aquí mismo a abajo para que crezca hacia arriba o se llene desde el mapa inferior para pestaña. Y en este caso, también necesitaremos cambiar el radio del borde y poner las curvas en la velocidad superior y en las esquinas superiores izquierdas. Entonces diremos 50 por ciento y 50 por ciento aquí en lugar de 00. Y eso es todo lo que tenemos que hacer. Ahora el efecto ocurre de arriba a abajo. Justo así. 23. 23 – efecto creativo: Hola a todos. En esta lección vamos a crear este botón efecto de desplazamiento. Entonces cuando paso el cursor sobre el botón, puedes ver que tenemos este efecto donde primero un fondo verde cubre el botón y luego uno rojo los cubre todos. Entonces vamos a averiguarlo y hagámoslo. Empezaré aquí en mi HTML agregando una etiqueta ancla y solo digo botón. Entonces iré a mi CSS para agregar algunos estilos. Voy a apuntar al enlace. Agrega relleno, 20 píxeles de arriba e abajo, y 40 píxeles de izquierda y derecha. Entonces añadiré decoración de texto. Ninguno. Transformación de texto. mayúsculas, color de fondo, un color amarillo, luego color blanco. Y queremos que el font-size sea un poco más grande. Por lo que voy a añadir font-size 20 pixels. También queremos un poco de espaciado entre las letras. Por lo que añadiré espaciado entre letras a los píxeles. Y por último, posición relativa. Ahora nuestro botón se ve mucho mejor. A continuación, queremos crear el fondo verde que cubra el botón cuando pasemos el cursor sobre él. Por lo que iré aquí mismo y crearé un pseudo elemento antes para nuestra etiqueta de ancla. Y dentro de ella, agregaré Contenido. Botón, posición, absoluto, superior, 0, izquierda 0. Y debido a que tiene el mismo ancho y altura que el botón, agregaremos ancho 100% y altura 100%. Entonces le agregaremos color de fondo. Este color verde. Ahí vamos. El fondo verde ahora está sentado justo encima de nuestro botón. A continuación, necesitamos centrar este texto horizontal y verticalmente dentro del botón. Y lo haremos usando Flexbox. Por lo que iré aquí mismo y agregaré display. Flex. Entonces justifica el centro de contenido para centrarlo horizontalmente. Y alinear los artículos centran también para centrarlo verticalmente. Muy bien, para hacer el efecto que queremos, utilizaremos la función de rotación, que nos permitirá rotar el fondo verde sobre su eje x. Entonces repasemos lo que la función de rotación x puede hacer por nosotros. Iré aquí mismo y añadiré Transform. Gire X 60 grados. Por lo que se puede ver que el fondo verde ahora se gira a lo largo de su eje horizontal en 60 grados. Y está haciendo esto desde su punto central. Porque recuerda, el origen de la transformación es centro por defecto, lo que significa que cualquier acción de transformación que hagas sobre el elemento tomará como referencia el punto central. Pero en esta situación, queremos cambiar eso. Queremos que el fondo verde gire en su punto central superior. Por lo que iré aquí mismo y agregaré top de origen de transformación. Y ahora se puede ver que está tomando el punto central superior como referencia al girar. Bien. Ahora que revisamos cómo funciona la función rotar x, rotaré el fondo verde 270 grados, no 60 grados. Por lo que cambiaré este 60 a 270. Ahora puedes ver que ya no es visible ya que ahora se ha girado y se sienta detrás del botón. Ahora estoy rondando sobre el enlace. Lo haré para que el Rotar se restablezca de nuevo a 0 para que cubra el botón. Entonces iré aquí mismo. Y al pasar el cursor sobre la etiqueta de ancla, haré que pasen algunos cambios al pseudo elemento antes. Añadiré Transformar, Girar X 0. Entonces queremos que esto suceda sin problemas. Por lo que subiré aquí y agregaré transición, todos 0.5 segundos. Y ahora cuando voy y pase el cursor sobre el botón, se puede ver que el fondo verde gira y cubre el botón de la manera que queremos. Enfriar. Ahora, después de crear el fondo verde, queríamos, es hora de crear el rojo. Esto será bastante fácil. Simplemente copiamos todo el pseudo elemento antes. Vuelve a pegarlo. Y sólo cambiaremos el color de fondo a rojo. Y queremos que rote después del verde. Por lo que vamos a añadir retardo de transición 0.25 segundos. Entonces bajaré aquí. Y voy a copiar esto y cambiar antes a después. Para que cuando pasemos el cursor sobre el botón, también aparecerá el fondo rojo. Por lo que ahora cuando voy y pase el cursor sobre el botón, se puede ver el fondo verde aparece. Y después de eso, el rojo hace dos, dándonos el efecto que queremos. Y podemos cambiar fácilmente este efecto si queremos. Entonces, por ejemplo, digamos que quiero que el fondo rojo gire en su punto central inferior, no en la parte superior. Lo que podemos hacer es simplemente ir y cambiar el origen de la transformación aquí sobre el fondo rojo a abajo en lugar de tabulador. Y como puedes ver, esto lo hace girar en su borde inferior, dándonos un efecto diferente. 24. 25: intercambios de dos lado de izquierda a la derecha: Hola a todos. Bienvenido a esta nueva lección en el curso donde vamos a crear este bonito efecto que se cierne sobre este botón. Entonces si echamos un vistazo de cerca al fondo que se desvanece al rango aquí, puede ver cuatro cosas están pasando al mismo tiempo, se mueve hacia la derecha mientras gira sobre su eje y, su opacidad está disminuyendo y su tamaño es cada vez más pequeño todo al mismo tiempo. En tanto, el fondo que entra tiene un efecto inverso. Se incrementa la opacidad en. También se hace más grande, girando a la derecha para tomar el primer lugar fondos. Bueno, eso puede sonar confuso, pero te lo prometo, te lo encontrarás fácil una vez que empecemos a crearlo. Entonces hagámoslo realmente. Voy a ir justo aquí en mi HTML y voy a añadir una etiqueta de ancla y sólo decir botón. Entonces iré a mi CSS para darle estilo a eso. Voy a apuntar al enlace. Entonces añadiré relleno, 20 píxeles de arriba e abajo, y 40 píxeles de izquierda y derecha. Entonces voy a añadir transformación de texto. Mayúscula. Decoración de texto. Ninguno. Espaciado entre letras. Para píxeles. Color. Este color amarillo. Fronteriza. Tres píxeles, sólidos. Y nuestro color amarillo. El tamaño de la fuente, 30 píxeles. Y por último, posición. Relativo. Bien. Ahora puedes ver que tenemos nuestro botón y se ve bastante bien. A continuación necesitamos crear el fondo que se desvanezca a la derecha y el que ocupa su lugar. Empezaremos con las ventajas de una y la crearemos usando el pseudo elemento antes. Entonces iré aquí mismo y diré un colon antes. Y dentro de ella, añadiré botón Contenido porque queríamos tener el botón palabra luego posicionar absoluto, top 0, left 0. Y debido a que toma el mismo ancho y alto que el botón original, agregaré ancho 100% y altura 100%. Entonces le añadiré un color de fondo. Este color gris oscuro, luego colorea nuestro color amarillo. Impresionante. Ahora puedes ver tenemos el fondo gris oscuro y está colocado en la parte superior del botón ocupando todo el ancho y la altura. Pero se puede ver que el botón de palabra no está centrado horizontal y verticalmente. Entonces vamos a ocuparnos de eso. centraremos usando Flexbox. Entonces iré aquí mismo y agregaré flex de visualización, luego justificaré el centro de contenido para centrarlo horizontalmente. Y alinear artículos centro también para centrarlo verticalmente, Por supuesto. Está bien, Ahí vamos. A continuación, necesitamos trabajar en el efecto hover. Si recuerdas, este fondo debe moverse hacia la derecha, girar alrededor del eje Y, se hace más pequeño y ser transparente todo al mismo tiempo. Entonces hagámoslo. Iré aquí mismo y diré que un colón se cierne. Quiero hacer algunos cambios sucedieron al pseudo elemento antes. Voy a sumar izquierda 100%. Y para que este cambio de posición suceda sin problemas, subiré aquí dentro del pseudo elemento antes y sumaré transición, todos 0.5 segundos. Entonces ahora cuando vamos y pasemos el cursor sobre el botón, el fondo gris oscuro debería moverse hacia la derecha, así. Y para que se haga más pequeño y rote en su eje Y, iré aquí y añadiré la escala de transformación 0 para hacerla más pequeña hasta que se desvanezca. Y rotar y 360 grados para que gire sobre su eje y. Por lo que ahora cuando voy al navegador y paso el cursor sobre el botón, puedes ver que gira en desaparece mientras se mueve hacia la derecha, dándonos este bonito efecto. Y para hacer que disminuya su opacidad, bueno, podemos ir aquí y agregar opacidad 0. Y ahí vamos. Aquí está el efecto exacto que queremos sobre el primer fondo. A continuación trabajaremos en el segundo fondo que viene de izquierda a derecha. Utilizaremos el pseudo elemento after en este caso. Entonces copiaré todo eso, lo pegaré, y cambiaré antes a después. Entonces necesitamos que su posición original esté a la izquierda. Entonces cambiaremos a la izquierda, justo aquí a menos 100%. Ahora se puede ver que se sienta en el lado izquierdo de nuestro botón. Entonces queremos que sea invisible y lo haremos para que cuando pasemos sobre él, sea visible y movido hacia la derecha y rote. Entonces básicamente, vamos a revertir lo que hicimos en el primero. Entonces para hacer eso, iré aquí mismo y añadiré transformada, escalar 0 y rotar y 0 grados también. También añadiremos opacidad 0. Y ahora al pasar el cursor sobre el enlace, vamos a añadir algunos cambios al pseudo elemento después. Vamos a sumar izquierda 0 para posicionarlo en la parte superior de nuestro enlace. Y vamos a añadir transformar, escalar uno y rotar. ¿Por qué? 360 grados para que se haga más grande y rote al mismo tiempo. También vamos a añadir opacidad uno para que aparezca y tener este bonito desvanecido en efecto. Entonces ahora vamos a pasar el cursor sobre el botón y se puede ver el primer fondo se mueve a la derecha y el segundo toma su lugar. Pero queremos hacer invisible el texto. No queremos que el botón de palabra aparezca en el botón mismo. Por lo que volveré al selector de enlaces y cambiaré el color a transparente en lugar de este color. Y ahora ya se puede ver que el color es invisible. Y tenemos el efecto exacto que queremos. 25. 26: 3 círculos creativos para el botón de fondo: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones CSS. En esta lección, vamos a crear este bonito efecto de botón flotante. Para que se pueda ver cuando pase el cursor sobre el enlace, entran tres círculos para encubrir el enlace. Después aparece un fondo por detrás de ellos y cubre todo el eslabón, completando todo el efecto. Entonces veamos cómo podemos hacer eso. Empezaré aquí en mi HTML agregando un enlace. Y dentro de ella, añadiré un lapso y lo dejaré vacío. Veremos por qué necesitamos a este líder de banda en la lección. Entonces solo diré, colóqueme. Ahora mismo. Iré a mi CSS. Voy a apuntar al enlace y añadir ancho 220 píxeles, altura 80 píxeles. De acuerdo, Ahora voy a añadir color. Este color amarillo. Color de fondo, transparente, ya que no queremos ningún color de fondo. Tamaño de fuente, 26 pixels, text-decoración. Ninguno para quitar los subrayados. Transformación de texto. Mayúsculas para hacer mayúsculas todas las letras. Entonces para centrar el texto horizontal y verticalmente, agregaremos text-align, center, y line height. 80 píxeles. Enfriar. Ahora por fin, voy a sumar transición. Los cinco segundos. Y posición. Relativo. Impresionante. Ahora trabajemos en crear los círculos que entran de izquierda y derecha. Cuando pasemos el cursor sobre el enlace, utilizaremos los pseudo elementos antes y después para hacerlos. Entonces iré aquí mismo y diré un colon antes, luego coma y un colon después. Y dentro de eso, agregaré contenido. Cuerdas vacías. Posición, absoluta. Top, 50 por ciento. Ancho, 20 píxeles, altura, 20 píxeles también. Color de fondo, nuestro color amarillo. Y con el fin de hacerlos círculos, sumaré radio fronterizo, 50 por ciento. De acuerdo, así que ahora puedes ver tenemos los dos círculos. El de la izquierda es el pseudo elemento antes y el de la derecha es el pseudo elemento después. Y debido a que dijimos que son propiedad superior al 50 por ciento, su borde superior se sienta en 50 por ciento desde la parte superior del enlace. Pero queremos que su punto central esté al 50 por ciento desde la parte superior del enlace, no sus bordes superiores. Entonces lo que podemos hacer es que los podemos traducir hacia arriba a la mitad de su altura. Esto los desplazará un poco hacia la parte superior y los sinterizará adecuadamente. Por lo que volveré a mi CSS y dentro de los pseudo elementos antes y después, añadiré transformada, traduciré Y. fin de desplazarlos hacia la parte superior, sumaré menos 50 por ciento. Y por último, voy a añadir una transición, todos 0.3 segundos. Por lo que ahora se puede ver que los círculos antes y después están perfectamente centrados verticalmente dentro del enlace. Pero también se puede ver que se ven tan bien que antes pseudo elemento está cubriendo la letra H y el elemento after está casi tocando la letra E. Y esto se debe a que especifican cualquier posición horizontal para ellos. Por lo que sólo están sentados antes y después del texto del enlace. Entonces vamos a establecer una posición horizontal para ellos. Voy a apuntar solo al pseudo elemento antes. Y sumaré izquierda 0. Esto se posicionará en, en el lado izquierdo del propio enlace, no en el texto dentro del enlace. Al igual que así. Entonces me apuntaré a la tarde y añadiré escritura 0 también. Y esto posicionará el siguiente círculo a la derecha de la longitud esta vez. Está bien, ahora, si recuerdas, cuando pasamos por encima del enlace, había tres círculos, no tan mal. En realidad son cuatro, pero dos de ellos se sientan uno encima del otro y aparecen como un círculo. Ya veremos cómo hacer eso. Para hacer los otros dos círculos, utilizaremos la propiedad box shadow, que nos permite añadir una sombra a los elementos HTML. Entonces veamos cómo podemos crear círculos idénticos a los que ya tenemos usando la propiedad box shadow. En primer lugar, comenzaré con el pseudo elemento antes. Iré aquí mismo y agregaré box-sombra. Y la caja-sombra acepta cuatro valores. El primer valor es la distancia horizontal entre el elemento y la sombra que estamos agregando. Entonces si agregamos 10 píxeles, la sombra será de 10 píxeles del elemento a la derecha. Quiero que la sombra sea de 100 píxeles del pseudo elemento antes a la izquierda. Por lo que añadiré menos 100 píxeles a continuación, el segundo valor de la propiedad box-shadow es la distancia vertical entre el elemento y la sombra. Y queremos que el elemento y la sombra estén en el mismo plano. Por lo que estableceremos la distancia vertical en 0. El tercer valor de la propiedad box shadow es lo borrosa que será la sombra. Pero en realidad no queremos que el nuestro sea borroso. Queremos que sea tan afilado como el pseudo elemento antes, por lo que lo pondremos en 0 también. Y por último, el último valor de la propiedad box-shadow es el color de la sombra. Pongámoslo a verde por ahora. Por lo que ahora cuando voy a recargar la página, se puede ver un nuevo círculo verde ha aparecido a la izquierda del pseudo elemento antes. Y la distancia horizontal entre ellos es de 100 píxeles, mientras que la distancia vertical es de 0. Por lo que se sientan a nivel el uno con el otro. Y se puede ver que es nítido porque configuramos el valor de desenfoque para ello en 0. Está bien, haré lo mismo por el pseudo elemento después, pero esta vez haré que la sombra se siente a la derecha. Por lo que voy a copiar esta caja. Propiedad Shadow. Pegarlo dentro del pseudo elemento después y encadenar minos1 100 pixels a 100 pixels. Por lo que será a la derecha, no a la izquierda. Y también cambiaré el color a azul. Enfriar. Entonces ahora tenemos cuatro círculos. Los dos de la izquierda están ahí ante pseudo elemento y su sombra, mientras que los dos de la derecha son el pseudo elemento después y su sombra. Ahora, vamos a trabajar en el efecto hover. Voy a ir aquí mismo y decir un colon, flotar colon antes. Voy a sumar izquierda 50%. Por lo que esto hará que el pseudo elemento antes se mueva a la derecha un 50% del ancho de longitud y su sombra por supuesto, se mueva con él. Entonces ahora si paso el cursor sobre el enlace, se puede ver el pseudo elemento antes se mueve junto con su sombra. Pero al flotar, no queremos que esa sombra mantenga la misma distancia de 100 píxeles desde el lado izquierdo. Queremos que se mueva hacia el lado derecho, digamos 30 píxeles. Podemos manejar eso realmente fácilmente yendo aquí mismo y agregando sombra de caja, 30 píxeles en lugar de menos 100, luego 0, 0, y verde. Por lo que ahora cuando pase el cursor sobre el enlace, puede ver la sombra verde ahora se mueve a la derecha de los pseudo elementos antes círculo por 30 píxeles. Muy bien, hagamos lo mismo para el pseudo elemento after. Copiaré todo este bloque de código, lo pegaré, y cambiaré antes a después. Entonces cambiaré de izquierda a derecha. Por lo que se moverá a la izquierda un 50% de los anchos de enlace junto con su sombra azul. Pero entonces queremos que la sombra se mueva a los elementos del lado izquierdo por 30 píxeles. Entonces vamos a cambiar 30 píxeles aquí a menos 30 píxeles, y finalmente, de verde a azul. Y ahora cuando paso el cursor sobre el enlace, se puede ver el siguiente círculo se mueve hacia la izquierda y es sombra azul también se mueve hasta que llega a un punto a la izquierda del elemento por 30 píxeles. Impresionante. Casi tenemos el efecto por el que vas. Pero queda una cosa. Queremos que los pseudo elementos antes y después terminen en la misma posición para que se muestren uno encima del otro y aparezcan como un círculo, dejándonos sólo tres círculos. Ya ves cuando dije izquierda a 50 por ciento aquí, significa que el pseudo elemento antes se moverá hasta que su borde izquierdo esté exactamente en 50 por ciento. Pero eso no queremos. Queremos que esté centrado exactamente en el 50 por ciento de los anchos de enlace. Entonces lo que podemos hacer es que podemos traducirlo de vuelta a la izquierda por la mitad de su ancho. Entonces iré aquí mismo y agregaré transformada, traduciré x menos 50%. Y debido a que ponemos translate y arriba aquí, a menos 50% está bien, necesitamos decirle al navegador que queremos que se quede menos 50%. Entonces bajaré de nuevo y añadiré Traducir Y menos 50% Entonces haré lo mismo para el pseudo elemento después. Lo desplazaré de nuevo a la derecha por la mitad de su ancho para que esté en la misma posición que la anterior. Por lo que voy a añadir transformar traducir X 50 por ciento, que lo desplazará a la derecha en un 50% de su ancho y traduciré y menos 50%. Entonces ahora cuando voy a pasar el rato sobre el enlace, se puede ver los pseudo elementos antes y después ahora están sentados uno encima del otro y se han convertido en un círculo. Ahora, vamos a cambiar el color de los círculos de sombra a amarillo también. De acuerdo, ahora trabajaremos sobre el fondo amarillo. Usaré el lapso que agregamos dentro de nuestro enlace para crearlo. Por lo que apuntaré el lapso en la posición absoluta, superior , 0, izquierda, 0, ancho , 100%, altura, 100% también. Y fondo de color. Nuestro color amarillo. Y radio de borde, ocho píxeles. Por lo que ahora se puede ver el fondo amarillo se sienta en la parte superior del enlace y lo está encubriendo. Entonces sigamos adelante. Regresaré aquí y añadiré transformación, escala 0, transición 0.3 segundos. Entonces bajaré aquí. Y al pasar el cursor sobre el enlace, haré que pasen algunos cambios al lapso. Añadiré escala de transformación uno para que vuelva a ser más grande. Y luego retardo de transición 0.4 segundos. Por lo que esperará hasta que entren los círculos. Entonces ahora cuando voy a pasar el rato sobre el enlace, puede ver que el fondo amarillo se hace más grande después de que los círculos terminaron de moverse. Ahora, vamos a cambiar el color del enlace al pasar el cursor. Volveré aquí y diré un on rondando. Y voy a añadir color. Este color gris oscuro y retardo de transición, también 0.4 segundos. Por lo que ahora puedes ver cuando floto, no pasa nada porque el fondo amarillo está encubriendo el texto. Entonces lo que podemos hacer es subir aquí dentro del selector span y agregar z-index min.1 para que el texto aparezca delante del fondo. Y también lo haremos para los pseudo elementos antes y después. Por lo que ahora cuando pasamos el cursor, se puede ver el texto ahora aparece frente al fondo amarillo. Y por último, una cosa ojo izquierdo irá justo aquí dentro del selector de pseudo elementos antes y después. Y sumaré opacidad 0. Entonces cuando se cierren sobre el enlace, haré que su opacidad vuelva a uno. Entonces ahora han desaparecido. Pero cuando voy a pasar el rato sobre el enlace, vuelven a aparecer. Entonces el fondo amarillo aparece después de ellos, dándonos exactamente el efecto que queremos. 26. 27 - efecto de transición creativo: Hola a todos, bienvenidos a esta nueva lección en el curso de animaciones CSS. En esta lección, vamos a crear este bonito efecto de botón hover. Entonces si miras el botón y ves que aquí hay dos fondos, el azul y el rojo. El azul se desplaza un poco hacia la parte superior izquierda, mientras que el rojo se desplaza hacia la tasa inferior. Y al pasar el cursor sobre el enlace, se puede ver tanto una perspectiva girada en una perspectiva 3D en el eje x. Entonces vamos a crear eso juntos. Empezaré aquí en mi HTML agregando una etiqueta ancla. Y voy a decir sólo botón efecto hover. Entonces iré a mi CSS. Y voy a apuntar a la etiqueta de anclaje y añadir ancho. 300 pixeles. Altura, 60 pixeles. Decoración de texto. Ninguno. Transformación de texto. En mayúsculas, fondo. Transparente porque usaremos los pseudo elementos antes y después para crear nuestros fondos. Entonces para centrar el texto dentro del enlace horizontal y verticalmente, diré alinear texto, centro y altura de línea. 60 pixeles. Aún más por hacerlo, añadiré peso fuente, negrita, espaciado entre letras a píxeles, luego posición, relativa. Y finalmente transición o 0.2 segundos. Enfriar. Por lo que ahora hemos terminado de diseñar nuestro botón. Trabajemos en crear los dos fondos. Iré aquí mismo y diré un colon antes. Y voy a añadir contenido. Cuerdas vacías. Posición absoluta, arriba, 0, izquierda 0. Y queremos que el fondo tenga el mismo ancho y altura que el enlace. Por lo que sumaré ancho, 100%. Altura. Entonces color de fondo. Este bonito color azul claro. Por lo que ahora se puede ver el fondo azul está ocupando todo el ancho y la altura del enlace y cubriéndolo. Entonces volvamos atrás y hagamos visible el texto del enlace. Haré eso yendo aquí mismo y agregando z-index menos 1. Está bien, ahora, si recuerdas, el fondo azul fue desplazado un poco a la esquina superior izquierda de nuestro enlace. Hagámoslo. Iré aquí mismo y cambiaré el valor superior a menos tres píxeles en lugar de 0, para que se desplace un poco a la parte superior. Y cambiaré de izquierda a menos tres píxeles también. Por lo que se desplazará hacia la izquierda. Enfriar. Ahora vamos a crear el fondo rojo. Voy a copiar todo esto. Pégalo de nuevo y cámbielo antes a después. Entonces queremos que se desplace hacia abajo y hacia la derecha. Entonces en lugar de izquierda menos tres píxeles, lo cambiaré a tres píxeles y los 23 primeros píxeles también. Entonces cambiaré el color de fondo, por supuesto, a este color rojo claro. Y ahora se puede ver el fondo rojo está sentado encima del azul y cubriéndolo. Pero queremos que se mezclen entre sí. Podemos hacer eso fácilmente volviendo al selector antes y agregando mezcla, modo de mezcla, multiplicar. Y haremos lo mismo para el pseudo elemento después. Y cambiemos realmente el color del enlace a blanco en lugar de este feo color azul. Por lo que ahora se puede ver que los dos fondos se mezclan juntos y se ven mucho más bonitos. Y ahora tenemos que trabajar en el efecto que se cierne. En el hovering sobre el link. Queremos que los dos fondos roten sobre el eje x en un entorno 3D. Entonces para hacer eso, iré aquí mismo y diré que un colon se cierne. Un colon antes. Y primero moveremos el fondo azul hacia arriba por seis píxeles y cambiaremos su valor izquierdo a 0. Por lo que sumaré top menos seis pixeles a la izquierda 0. Entonces añadiré transformada. Y debido a que queremos que la rotación suceda en un entorno 3D, agregaré perspectiva 10000, luego giraré x 75 grados. Y para que el movimiento suceda sin problemas, subiré dentro del selector de pseudo elementos antes y añadiré transición 0, 0.2 segundos. Y ahora se puede ver cuando paso el cursor sobre el enlace, se puede ver el fondo azul está girando en un entorno 3D sobre el eje x, pero este no es el efecto que queremos. Está girando en su punto central, por lo que cubre las etiquetas, pero queremos que gire en su punto central superior. Por lo que volveré al selector de pseudoelementos antes y añadiré la parte superior de origen de transformación. Entonces ahora cuando vuelvo y flote, se puede ver que el fondo azul está girando en el eje x de la manera que queremos. Ahora, hagamos lo mismo con el fondo rojo. Copiaré esto, lo pegaré, y cambiaré antes a después. Después, sube a seis píxeles en lugar de menos 6 y gira x a menos 75 grados porque queremos que gire al revés. Y para que el movimiento suceda sin problemas, entraré dentro del pseudo elemento after y agregaré transición, todos ceros. Y por último, con el fin de hacer girar el fondo en su punto central inferior, añadiré fondo de origen de transformación. Y ahora cuando voy al enlace y flote, puedes ver que los dos fondos giran en el eje x, dándonos el efecto que queremos. Ahora bien, queda una cosa al rondar sobre el enlace. Queremos cambiar su color para que podamos verlo. Volveré a mi CSS y diré un color de dos puntos, este color gris oscuro. Y ahora puedes ver que finalmente estamos consiguiendo exactamente el efecto que vamos a conseguir. Y eso es muy bonito. 27. 28 – efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones CSS. En esta lección, vamos a crear este efecto de botón de desplazamiento. Se puede ver cuando paso el cursor sobre el botón, estas cuatro partes con fondo amarillo entran y cubren el botón. la misma hora, dándonos este bonito efecto. Utilizaremos los pseudo elementos antes y después para crear estas cuatro partes y añadiremos una posición diferente para cada parte. Entonces cuando pasemos el cursor sobre el enlace, las cuatro partes se moverán juntas para cubrir el enlace y darnos el bonito efecto. También vamos a jugar un poco y cambiar las cosas en nuestro código para conseguir algunos efectos más cool con la misma idea. Entonces empecemos a hacer eso. Empezaré aquí en mi HTML agregando una etiqueta ancla. Entonces dentro de ella, voy a añadir un lapso. Y sólo di hochame. Agregamos un lapso aquí dentro de la etiqueta de anclaje porque queremos crear cuatro partes del fondo amarillo que cubrirán el botón. Por lo que crearemos dos de ellos usando el pseudo elemento antes y después de la propia etiqueta ancla. Y los otros dos se crearán usando los pseudo elementos antes y después del lapso que acabamos de agregar. De acuerdo, vamos a nuestro CSS para empezar a crear el efecto que queremos. Empezaré por apuntar a la propia etiqueta de ancla para que se vea como queremos. Y voy a añadir decoración de texto. Ninguno. Transformación de texto. Mayúscula. Tamaño de fuente, 25 píxeles. Color. Este bonito color amarillo. Espaciado entre letras tres píxeles para obtener algunos espacios entre las letras. Después rellenando 25 píxeles de arriba e abajo, y 50 píxeles de izquierda y derecha, luego bordean tres píxeles, sólidos. Y nuestro color amarillo. Por lo que puedes ver nuestro botón se ve mucho más bonito. Sigamos adelante. Volveré dentro del enlace y agregaré transición 0, 0, 0.5 segundos. Y por último, posición relativa. De acuerdo, ahora trabajaremos en las cuatro partes del fondo amarillo que entran y tapan el enlace. Cuando pasemos el cursor sobre él, crearemos los dos primeros usando los pseudo elementos antes y después de la propia etiqueta de anclaje. Entonces iré aquí mismo y diré un colon antes. Entonces, añadiré coma. Y decir un colon después. Y añadiré contenido. Cuerdas vacías, posición, ancho absoluto, 25 por ciento. Por lo que el ancho de cada parte será del 25 por ciento de la etiqueta de anclaje. Y esto tiene sentido porque al combinar todas las cuatro partes, serán el 100% de la longitud, ancho, y lo cubrirán por completo. Entonces agregaremos altura, 100%. Color de fondo, nuestro color amarillo. Y para que el texto aparezca en la parte superior del fondo, vamos a añadir z-index negativo. Y por último, vamos a sumar transición 0, 0.5 segundos. Entonces ahora se puede ver que tenemos las dos partes, pero vamos a cambiar su posición ahora y darles la posición inicial que deberían tener antes de rondar. Entonces hagámoslo. Voy a apuntar sólo al pseudo elemento antes esta vez. Por lo que añadiré un colon antes. Y dentro de ella, sumaré top 0 y dejó negativo 25 por ciento. Por lo que ahora se puede ver el pseudo elemento antes movido a la izquierda de nuestro enlace, y esta es la posición en la que queremos que esté inicialmente. Cambiemos también la posición del pseudo elemento después. Volveremos a nuestro CSS y apuntado agregando dos puntos después. Y diremos top negativo 100% y dejó 25 por ciento. Por lo que ahora se puede ver el pseudo elemento después está sentado en la parte superior del botón porque lo movimos un 100% de la altura del botón a la parte superior. Y ahora se sienta en el 25 por ciento del ancho del botón desde la izquierda también. Ahora, cuando pasemos el cursor sobre el enlace, queremos que se muevan de su posición a una posición que les haga cubrir la mitad de nuestro botón hasta que creemos las otras dos partes. Por lo que voy a ir aquí y decir cuando se cierne sobre el enlace, quiero hacer algunos cambios sucedieron al pseudo elemento antes. Voy a añadir tabulador 0 y izquierda 0. Por lo que ahora se puede ver cuando pasamos el cursor sobre el enlace que hay antes de que seudo elemento se mueva para cubrir el primer cuarto del botón. Porque dijimos izquierda a 0 y top ya es 0. De acuerdo, trabajemos en la segunda parte. Volveré atrás y diré cuando pasemos el cursor sobre el enlace, quiero hacer que algunos cambios pasen a ser después de pseudo elemento, cambiaré a 0 en lugar de negativo 100%, que se mueva hacia abajo hasta que cubra el botón. Y vete, dejada como está, 25 por ciento. Por lo que ahora cuando voy y paso el cursor sobre el botón, puede ver que la segunda parte se mueve hacia abajo, cubriendo el siguiente cuarto al lado de la primera parte. Y juntos están cubriendo la mitad del botón. De acuerdo, ahora queremos crear las dos partes restantes, y las crearemos usando también los pseudo elementos antes y después. Pero esta vez serán los pseudo elementos antes y después del lapso que agregamos dentro de la etiqueta ancla. Entonces iré a mi CSS e iré aquí mismo. Agrega una nueva coma y agrega colon span antes de otra coma y span colon después. Los agregamos aquí mismo, porque tendrán el mismo ancho y altura que las otras dos partes. Nosotros lo único que va a cambiar es la posición. Entonces ahora cuando voy a recargar, se puede ver que tenemos las dos partes, pero cambiemos su posición. Regresaré a mi CSS y diré un colon span antes. Y sumaré top 100%. Por lo que se sentará debajo del botón y escribirá 25 por ciento. Por lo que se sentará al 25 por ciento del ancho del botón desde la derecha. Por lo que se puede ver la tercera parte está sentada en la posición que queremos. Y al pasar el cursor sobre el enlace, queremos cambiar su posición para que cubra la tercera parte del botón. Por lo que volveré a mi CSS y diré un on on hovering span colon antes. Y sumaré top 0 para que se mueva hacia arriba y escriba 25 por ciento como está. Por lo que ahora cuando voy a pasar el cursor sobre el enlace, puede ver que la tercera parte se mueve hacia arriba, cubriendo la tercera parte del botón. Enfriar. Ahora trabajemos en la cuarta parte. Iré aquí en mi CSS y añadiré un lapso de dos puntos después. Y sumaré top 0 y escribiré negativo 25 por ciento. Por lo que esta cuarta parte se estará vendiendo inicialmente a la derecha del botón, así. Está bien, trabajemos en el efecto flotante. Iré aquí mismo y diré un colon lapso destapador después. Y sumaré top 0 y escribiré 0 también. Por lo que ahora cuando voy a pasar el cursor sobre el enlace, se puede ver que las cuatro partes se mueven de sus posiciones iniciales a sus nuevas posiciones y tapar juntos el botón. Pero ahora necesitamos cambiar el color del texto al flotar. Por lo que volveré a mi CSS y diré un sobre flotando. Yo quiero que el color cambie a este color gris oscuro. Y también con el fin de ocultar las partes fuera del botón. Subiré aquí dentro del selector de etiquetas de anclaje. Y voy a añadir desbordamiento oculto. Por lo que ahora puedes ver cuando pasamos el cursor sobre el botón, las cuatro partes entran y lo cubren por completo, y el color del texto cambia a gris, dándonos el efecto que queremos. Ahora, vamos a crear otro efecto cool con cambios menores en nuestro código. Primero, subiré aquí otra vez dentro del selector de etiquetas de anclaje y quitaré el desbordamiento oculto por ahora para que podamos ver lo que estamos haciendo. Después iré a la primera parte de las cuatro partes, que es el pseudo elemento antes de la etiqueta ancla. Y cambiaré la propiedad superior a 100% en lugar de 0 y la izquierda a 0 en lugar de negativa 25 por ciento. Por lo que ahora puedes ver aquí tiene una nueva posición debajo del botón. Después pasaré a la cuarta parte, representada por el pseudo elemento después del lapso. Y cambiaré a negativo 100% en lugar de 0 y derecho a 0 en lugar de negativo 25 por ciento. Y aquí tiene una nueva posición por encima del botón. Entonces volveré a ir dentro del selector de etiquetas de anclaje y añadiré desbordamiento oculto. Y ahora cuando pase el cursor sobre el enlace, se puede ver que tenemos un efecto ligeramente diferente cuando teníamos antes. Y luce tanques también. También quiero agregar algo. Creo que estará bien si agregamos algunos retrasos de transición a las cuatro partes para que aparezcan una tras otra. Por lo que queremos que la primera parte aparezca de inmediato. Iré aquí mismo y agregaré retardo de transición 0.1 segundos. Después a la tercera parte, añadiré retardo de transición 0.2 segundos. Y dos, la cuarta parte, voy a añadir retardo de transición 0.3 segundos. Y por último, subamos aquí y cambiemos la duración de transición a 0.2 segundos para que sea un poco más rápido. Por lo que ahora puedes ver cuando voy a pasar el rato sobre el enlace, las cuatro partes aparecen una tras otra, dándonos este efecto realmente genial. 28. 29: efecto intercepto de frontera creativo: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones, transiciones, y transformaciones CSS . En esta lección, vamos a crear este bonito efecto de botón de desplazamiento. Se puede ver nuestro botón tiene para largas fronteras a su alrededor. No tienen la misma altura ni anchura que el botón. En cambio, los bordes de izquierda y derecha tienen alturas más grandes y los bordes en la parte superior e inferior tienen anchuras más grandes. Aprenderemos a hacer eso. Otra cosa es que los bordes en la parte superior e izquierda tienen un color rojo, mientras que los bordes en la parte inferior y escribir tienen un color amarillo, como puedes ver. Y cuando pasamos el cursor sobre el botón, se pueden ver los lugares de intercambio de fronteras. El borde rojo superior se mueve hacia abajo y el amarillo inferior se mueve hacia arriba, ocupando su lugar. En tanto que el borde izquierdo rojo se mueve hacia la derecha. Y el borde derecho amarillo se mueve hacia la izquierda. Entonces solo están cambiando de posición. Entonces veamos cómo podemos crear este efecto. En primer lugar, iré a mi HTML y añadiré una etiqueta de ancla. Y sólo di hochame. Entonces iré a mi CSS para darle estilo. Voy a apuntar a la etiqueta de anclaje, y voy a empezar agregando decoración de texto, ninguna para quitar los subrayados. Entonces añadiré texto transformado mayúsculas para hacer todas las letras mayúsculas. Entonces tamaño de fuente, 22 píxeles para hacer el texto un poco más grande para que podamos verlo. Y familia de fuentes. Espaciado entre letras Verdana, tres píxeles para tener algún espaciado entre las letras. De acuerdo, Ahora sumaré altura, 80 pixels, ancho 200 pixels. Y para centrar el texto horizontal y verticalmente, agregaremos altura de línea, 60 píxeles para centrarlo verticalmente. Y el texto alinean centro para centrarlo horizontalmente. Y cambiemos el color del texto. Vamos a ir aquí y añadir color, este bonito color amarillo. Entonces, por último, voy a añadir posición relativa. Enfriar. Ahora, para ver lo que estamos haciendo, Vamos a añadir una frontera temporal a nuestro botón. Iré aquí mismo y agregaré frontera. Dos píxeles, azul sólido. De acuerdo, entonces ahora queremos trabajar en las largas fronteras que vimos en nuestra demo y averiguar cómo crearlas. Trabajaremos paso a paso juntos para entender cómo se crean. En primer lugar, para crear los bordes izquierdo y derecho, usaré el pseudo elemento antes. Voy a ir justo aquí y decir un colon antes. Y voy a añadir contenido. Cadena vacía, posición, altura absoluta, 60 pixels, ancho, 200 pixels, top 0 y left 0 también. Observe que son del mismo ancho y altura de nuestro enlace. Entonces hasta ahora el pseudo elemento antes tiene exactamente el mismo tamaño que el enlace y está sentado encima de él. De acuerdo, Dijimos que usaremos los pseudo elementos antes para crear los bordes izquierdo y derecho. Por lo que voy a añadir borde, izquierda, dos píxeles, sólido, rojo. Y frontera derecha. Dos píxeles sólidos. Nuestro color amarillo. Por lo que ahora puedes ver tenemos un nuevo borde rojo izquierdo y luego otro amarillo derecho. Y difícilmente los podemos ver porque están sentados encima del borde azul original que rodea el botón. Y eso se debe a que el pseudo elemento antes tiene la misma altura y anchura que el botón. Entonces para que estos dos nuevos bordes sean más largos, Cambiemos la altura del pseudo elemento antes. Vamos a cambiarlo a 90 píxeles, por ejemplo. Y ahora se puede ver que los bordes izquierdo y derecho son ahora más largos y se extienden allá de la altura del botón porque están rodeando el pseudo elemento antes, que tiene una altura de 90 píxeles, mientras que el botón tiene una altura de solo 60 píxeles. Por lo que hay 30 píxeles más largos que la altura del botón. ¿ De acuerdo? Pero ahora queremos desplazar estas dos fronteras a la cima. No queremos que sean más largos en la parte inferior, sino también en la parte superior con espacios iguales. Podemos hacer eso fácilmente, no hay problema yendo aquí mismo y cambiando la parte superior a 15 píxeles negativos. Por lo que esto desplazará el pseudo elemento antes a la parte superior por 15 píxeles. Y también se cambiarán las fronteras. De acuerdo, ahora vamos a crear los bordes superior e inferior. Utilizaremos el pseudo elemento after para crearlos. Por lo que voy a decir un colon después. Y voy a añadir contenido. Vacío también. Posición. Absoluto, altura, 60 píxeles, igual que el botón. Y ancho. 230 píxeles, esta vez, no 200 píxeles como el enlace, porque los bordes superior e inferior de los pseudo elementos posteriores serán más largos que el ancho del botón por 15 píxeles a la izquierda y 15 píxeles a la derecha. Entonces sumaremos a 0 y dejaremos 0 por ahora. Después borde superior. Dos píxeles, rojo sólido y borde inferior. Dos píxeles, amarillo sólido. Por lo que ahora puedes ver tenemos los bordes superior e inferior y son más largos que el ancho del botón por 30 píxeles. Por lo que ahora queremos desplazar las fronteras de nuevo a la izquierda. Entonces iré aquí y cambiaré a la izquierda a 15 píxeles negativos en lugar de 0. Impresionante. Ahora ya no necesitamos la frontera azul, así que iré aquí mismo y la quitaré. Enfriar. Ahora tenemos que trabajar en el efecto hover. Recuerda, cuando pasemos el cursor sobre el enlace, queremos que las fronteras cambien sus lugares. El rojo superior estará en la parte inferior y el rojo izquierdo estará a la derecha. Esto se puede hacer realmente fácilmente. Simplemente iré aquí en mi CSS y añadiré una. y al pasar el cursor sobre él, haré que pasen algunos cambios al pseudo elemento antes, que representa los bordes izquierdo y derecho. Añadiré Transformar, Girar Y. Así que esto los hará antes de pseudo elemento rotar en el eje y 180 grados, lo que significa que hará voltear en el eje y. Y un ordenado para que este cambio ocurra sin problemas, subiré aquí dentro del pseudo elemento antes y añadiré transición o 1 segundo. Entonces ahora cuando voy a pasar el cursor sobre el enlace, se puede ver que antes de pseudo elemento gira sobre el eje y en 180 grados, haciendo que las fronteras intercambien su posición exactamente como queremos. Enfriar. Ahora, hagámoslo para la parte superior e inferior Borders. Copiaré ese bloque de código, lo pegaré de nuevo, y cambiaré antes a después. Y rota y para rotar x. Entonces sube aquí en el pseudo elemento después y agrega transición. Ah, 1 segundo. Y aquí vamos. Los bordes superior e inferior también están cambiando sus lugares, dándonos este efecto realmente bonito. Y podemos hacerlo aún más agradable agregando algún retraso para estar tras pseudo elemento por ejemplo. Entonces si voy aquí y agrego retardo de transmisión 0.2 segundos, se puede ver el peso de los bordes superior e inferior 0.2 segundos y luego empezar a moverse. También podemos conseguir otro bonito efecto. Podemos hacer que los bordes superior e inferior se muevan sólo después de la izquierda y la derecha al terminar de moverse. Por lo que iré aquí dentro del pseudo elemento antes y cambiaré la duración de transición a solo 0.4 segundos en lugar de 1 segundo. Y haré lo mismo para el pseudo elemento después. Y también cambiaremos el retardo de transición a 0.40 segundos en lugar de 0.2. Por lo que al hacer esto, los bordes superior e inferior comenzarán a moverse sólo después de que los de izquierda y derecha terminaran de moverse, dándonos este nuevo efecto fresco. 29. 30: efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear otro efecto de botón cool hover. Se puede ver este botón tiene estos bordes en la esquina superior izquierda y en la esquina inferior derecha. Y cuando paso el cursor sobre el enlace, se puede ver el ancho y la altura de los bordes aumenta. Y nos dan este bonito efecto. Entonces, empecemos a crear eso. Voy a empezar aquí en el HTML y voy a añadir un botón y decir Enviar. Entonces iré a mi CSS y apuntaré a este botón. Entonces agrega borde, ninguno. Acolchado, 12 píxeles de arriba e abajo, y 40 píxeles de izquierda y derecha. Entonces le añadiré color de fondo. Este bonito color naranja. Entonces color blanco. Y font-family bench line. Muy bien, también añadiré tamaño de fuente. 22 píxeles. Transformar, mayúsculas, cursor, puntero, y finalmente, posición relativa. Ahora vamos a crear las fronteras. Crearemos los bordes que se sientan en la esquina superior izquierda, primero usando el pseudo elemento antes. Entonces crearemos los que están en la esquina inferior derecha. Por lo que apuntaré al pseudo elemento antes del botón. Y voy a añadir contenido. Cuerdas vacías. Entonces posiciona ancho absoluto 24 píxeles. Altura 24 píxeles también. Después top 0, izquierda 0. Y agreguemos un fondo rojo temporal. Por lo que ahora se puede ver el pseudo elemento antes es este fondo rojo que se sienta en la esquina superior izquierda del botón. Porque dijimos tanto sus propiedades superiores como izquierdas a 0. Y tiene un ancho y una altura de 24 píxeles. Pero si recuerdas, nuestras fronteras estaban fuera del botón. desplazaron un poco a la izquierda y a la parte superior ahí no estamos sentados perfectamente en la esquina superior izquierda. Entonces volvamos atrás y hagamos eso. Cambiaré aquí la propiedad izquierda de 0 a 5 negativo, modo que el pseudo elemento antes se desplazará a la izquierda por cinco píxeles. Entonces también haré lo mismo para la propiedad superior para que sea desplazada a la parte superior por cinco píxeles negativos también. Y ahora se puede ver el fondo rojo se desplaza por cinco píxeles y se va fuera del botón. De acuerdo, ahora sumémosle los bordes superior e izquierdo. Regresaré aquí y añadiré frontera. Dos píxeles sólidos. Nuestro color naranja. Y frontera izquierda. Dos píxeles sólidos. El color naranja también. Y ahora se puede ver que tenemos las fronteras añadidas. Siguiente. Queremos animar estas fronteras. Queremos hacerlos crecer, como hemos visto en nuestro ejemplo. Esto será fácil de hacer. Simplemente vamos a aumentar el ancho y la altura del pseudo elemento antes y las fronteras se incrementarán con él. Entonces iré aquí y cuando pasemos el cursor sobre el botón, quiero hacer que pasen algunos cambios al pseudo elemento antes. Haré su altura 100% y su ancho 100% también. Y para que este cambio ocurra sin problemas aquí arriba dentro del pseudo elemento antes y agregue transición o de 0 a cinco segundos. Muy bien, ahora, cuando voy y pase el cursor sobre el botón, puede ver que el pseudo elemento antes se hace más grande, se convierte en el mismo ancho y altura que el botón y los bordes se hacen más grandes con él. Entonces lo único que queda por hacer es quitar este fondo rojo. Entonces volveré aquí y haré eso. Y cuando vuelvo a pasar el cursor sobre el botón, puedes ver que las fronteras se están haciendo más grandes y nos están dando este bonito efecto. Y es el mismo efecto que queríamos. De acuerdo, vamos a crear rápidamente las fronteras. En la esquina inferior derecha, utilizaremos el pseudo elemento after para crear esos. Voy a copiar el pseudo elemento antes. Pégalo de nuevo, cámbielo antes a después. Entonces solo haré algunos cambios. Cambiaré de arriba a abajo y de izquierda a derecha. También cambiaré borde superior dos frontera inferior. Y la frontera izquierda a frontera derecha. Y ahora puedes ver que tenemos estas dos fronteras sentadas aquí mismo en la esquina inferior derecha. Volvamos atrás y animémoslos también. Simplemente iré aquí mismo y añadiré una coma, luego apuntaré al pseudo elemento después también. Y ahora cuando vuelvo y pase el cursor sobre el botón, se puede ver que los bordes en la esquina inferior derecha se están haciendo más grandes también. Y ahora tenemos exactamente el mismo efecto que queremos. 30. 31: efecto rotativo de primera letra creativo: Bienvenidos a esta nueva lección en el curso. En esta lección vamos a crear otro efecto de botón de desplazamiento. Por lo que puedes ver cuando paso el cursor sobre este botón, este efecto cool sucede donde tenemos un fondo negro que se desvanece y gira un poco hacia la derecha. Además, la primera letra B se hace más grande mientras gira y nos da este pequeño efecto fresco. Entonces vamos a crear eso. Empezaré aquí en mi HTML agregando una etiqueta ancla. Entonces dentro de ella voy a añadir un lapso. Y dentro del lapso, voy a añadir sólo la letra b para que podamos animarla por separado. Entonces fuera del lapso, sumaré el resto del mundo. Entonces iré a mi CSS y apuntaré a la etiqueta de anclaje. Después agrega decoración de texto. Ninguno. Ancho, 160 píxeles, altura, 60 píxeles. Color, negro, borde dos píxeles. Sólido. Negro. Después para centrar el texto horizontal y verticalmente, agregaré texto alineado, centro, y altura de línea, 60 píxeles. Cuando el tamaño de fuente es de 25 píxeles, posición relativa. Y finalmente transición o 0.2 segundos. Muy bien, ahora vamos a crear el fondo negro que se desvanece y gira. Cuando pasemos el cursor sobre el enlace, usaremos el pseudo elemento antes para crear eso. Por lo que lo apuntaré y añadiré contenido. Cuerdas vacías. Posición, absoluta, superior, 0, izquierda 0 también. Entonces ancho 100%. Y altura 100%. Color de fondo, negro. Y para que el texto aparezca por encima de él, añadiremos z-index, negativo. Y ahora puedes ver tenemos un fondo negro que tiene el mismo ancho y altura que el enlace, y está sentado encima de él. Entonces si recuerdas, debe ser invisible, entonces cuando pasemos el cursor sobre el enlace, debería desvanecerse y girar. Entonces hagámoslo. Regresaré y añadiré opacidad 0, luego transición, o 0.8 segundos. Entonces debajo de eso voy a añadir un colon, flotar colon antes de la opacidad. Una otra vez y transformarse. Gira 15 grados. Y ahora cuando voy a pasar el rato sobre el enlace, se puede ver el fondo negro se desvanece mientras gira y nos da el efecto que queremos. Pero cambiemos el color del texto al flotar a blanco para que podamos verlo. Voy a añadir un flotador de colon. Entonces cambiaré el color a blanco. Y ahora se puede ver el color del texto cambia a blanco cuando paso el cursor sobre el enlace. Está bien, trabajemos en animar la primera letra. Te acuerdas que lo incluimos dentro de un lapso. Entonces vamos a apuntarlo y añadir color. Transparente. Entonces posición relativa. Y ahora se puede ver que la primera letra es invisible porque ponemos su color a transparente. A continuación vamos a apuntar al pseudo elemento antes de este lapso. Agrega contenido, la letra B para que aparezca encima de la letra cuyo color pusimos a transparente. Después posiciona el color absoluto, negro, y la transición, o 0.2 segundos. Y ahora se puede ver la primera letra aparece de nuevo. Está bien, vamos a trabajar en el efecto flotante. Al pasar el cursor sobre el enlace. Quiero hacer que pasen algunos cambios al pseudo elemento antes del lapso. En primer lugar, quiero hacer su color blanco. Entonces quiero aumentar su tamaño. Por lo que voy a añadir tamaño de fuente, 18 píxeles. Y por último, quiero rotarlo. Por lo que voy a añadir transformar, rotar 360 grados. Y ahora se puede ver cuando paso el cursor sobre el botón, la primera letra se hace más grande mientras gira al mismo tiempo, pero encubre las otras letras. Por lo que necesitamos moverlo un poco para que no oculte las otras letras detrás de él. Voy a volver aquí y añadir traducir negativo 65 por ciento en el eje x para desplazarlo de nuevo a la izquierda, y negativo 10% en el eje y para desplazarlo un poco a la parte superior también. Y ahora cuando voy a pasar el rato sobre el botón, se puede ver que la primera letra está ahora sentada en una nueva posición y no esconde más las otras letras. Y eso es todo chicos. Este es el efecto que íbamos a por. 31. 32: 4 bordes creativos efecto de botones de crecimiento: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de botón hover. Se puede ver cuando paso el cursor sobre el botón, estas cuatro fronteras están entrando y haciendo este efecto fresco. Por lo que el agua del grifo entra de izquierda a derecha. El fondo viene de derecha a izquierda. El borde izquierdo entra de abajo a arriba. Y el borde derecho viene de tarta el fondo. Y todo esto está sucediendo al mismo tiempo, dándonos este efecto fresco. Entonces, empecemos a crearlo. Iré aquí en mi HTML y añadiré un botón. Entonces dentro de ella, diré botón. Entonces también añadiré un lapso dentro del botón. Entonces iré a mi CSS, apuntaré al botón y agregaré color de fondo. Rojo por ahora. Fronteriza. Ninguno. Posición. Relativo. Ancho, 400 pixels, altura, 120 pixels. Entonces el texto se transforma en mayúsculas. Y para centrar el texto dentro del botón vertical y horizontalmente, agregaré altura de línea, 120 píxeles. Y el texto alinean el centro. Entonces agregaré color, blanco, tamaño de fuente, 45 pixels. Y por último, espaciado entre letras, 15 píxeles. Muy bien, vamos a crear la frontera que entra de izquierda a derecha. Usaremos el pseudo elemento antes para crear eso. Por lo que lo apuntaré y añadiré contenido. Cuerdas vacías. Posición absoluta, arriba, 0, izquierda 0 también. Por ahora. Después ancho, 100% del ancho y alto del botón, solo cuatro píxeles. Entonces finalmente, color de fondo. Blanco. Y ahora se puede ver que tenemos esta línea por aquí en la parte superior, y está ocupando todo el ancho del botón. Entonces retrocedamos y lo movamos a la izquierda. Al lado del botón. Iré aquí y cambiaré de izquierda a negativa 100% en lugar de 0. Y ahora la línea se desplaza hacia la izquierda. Muy bien, volveré a ir aquí y añadiré transición 0, 0, 5 segundos. Entonces, al pasar el cursor sobre el botón, queremos que el borde vuelva a su posición original. Por lo que voy a decir botón de colon flotar. Haré que pasen algunos cambios al pseudo elemento antes. Pondré de vuelta a la izquierda a 0. Y ahora cuando paso el cursor sobre el botón, puedes ver que la línea superior vuelve a estar posicionada justo encima del botón. De acuerdo, vamos a crear la línea de abajo. Volveré al editor de códigos y copiaré el pseudo elemento antes. Después pegarlo de nuevo y cámbielo antes a después. Después cambia de arriba a abajo para que se sienta en la parte inferior del botón. Entonces también cambiaré de izquierda a derecha. Por lo que esta vez se desplazará a la derecha, no a la izquierda. Y ahora se puede ver la segunda línea está sentada en la parte inferior, extremo se desplaza hacia la derecha. Entonces estoy rondando sobre el botón. Queremos cambiarlo de nuevo a su posición original. Volveré a mi CSS y haré eso. Copiaré este código, lo pegaré de nuevo, y cambiaré antes a después. Y también cambiar de izquierda a derecha. Para que la posición de la segunda línea sea 0 a la derecha. Y eso lo trae de vuelta a su lugar original. Y al pasar el cursor sobre el botón, se puede ver como se esperaba, la línea en la parte inferior se mueve de derecha a izquierda, volviendo a su posición. Nuestra derecha, después de crear las líneas superior e inferior, crearemos las de los lados izquierdo y derecho. Usaremos los pseudo elementos antes y después del lapso que creamos dentro del botón. Por lo que sólo voy a copiar el pseudo elemento antes del botón. Otra vez. Pega, Cambiar botón a span, para apuntar al pseudo elemento antes del span, no al botón. Entonces dentro de eso, cambiaré ancho a cuatro píxeles en lugar de 100% y altura al 100% en lugar de cuatro píxeles, que tenga la misma altura que el botón y un ancho de cuatro píxeles. Esta será la línea de la derecha. Entonces cambiaré eso a negativo 100% en lugar de 0 porque estará sentado encima del botón y cambiará de izquierda a derecha y lo haré 0, no negativo 100%. Y ahora se puede ver la línea de la derecha está sentada encima del botón porque dijimos que es propiedad superior a negativa 100% y es propiedad correcta a 0. Al flotar, queríamos volver a su posición original también. Entonces volveré. Y al pasar el cursor sobre el botón, quiero hacer que pasen algunos cambios al pseudo elemento antes del lapso. Voy a volver a poner su propiedad superior a 0 otra vez. Y ahora, al pasar el cursor sobre el botón, se puede ver que la línea de la derecha se mueve de arriba a abajo, de vuelta a su posición. Ahora, vamos a crear rápidamente la línea final de la izquierda. Voy a copiar todo el código para la parte correcta. Pegarlo de nuevo, apunte a los pseudo elementos después, esta vez cuando cambie de arriba a abajo y de derecha a izquierda. Y también cambiaré antes a después aquí y de arriba a abajo. Y ahora cuando regrese y vuelva a cargar, se puede ver que tenemos una línea en el lado izquierdo también. Y al pasar el cursor sobre el botón, todas las cuatro líneas se mueven de nuevo a sus posiciones. Volvamos atrás y quitemos este fondo rojo. Añadamos también desbordamiento oculto para que las líneas se oculten fuera del botón. Y ahora cuando vuelva al botón y pase el cursor sobre él, se puede ver que tenemos este bonito efecto en el que todas las líneas entran al mismo tiempo. 32. 33: efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de botón usando animaciones CSS. Se puede ver al pasar el cursor sobre el botón, sucede este bonito efecto ondulado, que es como si una ola entrara y se mueve hasta que cubra el botón. Este es un efecto muy interesante. Entonces vamos a crearlo. Empezaré en mi HTML agregando una etiqueta ancla. Entonces dentro de eso diré botón. Entonces también añadiré un div y le daré una ola de clase. Entonces iré a mi CSS y apuntaré a la etiqueta de anclaje. Y voy a añadir decoración de texto. Ninguno. Acolchado, 15 píxeles de arriba e abajo, y 30 píxeles de izquierda y derecha. Entonces le añadiré color. Este color azul claro. Y tamaño de fuente, 18 píxeles. Después espaciado entre letras, borde, dos píxeles, sólido, azul claro. Transformación de texto, mayúscula. Y por último, posición, relativa. Y ahora puedes ver que el botón se ve genial. Ahora bien, ¿cómo vamos a crear este efecto ondulado? Démoslo paso a paso. Voy a apuntar al div con la clase de onda. Y dentro de eso, agregaré posición absoluta, para que podamos posicionarla relativa al botón. También estableceré su ancho al 100% y es de altura al 100% también. Entonces sumaré izquierda, 0, top 100%. Entonces color de fondo, rojo por ahora. Y ahora puedes ver tenemos un fondo rojo que tiene el mismo ancho y altura que nuestro botón se sienta debajo de él, porque dijimos que es propiedad superior al 100%. Está bien, sigamos trabajando. Crearemos esta pequeña ola usando el pseudo elemento antes de R wave div. Por lo que lo apuntaré. Y dentro de eso voy a añadir contenido. Cuerdas vacías. Posición absoluta, arriba, 0, izquierda 0 también. Entonces ancho 100% Y altura solo 22 píxeles. Y sabremos por qué en un segundo. Y por último, voy a añadir fondo URL wave dot PNG. Entonces esta es la pequeña imagen que vamos a usar para el efecto de onda. Y esta altura de imagen es de 22 píxeles. Por eso establecemos la altura del pseudo elemento antes en 22 píxeles para que pueda encajar con la imagen. Y queremos moverlo a la parte superior para que se quede encima del fondo rojo. Entonces podemos hacer eso volviendo atrás y cambiando su propiedad superior a 22 píxeles negativos en lugar de 0. Y ahora se puede ver la imagen de fondo se desplaza a la parte superior y se sienta por encima del fondo rojo. Pero ahora está cubriendo una pequeña parte del botón desde abajo. Y eso no queremos. Queremos que el punto superior de la imagen esté justo debajo del botón. Por lo que podemos hacer eso moviendo tanto la imagen el fondo rojo al fondo por 22 píxeles, que es la altura de la imagen. Entonces para hacer eso, volveré a la onda div. Y en lugar de 100% aquí en la parte superior, quiero moverlo en un 100% más 22 pixels. Por lo que podemos usar la propiedad de conteo para hacer eso. Añadiré 100% más 22 pixeles. Y ahora se puede ver tanto el fondo rojo como la imagen que acaba de mover al fondo por otros 22 píxeles. Y note que la imagen se movió con el fondo rojo porque es un pseudo elemento antes de la misma, por lo que está apegada a ella. De acuerdo, pasemos a animar esta imagen y hagamos este efecto ondulado. Voy a crear una nueva animación. Nómbralo ondulado. Y dentro de ella al 0%. Añadiré posición de fondo x 0. Entonces al 100%, agregaré posición de fondo x 118 píxeles. Y este 118 pixels es el ancho de la imagen. Por lo que la posición de la imagen cambiará de 0 a su ancho completo, y nos dará el efecto que queremos. Ahora, subiré aquí y añadiré esta animación. Por lo que voy a añadir animación ondulada 0.5 segundos, lineal e infinito. También cambiaré el color de fondo rojo por el color azul claro de nuestra imagen. Y ahora se puede ver que la imagen se mueve en la parte superior del fondo azul claro. Y nos está dando este efecto realmente genial. Y parece que solo es parte del fondo azul porque tienen el mismo color. Para terminar nuestro efecto, tendremos que mover este fondo azul hacia arriba y hacer que llene el botón al pasar el cursor sobre él. Entonces sigamos adelante y hagamos eso. Diré que cuando se cierne sobre la etiqueta de ancla, haré que pasen algunos cambios al div con la clase de onda, que es el div azul claro. Voy a añadir top 0, por lo que vuelve a subir y cubre el botón. Y para que eso suceda sin problemas, iré aquí dentro del div de onda y agregaré transición. O 1 segundo. También subiré aquí dentro de la etiqueta de anclaje y agregaré desbordamiento. Y ahora cuando voy a pasar el cursor sobre el enlace, puede ver que el fondo azul se mueve hacia arriba hasta que cubre el botón por completo y la imagen se anima y nos da este efecto ondulado realmente fresco. Nos queda una cosa, que es cambiar el color del texto dentro del botón al pasar el ratón para que podamos verlo. Voy a hacer eso rápido. Por lo que al pasar el cursor sobre el enlace, haré que el color cambie a blanco. Entonces para que este cambio ocurra sin problemas, subiremos aquí y agregaremos transición 0, 0, cinco segundos. Y también voy a ir dentro del div de onda y añadir Z índice negativo para que el texto aparezca delante de él. Y ahora cuando vuelvo y pase el cursor sobre el botón, se puede ver que el color del texto cambia a blanco mientras ocurre el efecto ondulado. Y eso es todo para esta lección, todos, y los veré en la próxima. 33. 34 - efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de botón de desplazamiento. Se puede ver que tenemos este botón y tiene este corte en los bordes superior e inferior. Y cuando paso el cursor sobre él, este efecto sucede donde aparece y crece un fondo negro, cubriendo el botón. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando una etiqueta ancla. Y voy a decir botón. Entonces debajo de eso, voy a añadir un lapso. Entonces iré a mi CSS y apuntaré al enlace. Y voy a añadir decoración de texto. Ninguno. Ancho, 160 pixels, altura, 60 pixels, color negro. Entonces, con el fin de establecer al texto horizontal y verticalmente, añadiré altura de línea, 60 píxeles. Entonces alinear el texto, centrar. Entonces añadiré transformación de texto. Capitalizar. Tamaño de fuente, 25 píxeles, posición, relativa. Y finalmente, transición, todos 0.2 segundos. Y ahora puedes ver tenemos nuestro enlace sentado en el centro de nuestra página. Está bien, sigamos adelante. Voy a apuntar al lapso dentro del enlace. Y sumaré posición, ancho absoluto, 100%, altura, 100% también. Después top 0, izquierda 0. Entonces añadiré color de fondo, rojo y borde. Dos píxeles, negro sólido. Y ahora puedes ver tenemos un fondo rojo que tiene el mismo ancho y altura que el botón. Y está redondeado con un borde negro de dos píxeles. Nosotros sólo queremos las fronteras. No queremos este fondo rojo. Por lo que regresaré y cambiaré el color del fondo de rojo a transparente. De acuerdo, ahora queremos crear los esquejes que existen en los bordes superior e inferior. Usaremos el pseudo elemento antes del lapso para crear eso. Por lo que lo apuntaré. Después agrega contenido. Cuerdas vacías, posición, ancho absoluto, apenas 8%, altura, 500 por ciento. Entonces color de fondo, rojo por ahora. Y ahora puedes ver tenemos este fondo rojo que tiene un ancho del 8% del lapso y una altura del 500 por ciento. Y está sentado aquí mismo. Entonces volvamos atrás y centrados dentro del botón. Sumaré top 50%, izquierda. 50 por ciento. Después transformarse. Traducir, negativo 50 por ciento y negativo 50 por ciento. Y ahora se puede ver que el fondo rojo ahora está centrado dentro del botón, pero no se puede ver que está encubriendo el texto dentro del botón. Yo quiero que el texto aparezca delante de él. Por lo que volveré dentro del selector de span y añadiré z-index negativo. También iré aquí mismo dentro del pseudo elemento antes y añadiré rotación negativa 60 grados. Y ahora se puede ver el texto ahora aparece frente al fondo rojo, que ahora se gira 60 grados en sentido contrario a las agujas del reloj. De acuerdo, ahora, vamos a trabajar en el efecto que se cierne. Al pasar el cursor sobre el enlace, quiero que este fondo rojo tenga un ancho del 100% en lugar del 8%. Por lo que cubrirá completamente el eslabón. Entonces volveré aquí. Y al pasar el cursor sobre el enlace, apuntaré a eso antes pseudo elemento del lapso. Y pondré su ancho al 100%. También pondré su color de fondo en negro en lugar de rojo. Entonces, para que este cambio ocurra sin problemas, subiré aquí dentro del pseudo elemento antes y agregaré transición o 0.2 segundos. Y ahora cuando voy a pasar el cursor sobre el enlace, se puede ver que el ancho del fondo rojo se ensancha hasta que cubre el enlace y el color cambia a negro también. Por eso ya no somos capaces de ver el texto. Por lo que volveré a mi CSS y al pasar el cursor sobre el enlace, tendré su cambio de color a blanco para que podamos verlo. Y ahora cuando pase el cursor sobre el botón, puede ver que somos capaces de verlo porque es color es blanco ahora. Está bien. Ahora estoy rondando. Yo quiero hacer girar también el fondo rojo, no sólo tener su aumento de ancho, quería rotar 60 grados, por ejemplo. Entonces iré aquí y copiaré esta línea de código y la pegaré en el efecto flotante y solo cambiaré negativo 60 grados a 60 grados. Y ahora se puede ver cuando voy a pasar el cursor sobre el enlace, el fondo rojo gira 60 grados mientras su ancho va en aumento. Está bien, ahora, lo único que queda es cambiar el color del fondo rojo y hacerlo blanco como el cuerpo, para que tengamos estos dos esquejes. Por lo que volveré y cambiaré este color rojo a blanco. También subiré aquí dentro del selector de enlaces. Y voy a añadir desbordamiento oculto. Y ahora puedes ver tenemos estos esquejes en los bordes superior e inferior porque el color del fondo ahora es blanco, como el color del cuerpo, no rojo. Y cuando voy a pasar el cursor sobre el botón, se puede ver este efecto sucede donde el fondo blanco cambia a negro y su ancho aumenta mientras gira de 60 grados negativos a 60 positivos, dándonos el efecto que queremos. 34. 35 - efecto de botones creativos: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de botón de desplazamiento. Se puede ver que tenemos estas dos partes son parte roja a la izquierda y la parte azul a la derecha. Y las dos partes están sesgados a lo largo del eje x. Y también se puede ver que la parte roja se desplaza un poco hacia la parte superior, mientras que la parte azul se desplaza hacia abajo. Y cuando pasamos el cursor sobre el botón, sucede este efecto. Se puede ver que las dos partes cambian sus posiciones. El azul se mueve hacia el lado izquierdo y el rojo se mueve hacia el lado derecho. Y el grado sesgado de ambos vuelve a ser 0. Entonces vamos a crear este efecto. Empezaré aquí en mi HTML agregando una etiqueta ancla y diga botón. Entonces iré a mi CSS y apuntaré a la etiqueta de anclaje y agregaré transformación de texto. Mayúsculas, texto, decoración. Ninguno. Font-weight, 700, posición, relativo. Después espaciado entre letras, siete píxeles. Acolchado, 18 píxeles de arriba e abajo, y 30 píxeles de izquierda y derecha. Entonces agregaré fondo, transparente, tamaño de fuente, 28 píxeles. Y finalmente, color blanco. Ahora puedes ver el enlace luce como queremos, y tiene un fondo transparente porque usaremos los pseudo elementos antes y después para crear los fondos rojos y azules. Entonces volvamos y hagamos eso. Voy a apuntar al pseudo elemento antes de la etiqueta ancla y añadir contenido. Cuerdas vacías. Posición, absoluta, luego altura. 100% ya que tiene la misma altura que la etiqueta de anclaje, el ancho 50 por ciento, debido a que tiene la mitad del ancho del enlace. Entonces sumaré izquierda negativa 1 por ciento. Entonces top negativo cinco píxeles. Por lo que esta será la parte roja que se sienta en el lado izquierdo y se desplaza un poco a la parte superior. Entonces finalmente, voy a añadir color de fondo, esta curva roja. Y ahora se puede ver la parte roja está sentada aquí mismo y ocupando el 50% de los anchos de enlace. Volvamos aquí. Y para sesgar el fondo rojo, añadiré Transform Skew 30 grados. También añadiré z-index negativo para que el texto aparezca frente a la parte roja. Entonces por fin, sumaré transición o 0.3 segundos. Y este valor cúbico Bezier. Y ahora se puede ver que la parte roja está sesgada y el texto está apareciendo frente a ella. Muy bien, volvamos atrás y trabajemos en el efecto hover. Al pasar el cursor sobre el enlace, queremos que el fondo rojo se mueva hacia el lado derecho y regrese a un grado 0 sesgado. Por lo que voy a ir aquí y decir al pasar el cursor sobre la etiqueta de ancla, voy a hacer algunos cambios en el pseudo elemento antes. Voy a añadir Transform Skew de nuevo a 0 grados, luego a la izquierda 50 por ciento. Por lo que se moverá hacia el lado derecho. Y finalmente top 0. Y ahora cuando voy a pasar el rato sobre el enlace, puede ver que la parte roja se mueve para cubrir el lado derecho y es grado sesgado se convierte en 0. Muy bien, volvamos a trabajar en la parte azul. Iré aquí y copiaré este código, lo pegaré de nuevo, y me cambiaré antes a después. Entonces cambiaré Top 25 pixels, por lo que se desplazarán cinco pixels a la parte inferior. También cambiaré de izquierda, 251%, por lo que se sentará en el lado derecho, no en el izquierdo. También cambiaré el color de fondo a este color azul. Y ahora se puede ver la parte azul está sentada en el lado derecho. Trabajemos en el efecto que se cierne. Volveré aquí y me cambiaré antes a después. Y me limitaré a cambiar de izquierda a 0 en lugar de 50 por ciento para que el fondo azul se mueva para cubrir el lado izquierdo. Y ahora se pueden ver chicos, cuando voy y rondo sobre el enlace, la parte azul se mueve para tapar el lado izquierdo junto con el fondo rojo. Y este es el efecto exacto que queremos, que se ve realmente genial. 35. 36: efecto pulso de botones creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de botón de desplazamiento. Se puede ver cuando paso el cursor sobre el botón, este efecto ocurre cuando tenemos un fondo blanco que se hace más grande, bien desvaneciéndose. Y el enlace en sí se mueve un poco a la parte superior y aparece alguna sombra de caja debajo de él. Y al hacer clic en el enlace, se mueve un poco al fondo y cambia el valor de la sombra. Entonces veamos cómo podemos crear este efecto. Iré aquí y añadiré una etiqueta de ancla. Y voy a decir, colóqueme. Y voy a ir a mi CSS para apuntar a la etiqueta de anclaje y agregar posición. Absoluto. Decoración de texto. Ninguno. Transformación de texto. En mayúsculas. Acolchado, 25 píxeles de arriba e abajo, y 50 píxeles de izquierda y derecha. Color de fondo. Color blanco. Este color gris. Entonces border-radius, 100 pixeles. Tamaño de fuente 24 pixels. Y finalmente transitó o 0.2 segundos. Y ahora se puede ver que el enlace está buscando exactamente de la manera que queremos. Volvamos atrás y trabajemos en el efecto que se cierne. Crearemos el fondo blanco que se haga más grande usando el pseudo elemento antes. Por lo que iré aquí y seleccionaré el pseudo elemento antes de la etiqueta ancla. Y añadiré contenido, cadenas vacías, posición absoluta, top 0 y left 0 también. Entonces queremos que ocupe todo el ancho y la altura del enlace. Por lo que sumaré ancho 100% y altura 100% también. Y luego añadiré color de fondo, blanco, y radio de borde 100 píxeles. Entonces finalmente transición 0, 0. Y ahora puedes ver tenemos un fondo blanco que se sienta frente al enlace y lo está encubriendo. Y por eso el texto no es visible. Entonces volvamos aquí y añadamos el índice Z negativo 1. Y ahora se puede ver de nuevo el texto es visible. ¿ Está bien? Diré que al pasar el cursor sobre la etiqueta de anclaje, seleccionaré el pseudo elemento antes. Y queremos que el fondo blanco se haga más grande. Por lo que voy a añadir escala de transformación x 1.4 y escalar por qué 1.6. Entonces por debajo de eso, añadiré opacidad 0. Y ahora se puede ver cuando paso el cursor sobre el enlace, este efecto sucede con el fondo blanco se hace más grande mientras su opacidad disminuye, dándonos este efecto fresco. Está bien, estoy rondando. También queremos enlazar para movernos un poco a la parte superior y tener algo de sombra debajo de ella. Por lo que volveré aquí y diré, al pasar el cursor sobre la etiqueta de ancla, añadiré transformada, traduciré y negativa 3 píxeles. Por lo que el enlace se moverá tres píxeles hacia arriba y caja-sombra, 0 a lo largo del eje x, luego 10 píxeles a lo largo del eje y, luego, un valor de desenfoque de 20 píxeles. Y por último, el color de la sombra será RGBA, 0.2000. Y ahora puedes ver cuando vuelvo y vuelvo sobre el enlace, se mueve un poco a la parte superior y tenemos una sombra que aparece debajo de él. Lo único que nos queda es al hacer click en el enlace, queríamos movernos un poco al fondo otra vez y la caja-sombra para ser más pequeña. Entonces volveré aquí y diré un colon activo. Entonces eso significa que al hacer clic en el enlace, luego dentro de eso voy a añadir transformar, traducir Y negativo un píxel. Y voy a copiar la propiedad box shadow. Pégalo de nuevo y cambia 10 píxeles a cinco píxeles, 20 píxeles a 10 píxeles. Y ahora cuando voy y hago clic en el enlace, puede ver que se mueve un poco al fondo y la caja-sombra disminuye, dándonos el efecto exacto que queremos. 36. 37 - efecto de botón diagonal utilizando los bordes: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de botón de desplazamiento. Se puede ver cuando paso el cursor sobre el enlace, este efecto cool sucede. Crearemos este efecto usando la propiedad border y verás cómo. Entonces. Vamos a nuestro archivo HTML, luego agreguemos una etiqueta de ancla. Entonces dentro de esa etiqueta ancla diremos botón. Entonces iré a mi CSS y apuntaré a la etiqueta de anclaje. Después agrega decoración de texto. Ninguno. Posición, relativa. Dos 150 píxeles y altura 80 píxeles. Después con el fin de centrar el texto dentro del enlace, vamos a agregar texto alineado, centro, y altura de línea, 80 píxeles. Entonces le añadiré color. Este bonito color morado y borde. Para píxeles. Sólido. Nuestro color morado. Después para que el tamaño de la fuente sea más grande, añadiré font-size 24 pixels. Después espaciado entre letras, tres píxeles para obtener algo de espaciado entre las letras. Después transformación del texto, mayúscula, y finalmente transición o 0.5 segundos. Por lo que ahora se puede ver que el enlace está buscando exactamente de la manera que queremos. Está bien, trabajemos en nuestro efecto flotador. Creará esto usando los pseudo elementos antes y después. Pero empecemos primero con el pseudo elemento antes y entendamos cómo está sucediendo el efecto. Después usaremos el pseudo elemento after para crearlo. Por lo que apuntaré al pseudo elemento antes de la etiqueta ancla. Y añadiré contenido cadenas vacías, posición absoluta 0, izquierda 0, inferior 0, y escribiré 0 también. Entonces añadiré un color de fondo verde temporal. Por lo que ahora puedes ver tenemos este fondo verde que cubre completamente el enlace porque dijimos las propiedades superior, izquierda, inferior, y derecha a 0. Muy bien, volvamos atrás y quitemos este fondo verde. Y en lugar de fondos, bordearemos los 40 píxeles superiores, color rojo sólido por ahora. Entonces como pueden ver, ahora tenemos este borde rojo que tiene un ancho de 40 píxeles. Y elegimos 40 píxeles específicamente porque la altura del enlace es de 80 píxeles. El borde ahora está cubriendo la mitad de la altura del enlace, como se puede ver. De acuerdo, volveré aquí y añadiré borde fondo, 40 pixels, sólido, verde. Y ahora como pueden ver, tenemos un borde inferior verde que tiene un ancho de 40 píxeles y está cubriendo la mitad inferior del enlace. Está bien, Por fin, volveré y añadiré frontera, ¿verdad? 40 píxeles, amarillo sólido. Y ahora se puede ver tenemos este borde amarillo derecho que tiene un ancho de 40 píxeles también. Y creo que esta es más o menos la bandera de Sudáfrica o algo así. Está bien, y si vuelvo aquí y cambio el color del borde derecho a transparente en lugar de amarillo. Ya puedes ver que este borde derecho es transparente y está mostrando el eslabón detrás de él. Muy bien, volveré de nuevo y añadiré transición o 0.5 segundos. Entonces con el fin de hacer visible el texto detrás del fondo, voy a añadir z-index negativo. Entonces finalmente añadiré transformar traducir x negativo 100%. Y ahora se puede ver el pseudo elemento antes ahora se desplaza hacia la izquierda y los bordes se desplazan con él. Porque dijimos que son Función Traducir a negativo 100. De acuerdo, al pasar el cursor sobre el enlace, queremos hacer que el pseudo elemento antes vuelva a su posición original para encubrir el enlace. Entonces iré aquí y diré cuando pasemos el rato sobre la etiqueta de ancla, quiero hacer que pasen algunos cambios al pseudo elemento antes. Añadiré transformada, traduciré X de nuevo al 0% otra vez. Y ahora se puede ver cuando paso el cursor sobre el enlace que antes pseudo elemento vuelve a su posición original. De acuerdo, Lo único que queda es cambiar el color de los bordes a nuestro color morado. Iré aquí y cambiaré el color del borde superior a morado. Y yo haré lo mismo para la frontera inferior también. Impresionante. Ahora vamos a crear el pseudo elemento after para completar nuestro efecto, voy a ir aquí y copiar el pseudo elemento antes, pegarlo de nuevo y cambiarlo antes a después. Entonces cambiaré frontera a frontera izquierda para que la parte transparente esté sentada en el lado izquierdo, no en el derecho. Entonces también cambiaré el valor de la función de traducir al 100% en lugar de 100% negativo para que el pseudo elemento después se mueva hacia la derecha, no hacia la izquierda. También copiaré el efecto flotando. Pégalo y cámbielo antes a después. Y ahora se puede ver el pseudo elemento después se encuentra en el lado derecho del enlace y tiene la parte transparente a la izquierda. Cuando se cierne sobre el enlace, las dos partes entran para tapar el eslabón, dándonos este efecto fresco. Por último, cambiemos el color del texto del enlace a blanco. Cuando pasamos por encima de él. Diré que al pasar el rato sobre la etiqueta de ancla, cambiaré el color a blanco. También subiré aquí dentro del enlace y añadiré desbordamiento oculto para hacer las dos partes ocultas fuera de la etiqueta de anclaje. Y ahora puedes ver cuando vuelvo y vuelvo sobre el enlace, los dos pseudo elementos se unen para tapar la etiqueta de ancla y nos dan nuestro efecto realmente genial. 37. 39: efecto creativo 1: Hola a todos. En esta nueva lección del curso, estaremos creando este efecto de desvanecimiento de aspecto fresco en hover para esta imagen. Entonces cuando paso el cursor sobre la imagen, se puede ver que está acercando y girando un poco a la derecha. Y el epígrafe se está desvaneciendo con un encabezamiento de fondo negro semitransparente y un párrafo. Entonces veamos cómo podemos hacer eso. Voy a ir a mi HTML y dentro del cuerpo, voy a añadir un div y darle una clase de contenedor. Este div sostendrá tanto la imagen como la leyenda, lo que significa que será el contenedor exterior para ellos. Entonces dentro de ella, primero agregaré nuestra imagen. Por lo que voy a decir fuente de imagen, y vamos a añadir nuestra imagen. Genial. Ahora tenemos que sumar nuestro epígrafe. Iré por debajo de la imagen y agregaré un div con una clase de subtítulos. Y luego dentro de ella agregaremos un H1 y solo diremos increíble subtítulos. Entonces añadiré una etiqueta de párrafo. Y dentro de ella, solo diré que puedes escribir lo que quieras aquí. Ahora, cuando vemos esto en el navegador, se puede ver que esto no se ve tan bien. Tenemos que añadir algunos estilos para que se vea mejor. Por lo que volvamos a nuestro CSS. puedes ver ya he agregado algunos estilos al cuerpo para solo centrar cualquier cosa en él vertical y horizontalmente usando Flexbox. Además, he añadido esta familia de fuentes Leto, que también obtuve de las fuentes de Google. Ahora, empecemos apuntando al div con la clase de contenedor. Añadiré ancho, 500 píxeles, altura 500 píxeles también. Posición relativa. Y ahora se puede ver que la imagen es en realidad demasiado grande para el contenedor. Podemos arreglar eso simplemente volviendo a nuestro CSS y apuntando a la imagen y agregando ancho 100%. Por lo que cambia de tamaño para ocupar todo el ancho de su contenedor. Y se puede ver que ahora se ve mejor. Y tenemos una leyenda sentada debajo de ella justo aquí. Ahora, sigamos adelante. Voy a apuntar al div con la clase de subtítulos, que contiene el H1 y el párrafo. Entonces sumaré posición absoluta, top 0, left 0, luego altura 100% para ocupar la altura completa del contenedor. Y ancho 100% para ocupar el ancho completo del contenedor también. Y ahora se puede ver que la leyenda está sentada encima de nuestra imagen tomando su ancho y altura completa. Entonces por ejemplo, si voy aquí mismo y agrego color de fondo, negro para la leyenda. puede ver que está ocupando todo el ancho y la altura. Bien. Volvamos atrás y quitemos este fondo negro y sigamos trabajando. Ahora, necesitamos enviar al contenido dentro de la leyenda, es decir, el H1 y el párrafo. Eso haremos usando Flexbox. Entonces iré aquí mismo y agregaré pantalla, flex, luego columna de dirección flex, para que el H1 y el párrafo se apilen uno por encima del otro. Entonces voy a agregar justificar centro de contenido. Alinear los elementos centran también, modo que el contenido se centrará vertical y horizontalmente dentro del epígrafe. Y luego iré a añadir color blanco. Ahora, agreguemos algunos estilos al H1 y al párrafo. Voy a apuntar al H1 dentro del epígrafe. Y voy a añadir transformación de texto, mayúsculas y el margen 0, para que se vea mucho más bonito y más apretado. Entonces apuntaré al párrafo dentro la leyenda y agregaré tamaño de fuente 18 píxeles. Entonces el texto se transforma. Capitalizar. Genial. Ahora tenemos todo exactamente como queremos y necesitamos enfocarnos en el efecto de desvanecimiento en hover. Entonces si echamos un vistazo a nuestra demo, se puede ver que el pie de foto es invisible y al pasar el cursor sobre él, la fase de captura en con un fondo en blanco que tiene cierta transparencia. Entonces hagámoslo realmente. En primer lugar, necesitamos hacer invisible el epígrafe. Entonces iré aquí mismo dentro del selector de subtítulos y añadiré opacidad 0. Y ahora se puede ver el H1 y el párrafo ya no son visibles. Y quiero que vuelvan a ser visibles cuando pase el cursor sobre el div. Entonces iré aquí mismo. Y cuando pase el cursor sobre el contenedor, quiero hacer algunos cambios sucedieron al div de subtitulación y quería hacer una opacidad otra vez. Y para ver el cambio sin problemas, subiré aquí dentro de la leyenda y agregaré transición. Todos los ceros. Cinco segundos. Bien. Ahora cuando voy a pasar el rato sobre el div, se puede ver la captura se desvanece en bellamente. Y ahora queremos sumar el fondo también. Por lo que iré dentro del div con la clase de subtexto y agregaré fondo RGB, 0, 0, 0, 0. Por lo que este será un color negro con una opacidad de 0, lo que significa que será transparente. Yo copiaré eso y bajaré aquí, lo pegaré de nuevo. Y cambiaré la opacidad a 0.5, que ya no sea visible. Y ahora cuando vuelvo y vuelvo sobre el div, se puede ver que el fondo se desvanece con la leyenda. Bien. Ahora queremos hacer que la imagen se acerque y rote al pasar el cursor. Entonces bajaré aquí y copiaré esto. Yo quiero hacer cambios sucedieron a la imagen esta vez. Por lo que voy a añadir escala de transformación por 1.3. Por lo que la imagen se escalará 1.3 veces, dándonos el efecto Zoom en efecto. Entonces sumaré rotación por 15 grados. Ahora, cuando regrese y pase el cursor sobre el div, se puede ver que la imagen se escala hacia arriba y gira, pero está desbordando yendo fuera del contenedor. Y podemos arreglarlo fácilmente volviendo al contenedor y agregando desbordamiento oculto para que la imagen se quede dentro de los confines del contenedor. Ahora, probémoslo. Impresionante. Ahora tenemos el desvanecido en efecto con el zoom y la rotación. Y se ve genial. 38. 40: efecto creativo: Hola a todos. En esta lección, estaremos creando este interesante efecto de deslizamiento flotando. Entonces cuando paso el cursor sobre la imagen, el título se desliza de izquierda a derecha con un fondo negro semitransparente. Y la imagen se acerca y gira, igual que en la lección anterior. Entonces veamos cómo podemos hacer eso. Seguiremos trabajando con la misma imagen y leyenda que creamos en la lección anterior. Para esto y algunas lecciones futuras, sólo cambiaremos estará en el efecto mismo. Entonces aquí en mi CSS, tengo los mismos estilos que agregamos antes, pero acabo de quitar los estilos responsables del efecto hover. Por lo que puedes decir que estos serán los estilos de partida para las próximas lecciones, y los ingresaremos para crear un efecto diferente y cada lección. Entonces si le echamos un vistazo a esto en el navegador, se puede ver que tenemos todo en su lugar. La imagen está ocupando todo el ancho del contenedor en la leyenda que se sienta encima de ella. Bien. Ahora empecemos a trabajar. Iré aquí dentro del selector de subtítulos y añadiré color de fondo R, G, B a 0.500, para que tome un color de fondo semitransparente. Ahora bien, si echamos un vistazo a nuestra demo, se puede ver que la leyenda se está traduciendo desde el lado izquierdo del contenedor al contenedor de nuevo. Por lo que la posición inicial está a la izquierda del contenedor. Por lo que volveré a mi CSS y dentro del div de subtítulo, añadiré transformate translate X menos 100 para que se mueva a la izquierda por el 100% de su ancho. Entonces bajaré aquí. Y cuando pase el cursor sobre el contenedor, quiero hacer algunos cambios sucedieron a la leyenda. Yo quiero que vuelva a su posición original. Por lo que voy a añadir transformar, traducir X 0. Y ahora cuando vuelvo y vuelvo sobre el contenedor, se pueden ver los subtítulos blancos suavemente de izquierda a derecha. Ahora, queda una cosa, hacer que la imagen se acerque y gire. En realidad lo hicimos en la lección anterior. Entonces hagamos lo mismo aquí. Aquí en mi CSS. Cuando pasamos el cursor sobre el contenedor, quiero hacer que le pasaran algunos cambios a la imagen. Añadiré escala de transformación por 1.3 y rotaré por menos 15 grados esta vez. Entonces cuando voy y paso el cursor sobre el contenedor, se puede ver que el efecto de deslizamiento está sucediendo con el Zoom In y la rotación de la imagen ocurriendo al mismo tiempo. Ahora que entendemos el concepto detrás de este efecto de deslizamiento, podemos fácilmente hacer que el deslizar suceda de derecha a izquierda o de arriba a abajo. Entonces digamos que queremos que se deslicen de arriba a abajo. El puesto inicial debe estar en la parte superior de la imagen. Entonces sólo vamos a cambiar eso. Entonces iré a mi CSS e iré al div de subtítulo y cambiaré esto, traduciré x a y. y bajaré aquí y cambiaré esta x a y también. Y al hacer esto, el título se sentará encima de la imagen y nos moveremos verticalmente para cubrir la imagen cuando pase el cursor sobre el contenedor. Entonces quiero que intentes hacer que el pie de foto deslicen de derecha a izquierda y luego de abajo a arriba. Y me pueden decir si son capaces de hacerlo en la Q y una sección. 39. 41: efecto de imagen creativo: Hola a todos. En esta lección, vamos a crear este efecto de borrado. Entonces cuando paso el cursor sobre el div, puede ver que la imagen se mueve de su posición a la derecha y la leyenda entra desde la izquierda para ocupar su lugar. Esto es muy similar a la lección anterior, pero hay algunas diferencias. En primer lugar, el color de fondo aquí es un negro sólido. Ya no es semitransparente. Y el comportamiento de la imagen es diferente. Creo que recuerdas en la lección anterior la imagen con zoom y rota. Pero en esta lección, la imagen realmente se traduce en, especie de da su lugar al pie de foto. Entonces veamos cómo podemos hacer eso. Aquí. Tengo mi archivo CSS de inicio y esto es lo que obtenemos de él. Por lo que antes que nada, voy a ir a la leyenda aquí mismo y añadir color de fondo negro. Entonces para que tome su posición inicial en el lado izquierdo del div, agregaremos transform translate X menos 100% para que se mueva hacia la izquierda. Bien. Por lo que ahora puedes ver el pie movido hacia la izquierda y ya no está por encima de la imagen. Ahora, queríamos volver a su posición. Cuando pasemos el rato sobre el div, bajaré aquí. Y cuando pasemos el cursor sobre el contenedor, añadiré transformada traducir X 0, por lo que vuelve a su posición. Y quiero que la imagen se mueva a la derecha, dejando el lugar abierto para el pie de foto. Por lo que iré aquí mismo y agregaré transformado, traduciré X 100% esta vez. Y ahora cuando voy a pasar el rato sobre el div, puede ver que la imagen se mueve hacia la derecha, dejando su lugar para una leyenda que viene de la izquierda. Y así es exactamente como queremos que se vea. También podemos hacer que esto suceda de arriba a abajo. Todo lo que necesitamos para cambiar es todo el Traducir X en nuestro código para traducir y. entonces volveré a mi CSS y haré eso. Y ahora se puede ver que está sucediendo de arriba a abajo. Ahora, quiero que intentes que suceda de derecha a izquierda y de abajo a arriba. Y avísame en la sección de preguntas y respuestas, si eres capaz de hacerlo. 40. 42: efecto de imagen creativo: Hola a todos. En esta lección, vamos a aprender cómo crear este efecto de desplazamiento de imagen. Entonces si lo miras, puedes ver que la leyenda se mueve desde abajo y no está ocupando toda la altura del div, solo ocupa el ancho completo. También se puede ver que la imagen se mueve hacia arriba por la misma distancia que el pie de foto se mueve hacia arriba. Entonces veamos cómo podemos hacer eso. Entonces aquí en mi coeditor, tengo los archivos de inicio para todos nuestros efectos de imagen. Y así es como se ve en el navegador. Entonces, empecemos a trabajar en este ejemplo específico. En primer lugar, iré aquí mismo en el epígrafe dar, y añadiré color de fondo. Negro. Recuerda, nosotros subyace no está ocupando toda la altura. Por lo que subiré aquí y cambiaré de altura a sólo 30 por ciento de la altura del contenedor. Ahora se puede ver que el epígrafe está ocupando sólo el 30 por ciento de la altura del div. Pero hay un problema. El cartulina está apareciendo en la parte superior del div y queremos que aparezca en la parte inferior. No es un gran problema. Podemos arreglarlo fácilmente yendo aquí mismo y cambiando de arriba a abajo. Ahora se puede ver que el pie de foto está en la parte inferior del div. Bien. Ahora queremos que se mueva hacia abajo para que vuelva a su posición cuando pase el cursor sobre el div. Por lo que voy a ir al pie de foto y añadir transformar, traducir y 100%. Entonces lo que se moverá hacia abajo en un 100% de su altura, que en realidad es el 30% de la altura del contenedor. Ahora puedes ver que ya no es visible ya que se movió detrás del div. Ahora, cuando pasemos sobre el div, queremos que regrese a su lugar original. Entonces iré aquí mismo y agregaré transformada, traduciré Y 0. Y ahora se remonta. También queremos mover la imagen hacia arriba por la misma distancia. Entonces iré aquí mismo y agregaré transformada, traduciré y menos 30 para que se mueva hacia arriba, dejando un espacio para la leyenda. Y ahora puedes ver que la imagen se mueve hacia arriba, dándonos este bonito efecto. 41. 43: efecto creativo: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a aprender a crear este interesante efecto de desplazamiento de imagen. Entonces, al pasar el cursor sobre la imagen, se puede ver que desde abajo aparece un fondo semitransparente y se mueve hacia arriba hacia arriba y la leyenda aparece encima. Pero si observamos de cerca, podemos ver la captura y aparece un poco más tarde que el fondo. Y cuando nos alejamos, el epígrafe desaparece primero ante el fondo azul. Por lo que estaremos usando algunos retrasos de transición para hacer esto. Está bien, así que como de costumbre, empecemos por escribir el marcado de nuestro HTML. Empezaré aquí mismo agregando un div y dándole una clase de fig. Entonces dentro de ella, voy a añadir una etiqueta de imagen, y vamos a añadir nuestra imagen. Entonces tenemos que añadir el título. Por lo que debajo de la imagen, añadiré otro div y le daré una clase de subtítulo. Y dentro de este div, voy a añadir un H3, decir increíble subtítulo. Y debajo de eso, sumaré H5 y diré que puedes escribir cualquier cosa aquí. Entonces cuando vemos esto en el navegador, se puede ver que esto se ve feo. Entonces vayamos a nuestro CSS y hagamos que se vea un poco más bonito. En primer lugar, apuntaré al div con la clase de fig. Y sumaré ancho 500 píxeles. Entonces color, blanco, font-family, ferrocarril, borde radio 10 pixels. Posición relativa. Correcto, vamos a mantenerlo en movimiento. Voy a apuntar a la imagen dentro de la fig div. Y pondré su ancho al 100%. Por lo que ocupará el ancho completo de su div padre, que es de 500 píxeles. Ahora mismo se ve mucho mejor. Tenemos nuestra imagen y el título se sienta debajo de ella. Golpe. Ahora trabajemos en el fondo semitransparente que se desliza desde abajo para cubrir la imagen. Lo crearemos usando el pseudo elemento antes. Por lo que iré a mi CSS y seguro colon vago antes. Y añadiré contenido, posición vacía, absoluta, superior, 0, izquierda 0. Y queremos que ocupe todo el ancho y la altura de la fig. Por lo que diremos ancho 100% y altura 100% también. Entonces color de fondo, este color verdoso. Y debido a que es semitransparente, vamos a sumar opacidad 0.5. Ahí vamos. Se puede ver que el fondo ahora está ocupando todo el ancho y la altura del higo para que incluso cubra el título. Ahora trabajemos en el título y lo centremos horizontal y verticalmente dentro de la fig. Por lo que volveré a mi CSS y apuntaré al div con la clase de subtítulo dentro de la fig. Entonces agregaré posición, absoluta, top, 0, ancho 100%, y altura 100% también. A continuación, enviaremos a la H3 y H5 dentro de ella usando flexbox. Por lo que agregaremos flex de pantalla, luego flexionaremos la columna de dirección para hacer que el H3 y H5 se sientan uno debajo del otro. Ya ves que está configurado en fila por defecto, lo que los mostrará uno al lado del otro en una fila. Pero queremos que estén en una columna. Entonces con el fin de centrarlos, agregaremos un centro de artículos de línea. Y por último, justificar centro de contenido también. Y ahora se puede ver que el título está centrado horizontal y verticalmente dentro del fig div. Pero el contenido dentro de la leyenda, que es el H3 y H5 justo aquí. Y luciendo bien. Entonces vamos a apuntarles y hacerles ver mejor. Iré a mi CSS y añadiré fig H3 coma, y luego fig H5. Y añadiré margen 0, luego espaciado entre letras. Un píxel. Entonces debajo de eso, apuntaré al H3 individualmente. Entonces agregaré transformación de texto, mayúsculas, y font-weight 400. Entonces necesitamos un poco de espaciado debajo de él. Por lo que vamos a añadir margen inferior, sólo cinco píxeles. Y por debajo de eso, esta vez voy a apuntar al H5. Y queremos agregarle un poco de fondo. Por lo que voy a añadir color de fondo, este color pardo. Y también añadiré un relleno de tres píxeles de arriba e abajo y cinco píxeles de izquierda y derecha. Impresionante. Entonces así es como se ve el higo. Se puede ver el fondo semitransparente está cubriendo y la leyenda desde ahí mismo en el centro. Ahora tenemos que trabajar en el efecto flotando. Entonces si echamos un vistazo rápido a nuestra demo, se puede ver que el fondo se está moviendo de abajo a arriba. Y podemos hacer eso. No hay problema. Simplemente volveré a mi CSS e iré dentro del pseudo elemento antes. Y queremos posicionar el fondo debajo de la fig para que al pasar el rato, vuelva a su posición original. Entonces voy a añadir transformar, traducir y ¿por qué? ¿ 100%? Por lo que ahora se puede ver movido hacia abajo un 100% de su altura. Y debido a que su altura es igual al 100% de la altura del higo, se movió una distancia igual a la altura del higo. Por lo que ahora está posicionado justo debajo de la fig. De acuerdo, a continuación, hagámoslo invisible. Fuera de la fig. Voy a ir al higos elector, y voy a añadir desbordamiento oculto. Y ahora se puede ver que ya no es visible. Ahora estoy rondando sobre el higo. Queremos que el fondo vuelva a deslizarse hacia arriba a su posición original. Entonces, hagamos eso. En mi CSS, iré aquí mismo. Y al pasar el rato sobre el fig, quiero hacer algunos cambios sucedieron al fondo, que es el pseudo elemento antes. Yo quiero que vuelva a su posición original. Por lo que voy a añadir transformar, traducir Y 0. Y por supuesto queremos que eso suceda sin problemas. Por lo que subiré aquí dentro del selector de pseudo elemento antes, y añadiré transición todos 0.25 segundos para que el movimiento ascendente ocurra sin problemas. Y ahora cuando voy a pasar el rato sobre la higuera, se puede ver que el fondo se mueve de abajo a arriba cubriendo la higuera. Y cuando me alejo, regresa y se sienta de nuevo por debajo de la figura. Pero si volvemos a echar un vistazo a nuestra demo, se puede ver que estoy flotando. El fondo se mueve inmediatamente para cubrir el fig. Pero cuando se aleja en espera un tiempo muy corto hasta que desaparezca el título y después de eso, también desaparece. ¿ Estás viendo eso? Está bien. Podemos hacer eso usando la función de retardo de transición. Por lo que volver a nuestro CSS. Volveré a entrar dentro del pseudo elemento antes, y añadiré retardo de transición, solo 0.25 segundos. Y ahora cuando voy a pasar el rato sobre el higo, se pueden ver los pesos de fondo por un tiempo muy corto, 0.25 segundos para ser exactos, luego aparece. Y cuando se aleja en peso 0.25 segundos luego desaparece. Pero queremos que espere sólo antes de desaparecer. No queremos que espere cuando pasemos sobre el higo. Es decir, queremos que aparezca de inmediato, pero espere los 0.25 segundos antes de desaparecer. Entonces lo que debemos hacer es ir justo aquí. Y estoy flotando sobre el fig, vamos a añadir retardo de transición 0 segundos para nuestro fondo. Entonces ahora lo que pasará aquí es cuando pase el rato sobre la fig, el fondo comenzará a moverse inmediatamente porque dije el retraso de transición a 0 aquí mismo. Cuando me aleje, esperará y 0.25 segundos y luego desaparecerá. Echemos un vistazo. Enfriar. Ahora, tenemos que trabajar en el pie de foto. Si echamos un último vistazo a nuestra demo, puede ver que al pasar el rato, la leyenda espera hasta que el fondo cubra el higo y luego aparece. Por lo que usaremos el retraso de transición para que espere 0.25 segundos antes de aparecer. También puedes ver que se está desvaneciendo desde arriba por una distancia de unos 20 píxeles más o menos. Y por último, cuando nos alejamos, desaparece de inmediato. Ahora. Muy bien, así que vamos a nuestro CSS y vamos al selector de subtítulos. Después agrega transformada, traduce y menos 20 píxeles, por lo que se moverá hacia arriba en 20 píxeles. Entonces queremos que sea transparente. Por lo que agregaremos opacidad 0 y finalmente transitaremos nuestros 0.25 segundos. Muy bien, ahora, al rondar sobre el higo, quería hacer que le pasaran algunos cambios al pie de foto. Yo quiero que la leyenda se desvanezca de nuevo. Por lo que sumaré opacidad uno, y quiero que vuelva a su posición. Por lo que voy a añadir transformar traducir Y 0. Y quería esperar antes de que apareciera. Debe aparecer después de que aparezca el fondo. Por lo que le daré retraso de transición 0.3 segundos. Y ahora cuando voy a pasar el rato sobre el higo, se puede ver que el título se desvanece muy bien de arriba a abajo. 42. 44: efecto de imagen creativo: Hola a todos. En esta lección, crearemos este bonito efecto de zoom, al pasar el cursor sobre una imagen. Se puede ver acercando y gira un poco. Y lo podemos hacer usando la función de escala y la función de rotación. Entonces antes que nada, iré aquí mismo en mi HTML y añadiré un div. Y dentro de ella, voy a añadir mi imagen. Se puede ver que el tamaño de la imagen es tan grande que está ocupando toda la pantalla. Entonces vamos a nuestro CSS. Voy a apuntar al div que contiene la imagen. Entonces estableceré su ancho en 300 píxeles y su altura en 400 píxeles. Entonces añadiré borde, 50 píxeles, blanco sólido. Entonces apuntaré a la imagen y estableceré su ancho en 100, que obtenga el 100% de su contenedor, que es de 300 píxeles, luego estableceré su altura en 100% también. Sí, ahora se ve mucho más bonito. Entonces añadiré transformación de transición 1 segundo. Y a continuación, cuando pase el cursor sobre la imagen, quería hacerme más grande en tamaño y rotar un poco en el sentido de las agujas del reloj, como en nuestra demo. Por lo que voy a decir imagen en escala de transformación hover, Digamos 1.2. Por lo que el ancho y la altura aumentarán en esta relación. Entonces sumaré un espacio y agregaré rotar apenas nueve grados. Ahora, cuando vaya y pase el cursor sobre la imagen, se puede ver que se está haciendo más grande y sale del contenedor div, no te preocupes, podemos arreglarlo fácilmente yendo aquí mismo dentro del contenedor y agregando desbordamiento oculto para que la imagen se ya no salir del contenedor. Y ahora cuando voy a pasar el cursor sobre la imagen, se puede ver que estamos recibiendo el bonito zoom en los efectos de rotación. Nosotros queríamos. 43. 45 5: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de imagen. Se puede ver cuando paso el cursor sobre la imagen, este efecto sucede donde tenemos un fondo gris que viene de la esquina inferior derecha hasta que cubre la imagen. Entonces aparece este texto. Tenemos un encabezamiento que viene del lado superior derecho, un párrafo que viene del lado inferior izquierdo, y un enlace que viene de abajo. Aprenderemos a crear todo esto. Entonces empecemos primero por crear el diseño de este ejemplo. Voy a empezar en mi HTML y voy a añadir un div, darle una clase de contenedor. Entonces dentro de ella voy a añadir una imagen. Por lo que esta será nuestra imagen. Entonces debajo de ella, añadiré otro div, le daré una clase de subtítulo. Por lo que este sería el div que contiene todos los demás elementos. Y dentro de ella, voy a añadir un h2 y decir imagen hover. Entonces debajo de eso, añadiré un párrafo y añadiré algo de texto demo. Entonces por fin voy a añadir una etiqueta de ancla y decir Leer más. De acuerdo, vamos a nuestro CSS para que estos elementos se vean como queremos. Voy a apuntar al div con la clase de contenedor que tiene todos los elementos dentro de él. Y sumaré ancho, 450 pixels, altura 300 pixels. Entonces posición relativa. Entonces apuntaré a la imagen y agregaré ancho 100%. Y ahora se puede ver que el contenedor ahora tiene un ancho de 450 píxeles y una altura de 300 píxeles, y la imagen está contenida dentro de él. Muy bien, Sigamos trabajando. Crearemos el fondo de superposición usando el pseudo elemento antes del contenedor. Por lo que voy a apuntar a eso y añadir contenido. Cuerdas vacías. Posición absoluta, superior, 0, izquierda 0, ancho 101%, 100%. Color de fondo. Este color gris. Opacidad, 0.8. Y finalmente transición o 0.25 segundos. Y ahora se puede ver el fondo gris ahora tiene el mismo ancho y altura que el contenedor y lo está cubriendo. Pero si recuerdas, este fondo gris no aparece hasta que pasamos el cursor sobre la imagen y aparece desde la esquina inferior derecha. Y también se giró en 45 grados. Entonces cambiemos su posición y la rotemos. Regresaré aquí y añadiré transformada. Traducir 550 píxeles en el eje x y 300 píxeles en el eje y. Por lo que ahora se puede ver el fondo gris está sentado en esta nueva posición. Muy bien, Vamos a rotarlo también 45 grados. Regresaré aquí y agregaré rotar 45 grados. Ahora está rotado. Y por último, al rondar, queremos que se mueva por encima de la imagen y la cubra por completo. Entonces volveré aquí y estoy rondando sobre el div con la clase de contenedor. Haré cambios sucedidos al pseudo elemento antes, que es el fondo gris. Añadiré transformar, traducir, negativos 50 píxeles en el eje x y negativos 150 píxeles en el eje y. Entonces queremos mantenerlo rotado. Por lo que también sumaré rotación de 45 grados. Y ahora cuando vuelvo y vuelvo sobre el contenedor div, puede ver que el fondo gris se mueve hacia la imagen, pero no lo cubre por completo. Cubre sólo una pequeña parte de ella. Por lo que necesitamos aumentar su ancho y su altura para que lo cubra por completo. Por lo que regresaré y cambiaré el ancho al 120% y la altura al 205%. Y ahora el fondo gris es mucho más grande. Y cuando pase el cursor sobre la imagen, se puede ver el fondo gris entra y lo cubre por completo, dándonos el efecto que queremos. De acuerdo, ahora vamos a trabajar en el pie de foto y darle estilo. Voy a apuntar al div con la clase de subtítulos. Entonces sumaré posición, absoluta, superior, 0, izquierda 0 también. Entonces ancho 100%, y altura 100% también. Entonces le añadiré un color de fondo temporal rojo. Y ahora se puede ver la leyenda está sentada en la parte superior del contenedor div, porque dijimos que es propiedad de posición a absoluta. Por lo que se posiciona en relación con el div contenedor que tiene una propiedad de posición relativa. Y también tiene el mismo ancho y altura que el contenedor div porque fijamos su ancho y altura al 100%. Está bien. Ahora queremos darle a la captura el layout de nuestra demo. Queremos el H2 en la parte superior, luego el párrafo en el centro, y el enlace en la parte inferior. Y todos ellos para estar centrados y tener un espaciado adecuado entre ellos. Podemos hacer eso usando Flexbox. Entonces vayamos aquí y añadamos display flex. Después para alinear los elementos uno encima del otro verticalmente, añadiremos columna de dirección flex. Después para separarlos, agregaremos justificar el espacio de contenido alrededor. Entonces el color, el blanco y el texto se transforman en mayúsculas. Por lo que ahora se puede ver que los elementos en la Catherine Deneuve están sentados uno encima del otro y tienen algún espacio entre ellos. Sigamos adelante. Voy a apuntar al H2. Después para centrarlo, agregaré texto alineado, centro. Entonces tamaño de fuente, 17 pixels, relleno, 20 pixels, margen top 20 pixels. Y por último, color de fondo, RGB, 0.8000. Y ahora se puede ver que el H2 está sentado en esta posición en la parte superior del contenedor div. ¿ Está bien? Si recuerdas, al pasar el cursor sobre la imagen, el H2 se movería desde la esquina superior derecha y comentaría a esta posición. Entonces volvamos atrás y hagamos eso. Iré aquí y agregaré transformación, traduciré 200 píxeles en el eje x. Por lo que se mueve a unos 100 píxeles a la derecha y 200 píxeles negativos en el eje y. Por lo que se mueve 200 píxeles hacia la parte superior. Entonces añadiré transición 0, 0, 0.25 segundos. Entonces cuando se cierne sobre el div contenedor, queremos que el H2 vuelva a su posición original. Por lo que voy a decir contenedor hover H2. Y voy a añadir transformar, traducir 0 y 0. Y ahora se puede ver que el elemento H2 está sentado en la parte superior del div contenedor en su esquina superior derecha. Y cuando pasamos sobre el contenedor, vuelve a su posición original. Está bien, trabajemos en el párrafo yo lo apuntaré. A continuación, agregue tamaño de fuente 16 píxeles, ancho, 80% del ancho del contenedor. Y para alinearlo en el centro, lo haré. Alinear uno mismo, centrar, luego alinear el texto, centrar para centrar el texto. Y finalmente transición 0, 0. Y ahora se puede ver que el texto está centrado dentro del div contenedor y está ocupando el 80 por ciento de su ancho. Y en nuestro efecto, el texto viene desde la esquina inferior izquierda. Entonces volvamos atrás y hagamos eso. Volveré atrás y añadiré transformación, traduciré negativo 200 píxeles en el eje x. Por lo que se desplazará a la izquierda por 200 píxeles y 200 píxeles en el eje y. Por lo que se desplazará 200 píxeles hacia abajo. Entonces bajaré aquí. Y al pasar el rato sobre el contenedor, haré que pasen algunos cambios al párrafo. Voy a añadir transformar, traducir 00. Y ahora el párrafo está sentado en la parte inferior izquierda. Y cuando pasamos sobre el contenedor, vuelve a su posición original. De acuerdo, ahora lo que queda es el botón o el enlace. Entonces vamos a marcarlo. Yo lo apuntaré. Después agrega texto, decoración. Ninguno. Color de fondo, color negro. Blanco. Ancho 100 pixels. Después relleno, 15 píxeles. Margen, inferior 20 pixels. Entonces otra vez para centrarlo horizontalmente, voy a añadir alinear auto, centro. Entonces finalmente transición o 0.25 segundos. Y ahora se puede ver que el botón se ve exactamente como queremos, y está sentado en la parte inferior. Está bien. Sabemos que el botón entra desde abajo al pasar el cursor sobre el contenedor div. Entonces pongámoslo en la parte inferior. Volveré aquí y añadiré transformación, traduciré y 100 pixels. Entonces al pasar el rato sobre el contenedor, haré que pasen algunos cambios al enlace. Añadiré transformada, traduciré Y 0 otra vez, por lo que vuelve a su posición. Y ahora cuando regrese, puede ver que el botón está sentado a 100 píxeles debajo del contenedor div. Y cuando pase el cursor sobre él, el botón vuelve a su posición original. Ahora nos queda una cosa, y es esconder todos estos elementos. Por lo que aparecen sólo al rondar. Volveré dentro del contenedor div y añadiré desbordamiento oculto. Y ahora puedes verlos desaparecer a todos. Y cuando se cierne sobre nuestro contenedor div, aparecen de nuevo y nuestro efecto sucede. Pero se puede ver al rondar, todos aparecen de inmediato. Al mismo tiempo. Estaría bien si tenemos algunos retrasos en la transición. Por lo que queremos que el fondo de superposición aparezca de inmediato sin demora. Después de eso, queremos que aparezca el H2. Después el párrafo y finalmente el enlace en la parte inferior. Entonces volvamos atrás y agreguemos eso. Iré aquí y agregaré retardo de transición 0.3 segundos. Entonces eso significa que cuando pase el rato sobre el contenedor, esperaremos 0.3 segundos. Por lo que aparecerá después de que el fondo sea completamente visible. Entonces iré aquí y agregaré retardo de transición 0.4 segundos esta vez para que el párrafo aparezca ligeramente después del H2. Entonces por fin aquí y agregar retraso de transición 0.5 segundos. Por lo que el enlace aparecerá después de 0.5 segundos de pasar el cursor sobre el contenedor div. Y ahora cuando vuelvo y pase el cursor sobre la imagen, se puede ver el fondo aparece de inmediato. Y después de eso, aparecen los tres elementos, uno tras otro con una muy ligera diferencia de tiempo. Y al alejarse, todos desaparecen inmediatamente al mismo tiempo. No esperan porque la propiedad de retardo de transición se aplica al pasar el ratón solamente. Por lo que el retraso ocurre cuando pasamos por alto, y no sucede cuando nos alejamos. Por eso todos los elementos desaparecen de inmediato. Y al hacer eso, hemos terminado este efecto, y en las próximas lecciones veremos más efectos como estos en este ejemplo. Entonces nos vemos en la siguiente lección. 44. 46: efecto de imagen creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear otra imagen, efecto hover. Se puede ver cuando paso el cursor sobre la imagen, este efecto sucede cuando tenemos el fondo de superposición entra de derecha a una posición y se puede ver que se giró mientras era una manera. Entonces cuando regrese, su grado de rotación se convierte en 0. Por lo que ya no se rota. Entonces tenemos el enlace que sube de arriba a esta posición. Entonces el párrafo viene del derecho a su posición y también rotó mientras era un camino. Entonces, por último, el H2 viene de arriba a su posición. Entonces, empecemos a crear este efecto. Se puede ver que tenemos nuestros estilos de la lección anterior. Por lo que todo está en su lugar y sólo vamos a sumar los estilos responsables de nuestro efecto aquí mismo. Entonces, empecemos con el fondo de superposición. Voy a apuntar al pseudo elemento antes del contenedor. Y voy a añadir transformar, traducir 650 píxeles. Por lo que se traducirá 650 píxeles a la derecha a lo largo del eje x, luego 100 píxeles negativos. Por lo que se desplazará 100 píxeles hacia la parte superior. En el eje Y. También sumaré giro 180 grados. Por lo que se girará 180 grados cuando esté lejos. Y por último, voy a añadir transición 0, 0. Entonces por debajo de eso. Y al pasar el cursor sobre el contenedor div, voy a hacer algunos cambios les sucedieron antes de pseudo elemento. Voy a añadir transformar, traducir 0 y 0. Por lo que volverá a su posición original, luego girará 0 grados. Por lo que volverá a girar a 0, dándonos el efecto que queremos. Y ahora se puede ver el fondo está sentado en esta posición, 650 píxeles a la derecha y 100 píxeles hacia arriba. Y también se gira en 180 grados. Y cuando pase el cursor sobre la imagen, se puede ver que el fondo vuelve a su posición original mientras gira hacia atrás a 0 grados, dándonos este bonito efecto. Está bien, trabajemos en el H2. Yo lo apuntaré y agregaré transformación, traduciré y negativo 150 píxeles. Por lo que el h2 se desplazará a la parte superior por 150 píxeles. Entonces sumaré transición todos 0.2 segundos. Entonces cuando se cierne sobre el div contenedor, apuntaré al H2. Y añadir transformar traducir Y 0 píxeles para que regrese a su posición. También añadiré retardo de transición 0.5 segundos para que aparezca después de que aparezca el fondo. Y ahora se puede ver que el H2 está sentado encima de la imagen. Y cuando paso el cursor sobre la imagen, pesaba 0.5 segundos, luego se mueve de nuevo a su posición. Y note que cuando me alejo, inmediatamente se movió a la cima otra vez. No se despierta 0.5 segundos al alejarse porque agregamos el retardo de transición solo al pasar el cursor. De acuerdo, pasemos al párrafo. Se desplazó hacia la derecha y girarlo. Por lo que lo apuntaré. Después agrega transformada, traduce X 300 píxeles, luego gira 90 grados. Entonces añadiré transición o 0.2 segundos. Entonces al pasar el cursor sobre el contenedor div, apuntaré al párrafo. Entonces añadiré transformada, traduciré X de nuevo a 0 y rotaré de nuevo a 0 también. Entonces por debajo de eso, agregaré retardo de transición 0.4 segundos. Y ahora se puede ver que el párrafo se ha movido a la derecha en 300 píxeles y está girado en 90 grados. Y al pasar el cursor sobre la imagen, pesaba 0.4 segundos. Después gira hacia atrás a 0 grados mientras se mueve de nuevo a su posición original. Y cuando me alejo, regresa inmediatamente de nuevo a la tarifa y gira. Por último, trabajemos en el enlace. Volveré atrás y apuntado. Entonces añadiré transformada, traduciré y negativa 300 pixels. Por lo que se desplazará a la parte superior por 300 píxeles, luego transitará 0, 0, 0.2 segundos. Y de nuevo, al pasar el cursor sobre el contenedor div, apuntaré a la etiqueta de anclaje y añadiré transformación, traduciré Y 0 píxeles, por lo que vuelve a su posición. Entonces añadiré retardo de transición 0.3 segundos. Y ahora se puede ver el enlace está sentado en la parte superior de la imagen. Y cuando pase el cursor sobre él, el enlace pesaba 0.3 segundos y luego se mueve hacia abajo a su posición original. Ahora en este momento, volveré y apuntaré al div contenedor y añadiré desbordamiento oculto. Y ahora se puede ver que todos los elementos son invisibles. Y cuando pasamos el cursor sobre la imagen, vuelven a aparecer. Y el efecto que queremos sucede perfectamente. 45. 47 – efecto de imagen creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, seguiremos con efectos de desplazamiento de imagen y crearemos este bonito efecto hover. Se puede ver cuando paso el cursor sobre la imagen, se escala hacia abajo a 0 hasta que desaparece. Y las habilidades de fondo hasta mientras gira y todos los elementos se desvanecen en muy bien. Entonces vamos a crear este efecto. Se puede ver tenemos todos los estilos de las lecciones anteriores que se encargan de ubicar los elementos en sus posiciones así. Muy bien, vamos a empezar a añadir los estilos para esta lección aquí mismo. Y vamos a apuntar al div con la clase de contenedor. Entonces le añadiré color de fondo. Este color gris. Después bordea 10 píxeles, sólidos y blancos. Cuándo volveré y apuntaré a la imagen dentro del contenedor div. Y voy a añadir transición 0, 0, 5 segundos. Entonces por debajo de eso. Y al pasar el cursor sobre el contenedor, apuntaré a la imagen y añadiré la escala de transformación 0. Y ahora cuando pase el cursor sobre la imagen, se puede ver que se escala hacia abajo a 0 y desaparece. Y al alejarse, vuelve a su tamaño original. Está bien, sigamos adelante. Voy a apuntar al pseudo elemento antes del contenedor, es decir este fondo gris. Y voy a cambiar este color de fondo a este color verde. Vimos que se expande mientras gira. Entonces agrega transformar, escalar 0, girar negativo 180 grados, y finalmente transitar 0, 0, 5 segundos. Entonces debajo de eso, diré al pasar el rato sobre el contenedor, haré que pasen algunos cambios al pseudo elemento antes. Añadiré transformar, escalar uno, y rotar 0 grados para que escale de 0 a uno mientras gira hacia atrás de 180 grados a 0 grados, dándonos el efecto que queremos. Y ahora, cuando voy a pasar el rato sobre la imagen, se puede ver mientras la imagen se está escalando hacia abajo, el fondo verde se está escalando y girando, dándonos este bonito efecto. Pero sería mejor si el fondo verde se escalara hacia arriba solo después de que la imagen bajara a 0. Por lo que vamos a sumar algunos retrasos de transición al fondo verde. Cuando se cierne sobre él. Volveré aquí y agregaré retraso de transición 0.5 segundos. Y agregamos este valor específicamente porque la duración de transición de la imagen es de 0.5 segundos, lo que significa que la imagen estará bajando a 0.50 segundos. Por lo que el fondo verde aparecerá después de que la imagen desaparezca por completo. Y ahora cuando pase el cursor sobre el contenedor, se puede ver la escala de la imagen hasta 0 primero, luego el fondo verde se escala hacia arriba mientras gira. Después de eso. Ahora tenemos que hacer que el texto se desvanezca también. Por lo que volveré y apuntaré al elemento H2. Entonces sumaré opacidad 0 y transición o 0.5 segundos. Entonces cuando vuele sobre el contenedor, apuntaré al H2 y añadiré opacidad una de nuevo. Por lo que se desvanecerá en muy bien. Y yo quiero hacer lo mismo para los otros dos elementos también. Por lo que iré aquí junto al elemento h2 y añadiré el párrafo así como el enlace. Y haré lo mismo por el efecto que se cierne. Y ahora se puede ver que los tres elementos ahora están ocultos porque su opacidad es 0. Y cuando paso el cursor sobre la imagen, vuelven a aparecer. Pero como puedes ver, aparecen de inmediato. Queremos que aparezcan sólo después de que aparezca el fondo verde. Por lo que les vamos a sumar algunos retrasos de transición. Por lo que volveré atrás y bajo efecto hovering, añadiré retraso de transición 1 segundo. Al pasar el cursor sobre la imagen, estos elementos esperarán 1 segundo, luego aparecerán. Y elegí 1 segundo porque la imagen toma 0.5 segundos, luego el fondo verde tarda otros 0.5 segundos. Por lo que ambos combinados toman 1 segundo antes de que aparezcan. Es por eso que utilicé 1 segundo como valor de retardo de transición para nuestros tres elementos. Y ahora cuando paso el cursor sobre el contenedor div, se puede ver la imagen escala hacia abajo primero, luego el fondo verde se escala hacia arriba mientras gira. Y por último, los tres elementos se desvanecen muy bien. Pero al alejarse, puede ver que todos los elementos desaparecen de inmediato, en su totalidad. Mejor si el fondo verde y los tres elementos desaparecen primero, después de eso, entra la imagen y vuelve a aparecer. Entonces al alejarnos, queremos hacer que la imagen espere hasta que desaparezca por completo el fondo verde y los tres elementos. Entonces después de eso, la imagen debería escalar de nuevo. Para ello, iremos aquí dentro del selector de imágenes y agregaremos retardo de transición 0.5 segundos. Y ahora cuando vaya y pase el rato sobre el div contenedor, entonces mueva el cursor. Se puede ver el fondo verde y los tres elementos desaparecen primero. Entonces la imagen se escala de nuevo. Entonces la imagen solo está esperando 0.5 segundos, luego escala hacia arriba, pero hay un problema. La imagen también pesa 0.5 segundos al pasar el cursor sobre el contenedor. Pero queremos que aparezca de inmediato. Por lo que queremos que espere 0.5 segundos solo cuando se aleja del contenedor, ni uno que se cierne sobre él. Podemos hacer eso volviendo aquí y agregando retardo de transmisión 0. Entonces eso significa que cuando pasemos el cursor sobre el contenedor div, el retraso de transmisión de la imagen será 0. Por lo que aparecerá de inmediato porque agregamos retraso de transición 0.5 aquí arriba a la imagen. Funcionará sólo cuando nos alejemos, y eso es exactamente lo que queremos. Entonces cuando voy y paso el cursor sobre el div contenedor, la imagen se escala hacia abajo inmediatamente, luego el fondo verde se escala hacia arriba mientras gira. Y por último, los tres elementos se desvanecen. Y al alejarse, el fondo verde y los elementos desaparecen inmediatamente y la imagen aparece después de eso, dándonos el efecto que queremos. Entonces espero que ahora estén más familiarizados con la propiedad de retardo de transición y cómo se usa en diferentes situaciones. Ya sea que quieras que haga peso a tu elemento solo en flotar o en flotar solo lejos, o en ambos casos. Por lo que si quieres aplicarlo solo al pasar el cursor, puedes hacerlo fácilmente agregándolo en el bloque flotante de código. Y si quieres aplicarlo solo cuando te alejas, puedes aplicarlo en el código del elemento. Después, en el código de desplazamiento, puedes establecerlo en 0. Por lo que será 0 cuando se cierne solamente. Por lo que será 0 solo al pasar el cursor, y al alejarse, tendrá el valor que lo aplique en el código del elemento. Y por último, si quieres aplicarlo en ambos casos, flotar y al alejarse, solo tienes que añadirlo en el código del elemento. 46. 48: efecto de imagen creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear otro efecto de desplazamiento de imagen. Se puede ver cuando paso el cursor sobre la imagen, el fondo verde se desvanece n y el H2 y el párrafo se desvanecen también. Se puede ver que eran más grandes que cuando rondaban. Nos hacemos más pequeños y regresamos a su tamaño original y el enlace se mueve de abajo a su posición. Entonces esto va a ser un efecto agradable. Veamos cómo podemos crearlo. Por lo que aquí puedes ver tenemos nuestros estilos de las lecciones anteriores y solo vamos a sumar los estilos responsables de nuestro efecto. Entonces, en primer lugar, crearemos el desvanecimiento de fondo. En efecto, apuntaré al pseudo elemento antes del contenedor. Y sumaré opacidad 0, luego transición o 0.3 segundos, luego por debajo de eso. Y al pasar el cursor sobre el div contenedor, apuntaré al pseudo elemento antes. Después agrega opacidad. Una otra vez. Y ahora se puede ver que el fondo verde ha desaparecido. Y cuando voy a pasar el rato sobre la imagen, se desvanece muy bien. Muy bien, trabajemos tanto en el H2 como en el párrafo. Apuntaremos a ambos. Entonces añadiré escala de transformación 10, para que haya 10 veces más grande. Entonces por debajo de eso, añadiré opacidad 0. Entonces finalmente transición. Los tres segundos. Entonces debajo de eso, al pasar el cursor sobre el contenedor div, apuntaré a la etiqueta H2, y haré lo mismo para el párrafo. Entonces añadiré opacidad uno, luego Transformar Escala uno otra vez. Y ahora se puede ver el H2 y el párrafo ahora están ocultos. Y cuando se cierne sobre la imagen, vuelven a aparecer. Se pueden ver que se hacen más pequeños hasta que regresan al tamaño original. Por último, queremos trabajar en el enlace. Queremos que se mueva de abajo a arriba cuando pasemos el cursor sobre la imagen. Por lo que volveré aquí y apuntaré al enlace. Entonces añadiré transformar, traducir y, 150 píxeles. Por lo que el enlace se desplazará hacia abajo por 150 píxeles. Entonces sumaré transición o 0.3 segundos. Y por debajo de eso, al pasar el cursor sobre el contenedor div, apuntaré a la etiqueta de anclaje y agregaré la transformación. Traducir Y 0 de nuevo, por lo que vuelve a su lugar original. Y ahora cuando regrese, puede ver que el eslabón también desaparece. En realidad está sentado detrás de la imagen, pero no aparece porque teníamos la propiedad de desbordamiento establecida como oculta en el div contenedor. Y cuando pase el cursor sobre la imagen, se puede ver que el enlace viene de abajo a arriba, dándonos este bonito efecto. Y todos los elementos ahora tienen el efecto rondando que queremos. Pero agreguemos algún retraso a nuestros elementos al rondar para que aparezcan ligeramente después del fondo verde. Añadiré un retraso de 0.2 por cada uno de ellos. Por lo que iré aquí y agregaré retardo de transición, 0.2 segundos. Entonces abajo aquí añadiré retardo de transición 0.2 segundos también. Y ahora cuando voy a pasar el rato sobre el contenedor div, se puede ver que los elementos aparecen ligeramente después del fondo verde. Y al alejarse, todos desaparecen inmediatamente juntos. El retraso no aplica en este caso porque lo fijamos para que se cierne solamente. 47. 49: efecto de imagen creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear otro efecto de desplazamiento de imagen. Se puede ver cuando paso el cursor sobre la imagen, se escala hacia abajo a 0 mientras gira y su opacidad disminuye a 0 también. Después se desvanece un fondo verde. Después los tres elementos se mueven de arriba a su posición original, uno tras otro. El enlace aparece primero, luego el párrafo, luego el encabezamiento. Utilizaremos la propiedad de retraso de transición para que aparezca el fondo verde después de que la imagen desaparezca. También lo usaremos para que nuestros elementos aparezcan uno tras otro. Entonces veamos cómo podemos crear eso. Se puede ver que tenemos los estilos de las lecciones anteriores. Entonces tenemos a nuestros elementos sentados en sus posiciones. Ahora volvamos atrás y creemos los estilos para esta lección. En primer lugar, apuntaré al div con la clase de contenedor. Y voy a añadir color de fondo. Este color gris oscuro, para que aparezca cuando la imagen se escala hacia abajo y borre 10 píxeles, blanco sólido. Por lo que ahora puedes ver tenemos este borde blanco alrededor del div contenedor, y también tenemos un fondo gris. Muy bien, volveré atrás y apuntaré a la imagen dentro del contenedor. Y sumaré transición 0, 0, cinco segundos. Entonces debajo de eso, al pasar el cursor sobre el contenedor, apuntaré a la imagen. Y queremos hacer que la imagen disminuya mientras rota. Por lo que voy a añadir transformación, rotar 720 grados, luego escalar 0. También queremos que se desvanezca mientras el efecto está sucediendo. Por lo que voy a añadir opacidad 0. Y ahora se puede ver cuando voy a pasar el rato sobre el contenedor, la imagen se escala hacia abajo mientras gira y su opacidad disminuye hasta que desaparece. Está bien, trabajemos en el fondo verde. Voy a apuntar al pseudo elemento antes del contenedor. Y voy a añadir un color de fondo. Este color verde, luego opacidad 0 y transición 0, 0. Entonces por debajo de eso. Y al pasar el cursor sobre el contenedor, haré que pasen cambios al pseudo elemento antes. Haré que sea opacidad. Una otra vez. Por lo que tendrá este bonito efecto de desvanecimiento, y quiero que eso suceda después de que la imagen desaparezca. Entonces mientras agregaremos retardo de transmisión 0.5 segundos. Y ahora se puede ver que el fondo de superposición acaba desaparecer porque pusimos su opacidad en 0. Y al pasar el cursor sobre el contenedor, aparece de nuevo por encima del fondo gris del contenedor después de que la imagen desaparezca por completo. Muy bien, volvamos atrás y creemos el efecto de nuestros tres elementos. Empezaré con el enlace. Yo lo apuntaré. Y queremos que se mueva de arriba a su posición original. Por lo que agregaré transformación, traduciré y negativo 300 píxeles, luego transición o 0.2 segundos. Y por debajo de eso se cierne sobre el contenedor. Voy a apuntar a la etiqueta de anclaje y añadir transformación. Traducir Y 0 de nuevo, por lo que vuelve a su posición original. También añadiré retardo de transición 0.5 segundos. Y ahora se puede ver el enlace está sentado en la parte superior del contenedor. Y cuando paso el cursor sobre el contenedor, el enlace pesaba 0.5 segundos y luego vuelve a su posición. Hagamos rápidamente el mismo efecto con un párrafo y el encabezamiento. Volveré atrás y copiaré este código. Después pegarlo de nuevo dos veces. Entonces me apuntaré al párrafo. Esta vez. También apuntaré el párrafo aquí en el efecto que se cierne. Y simplemente cambiaré el retraso de transición a 0.7 segundos. Por lo que aparecerá ligeramente después del enlace. Entonces debajo de eso, apuntaré al rumbo esta vez y cambiaré el retardo de transición a 0.9 segundos. Por lo que aparecerá después del párrafo. Entonces subiré aquí dentro del contenedor div y añadiré desbordamiento oculto para que los elementos se oculten fuera del contenedor. Y ahora se puede ver todo fuera del contenedor div está oculto. Y al pasar el rato sobre él, los tres elementos aparecen uno tras otro. Entonces lo que hicimos chicos es sencillo. Acabamos de hacer bajar la imagen mientras rotábamos. Después hicimos que el fondo verde se desvaneciera. Y por último, hicimos que nuestros elementos aparecieran uno tras otro. Y eso nos da el efecto que queremos. 48. 51: efecto de menú creativo: Hola a todos. En esta lección, vamos a crear este menú efecto de desplazamiento. Cuando paso el cursor sobre cualquier enlace del menú, puedes ver que dos líneas se están escalando. El top cuando escalamos desde la izquierda y el inferior un bigote desde la derecha. La idea detrás de este efecto es simple. Simplemente utilizaremos los pseudo elementos antes para crear la línea superior, que será el ancho completo del enlace. Entonces le agregaremos escala x 0, por lo que desaparecerá. Cuando pasemos el cursor sobre el enlace, lo haremos para que la escala x sea una. Por lo que vuelve a aparecer. Pero haremos que el origen transformado se quede. Por lo que crecerá de izquierda a derecha. Enfriar, pero construyamos con estilo nuestro menú primero, iré a mi HTML y añadiré un UL LI y una etiqueta de ancla dentro de ella. Y voy a decir casa. Entonces copiaré eso y lo pegaré de nuevo muchas veces. Y voy a cambiar el texto. Ahora puedes ver nuestro menú y está centrado horizontal y verticalmente dentro del cuerpo, gracias a algunos estilos Flexbox que se agregan al cuerpo aquí mismo. Bien. Ahora vamos a trabajar en el propio menú. Voy a apuntar a la UL, luego agregar relleno 0 y margen 0, y luego mostrar flex para hacer que el elemento de lista se sienta uno al lado del otro. Y por último, flex wrap. Envuelva para que los elementos de la lista caigan a la siguiente línea cuando no tengan espacio disponible. Entonces apuntaré a los elementos de la lista dentro de la lista desordenada. Y voy a añadir estilo de lista ninguno para deshacerme de la bala que aparecen junto a los ítems de la lista. Entonces apuntaré a los enlaces. Y voy a añadir decoración de texto, ninguna para quitar los subrayados. Entonces colorea este bonito color gris oscuro y tamaño de fuente. 22 píxeles. Después muestra el relleno de bloques, diez píxeles de arriba e abajo, y 15 píxeles de izquierda y derecha. Entonces, por último, posición relativa. Y mira eso. Increíble. Ahora nuestro menú se ve exactamente como queremos y estamos listos para trabajar en el efecto hover. Entonces iré aquí mismo y le añadiré un colon. Antes. Entonces añadiré contenido, cadena vacía, luego posición absoluta, arriba, 0, izquierda, 0, ancho, 100%. Altura. Tan solo dos píxeles. Color de fondo. Nuestro bonito color gris oscuro. Ahora puedes ver que la línea está apareciendo en la parte superior y tiene el ancho completo. Y es una pequeña altura de dos píxeles. Sigamos trabajando. Iré aquí mismo y agregaré escala de transformación x 0 para que su ancho sea 0. Y voy a añadir transición 0, 0, 5 segundos. Entonces cuando pasemos el cursor sobre el enlace, quiero que vuelva a aparecer la línea. Entonces iré aquí mismo y le añadiré un colon, flotando colon antes. Y volveré a añadir escala de transformación x uno. Y ahora cuando paso el cursor sobre cualquier enlace, se puede ver que la línea está creciendo de nuevo. Pero está creciendo desde su centro porque el origen de la transformación se establece en centro por defecto. Pero queremos que se escale o crezca desde su lado izquierdo. Por lo que voy a volver al antes un pseudo elemento agregar transformación origen izquierda. Y ahora cuando voy y vuelvo a pasar sobre cualquier enlace, se puede ver que la línea está creciendo ahora desde su punto final izquierdo, dándonos el efecto exacto que queremos. Por último, necesitamos crear la línea de fondo es, bueno, no te preocupes, va a ser muy fácil. Lo que haré es copiar todo el pseudo elemento antes, pegarlo de nuevo, y solo haré algunos cambios. Entonces, en primer lugar, cambiaré la palabra antes a después. Entonces cambiaré esto de arriba a abajo. Por lo que la línea estará en la parte inferior del enlace. Entonces cambiaré el origen de la transformación para escribir para que crezca desde su lado derecho, no lado izquierdo. Y por supuesto, iré aquí mismo e incluido en el efecto hover. Entonces, cuando pase el cursor sobre el enlace, el pseudo elemento después debería crecer también. Y eso es todo. Si voy a pasar el rato sobre cualquier enlace, se puede ver que el efecto es exactamente lo que íbamos a buscar. 49. 52: fondo creativo y flujo de menú: Hola a todos. Bienvenido a esta nueva lección en el curso donde vamos a crear este efecto hover al pasar el cursor sobre los elementos del menú son enlaces. Para que veas tenemos un fondo que se desvanece junto con estos dos bordes desde las esquinas superior derecha e inferior izquierda. Lo tengo. Entonces veamos cómo podemos crear este efecto. Iré aquí en mi HTML y añadiré un UL LI dentro de ella y una etiqueta de ancla dentro de la LI. Y voy a decir en casa. Entonces copiaré esto, lo pegaré cuatro veces. Y diré sobre servicios de cartera y contacto. Después iremos a nuestro CSS para agregar algunos estilos. En primer lugar, apuntaré a la UL, agregaré margen 0, relleno 0, y display flex con el fin de mostrar todos los elementos de la lista lado a lado. Y por último, para deshacernos de las balas, vamos a añadir list-style-type. Ninguno. Está bien, vamos a mantenerlo en movimiento. Voy a apuntar a la etiqueta de anclaje y pondré su color a este color gris oscuro. Entonces queremos que el tamaño de la fuente sea un poco más grande. Por lo que voy a añadir font-size 20 pixels. Entonces texto-decoración. Ninguno para quitar los subrayados. Transformación de texto. Mayúsculas para hacer mayúsculas todas las letras. Acolchado, cinco píxeles de arriba e abajo, y diez píxeles de izquierda y derecha. Y queremos sumar algunos espacios entre los enlaces. Por lo que vamos a añadir margen 0 píxeles de arriba e abajo, y diez píxeles de izquierda y derecha. De acuerdo, ahora vamos a sumar posición, relativa y transición. 0, 0, 5 segundos. Bien. Ahora nuestros enlaces están sentados uno al lado del otro con algunos espacios entre ellos y se ven bien. A continuación, trabajemos en el efecto hover. Crearemos los bordes que aparecen en la esquina superior derecha y en la esquina inferior izquierda utilizando los pseudo elementos antes y después. Entonces iré aquí mismo y diré un colon antes. Entonces dentro de ella, añadiré contenido. Cuerdas vacías, posición absoluta. Y esta será la frontera que aparece en la esquina inferior izquierda. Por lo que diremos abajo 0 y izquierda 0. Entonces haremos esto antes de pseudo elemento o cuadrado y le agregaremos bordes. Por lo que sumaré ancho, 12 píxeles, altura 12 píxeles. Entonces para ver lo que tenemos ahora, agreguemos un color de fondo temporal. Por lo que añadiré color de fondo, azul, por ejemplo. Por lo que aquí puedes ver los pseudo elementos antes se sientan aquí mismo en la esquina inferior izquierda, y tiene un ancho y alto de 12 píxeles y un color de fondo azul. Ahora queremos agregarle un borde alrededor justo del lado izquierdo y del lado inferior. Entonces hagámoslo. Volveremos al pseudo elemento antes, y añadiré borde, tres píxeles sólidos. Y voy a añadir este bonito color rojo. Ahora bien, esta línea de código que acabamos de agregar pondrá un borde alrededor de todos los lados del fondo azul. Entonces si echamos un vistazo, puedes ver ahora tenemos un borde rojo alrededor del fondo azul aquí, pero sólo queremos que la frontera esté alrededor de los lados inferior e izquierdo. Para ello, podemos usar la propiedad border width. Por lo que volveré aquí mismo dentro del pseudo elemento antes, y añadiré ancho de borde. Y la propiedad de ancho del borde acepta cuatro valores. El primer valor indica el lado superior, luego el lado derecho, el lado inferior después de eso, luego finalmente el lado izquierdo. Entonces arriba, derecha, abajo, izquierda. Y como solo queremos bordes en los lados izquierdo e inferior, agregaremos 0 para el lado superior, luego 0 para el derecho, luego tres píxeles, y tres píxeles tanto para el lado inferior como para el izquierdo. Y ahí está. Ahora puedes ver que tenemos la frontera que queremos, lo que significa que ya no necesitamos este fondo azul. Por lo que iré aquí mismo y lo quitaré. Ahora. En este momento queremos crear el borde en la esquina superior derecha. Esto será realmente fácil. Simplemente copiamos esto antes pseudo elemento, lo pegamos y lo cambiamos antes a después. Entonces en lugar de abajo e izquierda, vamos a sumar arriba y derecha. Y sabemos que queremos una frontera en las esquinas superior y derecha. Por lo que arreglaremos este ancho de borde aquí mismo y lo haremos tres píxeles. Tres píxeles, 00, en lugar de 003 píxeles, tres píxeles. Ahí vamos. Ahora tenemos las dos fronteras, y están montadas en la esquina superior derecha, en la esquina inferior izquierda. A continuación queremos trabajar en el efecto hover. Por lo que queremos desplazar un poco los bordes hacia adentro, luego establecer la opacidad en 0 para hacerlos invisibles. Y al flotar, les haremos retroceder hacia afuera y volveremos a hacer de la opacidad una. Todo esto tendrá sentido una vez que lo hagamos. Entonces lleguemos a ello. Iré aquí mismo dentro del pseudo elemento antes, que es la esquina inferior derecha aquí. Y cambiaré izquierda e inferior a 12 píxeles en lugar de 0. Por lo que ahora se puede ver esto empuja la frontera hacia adentro hacia el propio eslabón. Y voy a añadir opacidad 0 para hacer esto invisible. ¿Verdad? Ahora, estoy rondando sobre el enlace. Queremos hacer que la frontera se mueva hacia afuera otra vez y aparecer por nosotros. Entonces voy a decir una y estoy rondando sobre el enlace. Quiero hacer que pasen algunos cambios al pseudo elemento antes. Añadiré opacidad, uno. Entonces abajo. Queremos que sea hacia afuera. Entonces digamos menos ocho píxeles y la izquierda menos ocho píxeles también. Ahora queremos que este cambio ocurra sin problemas. Por lo que subiremos aquí dentro del pseudo elemento antes, y vamos a sumar transición todos los ceros. Por lo que ahora cuando voy a pasar el rato sobre el enlace, se puede ver la esquina inferior izquierda aparece en movimientos hacia afuera, dándonos el efecto al que estábamos apuntando. Ahora. Muy bien, Hagamos eso rápidamente para la esquina superior derecha. Iré aquí y cambiaré arriba y derecha a 12 píxeles y 12 píxeles en lugar de 00. Entonces sumaré opacidad 0, luego transitaré nuestros 0.3 segundos. Y después de eso, copiaremos esto. Pega de nuevo, cambia antes a después, abajo a arriba, de izquierda a derecha. Y ahora cuando voy a pasar el rato sobre el enlace, se puede ver que las fronteras se están moviendo hacia afuera, dándonos este bonito efecto. Ahora, queda una cosa, que es cambiar el fondo del enlace cuando pasamos el cursor. Hagámoslo rápidamente. Voy a ir aquí mismo y decir, estoy rondando. Añadiré color de fondo, el mismo color rojo que el borde, y color blanco para hacer el color del texto blanco, claro. Y ahora cuando voy a pasar el rato sobre cualquier enlace, se puede ver que tenemos el efecto que queremos, que es, como siempre, muy bonito. 50. 53: efecto de fondo creativo: Hola a todos. Bienvenido a esta nueva lección en el curso donde vamos a crear este bonito efecto de menú hover. Para que veas que cuando flotamos, tenemos esta acción realmente bonita pasando. El fondo se divide en cuatro partes y se mueven de arriba a abajo, una tras otra, dándonos este resultado. Por lo que para crear este efecto, primero crearemos las cuatro partes del fondo, luego las escalaremos de arriba a abajo utilizando la función de escala y. Y por último, utilice la propiedad de retraso de transición para hacer el retraso para cada uno de ellos y hacerlos aparecer uno tras otro. Entonces lleguemos a ello. Empezaré aquí mismo en mi HTML agregando una etiqueta de ancla UL LI. Y voy a decir casa. Entonces para crear las cuatro partes, usaremos tramos. Por lo que voy a añadir cuatro tramos dentro de la etiqueta de anclaje. Y cada lapso será una parte del fondo gris que aparece al pasar el rato. Entonces copiaré todo el LI, lo pegaré cuatro veces. Y yo solo cambiaré el texto cada vez. Por lo que diré de servicios, equipo, y contacto. Entonces aquí tenemos nuestra URL, pero hagamos que se vea mejor. Iré a mi objetivo CSS, la URL. Y sumaré margen 0, relleno 0. Y con el fin de que el elemento de lista se sienta uno al lado del otro, agregaremos display flex a la URL. Entonces queremos deshacernos de las balas. Por lo que vamos a añadir lista-style-type, ninguno. De acuerdo, ahora vamos a darle estilo a los enlaces ellos mismos. Voy a apuntar a las etiquetas de anclaje, y voy a añadir bloque de visualización para que podamos agregarles ancho y alto. Y eso es lo que haré a continuación. Por lo que sumaré con 120 pixels, altura, 40 pixels. Entonces para centrar el texto vertical y horizontalmente, agregaremos la altura de línea, 40 píxeles y el texto alineado. Centro. Enfriar. Ahora vamos a añadir color rojo por ahora. Entonces transforman el texto en mayúscula. Y para quitar los subrayados, vamos a añadir decoración de texto. Ninguno. Entonces posición relativa. Y finalmente transición o 0.5 segundos. Muy bien, ahora tenemos nuestra configuración de enlaces lado a lado y luciendo bien. A continuación trabajaremos en los tramos para crear el fondo. Por lo que apuntaré a los tramos dentro de las etiquetas de anclaje. Y sumaré posición, absoluta. Y debido a que tenemos cuatro tramos, estableceremos el ancho en 25 por ciento para cada uno de ellos. Después usaremos la propiedad izquierda para controlar su posicionamiento. Por lo que sumaré ancho, 25 por ciento, luego altura , 100% por supuesto, porque ocupan la altura completa. Entonces color de fondo, este color gris oscuro. Y no queremos que encubran el texto en el enlace. Por lo que vamos a sumar z-índice minos1, luego a la izquierda 00. Y lo que esto hará es que hará que los cuatro tramos ocupen el 25 por ciento del ancho del enlace desde la izquierda. Por lo que todos ellos estarán apilados uno encima del otro. Los vamos a apuntar individualmente para cambiar la posición de cada uno. Entonces cuando voy y recargo la página, se puede ver para el primer enlace, por ejemplo, hay un fondo gris oscuro tomando un 25 por ciento del enlace con y esos son en realidad los tramos forestales, pero todos están sentados en top uno del otro. Está bien. Vamos a cambiar sus posiciones para cubrir todo el ancho del enlace. Apuntaremos cada lapso de forma individual. Voy a ir aquí mismo y decir span nth niño también. Y sumaré izquierda 25 por ciento. Por lo que comenzará en el 25 por ciento del ancho del enlace desde la izquierda. Entonces ahora se puede ver que ahora está desplazado a la izquierda y estamos cubriendo el 50 por ciento del eslabón, ya no el 25 por ciento. Entonces voy a copiar esto, pegarlo de nuevo dos veces. Y voy a apuntar al tercer lapso. Cambiar a la izquierda al 50%. Entonces el cuarto lapso y cambio dejó al 75 por ciento. Por lo que ahora se puede ver que los cuatro tramos se encuentran uno al lado del otro. Cada uno de ellos tiene el 25 por ciento de los anchos de enlace. Y juntos están al 100% y cubriendo el enlace. Ahora mismo necesitamos trabajar en el efecto flotante. Iré aquí mismo dentro del selector de span general y añadiré escala de transformación y 0 para que desaparezcan los tramos. Entonces debajo de eso, diré que cuando pasemos por encima de los enlaces, haremos que pasen algunos cambios a los tramos. Agregaremos escala de transformación y, una para devolverlos nuevamente a su tamaño original. Y para que el efecto suceda sin problemas, subiremos aquí y agregaremos transición o 0.5 segundos. Ahora, ¿verdad? Ahora, cuando voy a pasar el cursor sobre los enlaces, se puede ver que los tramos se están escalando hasta su posición original. Pero esto está sucediendo desde el punto central. Y queremos que suceda desde el centro superior. Por lo que iremos al selector de span y añadiremos pestaña de origen de transformación. Y ahora cuando volvemos a flotar, están escalando desde arriba, ya no desde el centro. Pero ahora mismo todos los tramos se están escalando al mismo tiempo. Por lo que parece que todo es un fondo oscuro, no cuatro separados. Queremos que escalen uno tras otro, y podemos manejar eso no hay problema usando la propiedad de retardo de transición. Por lo que iré aquí mismo dentro del segundo lapso. Y voy a añadir retardo de transmisión punto cero 15 segundos. Entonces dentro de la tercera, añadiré retardo de transición 0.3 segundos. Entonces para el cuarto, añadiré retardo de transición punto cero durante cinco segundos. Y ahora cuando voy a pasar el rato sobre el enlace, puedes ver que están escalando uno tras otro, acercándonos más a nuestro efecto completado. Ahora, queda una cosa, que es cambiar este color rojo en el texto del enlace. Por lo que iré al selector de etiquetas de anclaje, cambiaré este color rojo a gris oscuro. Y debajo de eso, diré que cuando pasemos el cursor sobre el enlace, el color cambiará a blanco. Entonces ahí lo tienes, un efecto hover realmente bonito. Y lo genial al respecto es que puedes controlarlo fácilmente de la forma que quieras. Por ejemplo, puede agregar más de cuatro tramos en cambiar el ancho. E incluso puedes cambiar el color de cada lapso. Entonces, solo juguemos un poco y cambiemos algunos valores y veamos qué podemos conseguir. En lugar de hacer el ancho 25 por ciento y la altura 100%, Vamos a revertir eso. Cambiaré el ancho al 100% y la altura al 25 por ciento. Y ahora cada lapso tendrá el ancho completo y una altura igual al 25 por ciento de la altura del enlace. En este caso, queremos que se sientan uno debajo del otro. Entonces iremos aquí mismo y cambiaremos estas izquierdas por arriba. Y así, ahora tenemos un efecto totalmente diferente donde el lapso se sienta por debajo del otro, ocupando el ancho completo y el 25 por ciento de la altura. Vamos también a cambiar escala y a escala x y a ver qué vamos a obtener. Por lo que ahora los tramos se escalarán a lo largo del eje x, no del eje y. Entonces si voy y floto, puedes ver que nos da un efecto totalmente diferente, que todavía se ve muy bien. Y tal vez podamos cambiar el origen de la transformación a izquierda en lugar de tabulador para que los tramos se escalen desde la izquierda y no desde la parte superior. Y así, usar transformaciones CSS, podemos obtener una amplia variedad de efectos con cambios muy menores en nuestro código. 51. 54 - efecto de menú creativo: Hola a todos, bienvenidos a esta nueva lección en el curso de animaciones CSS. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Para que puedas ver cuando pase el cursor sobre el menú, estos dos subrayados aparecen muy bien y nos dan este efecto. Por lo que el azul subrayado aparece por la izquierda y se mueve hacia la derecha, mientras que el rosa aparece por la derecha y se mueve hacia la izquierda. Este es un efecto fácil pero agradable. Entonces vamos a crearlo juntos. Empezaré aquí en mi HTML agregando un UL. Entonces dentro de ella, voy a añadir una L, luego anclar etiqueta dentro de eso. Y copiaré esto y lo pegaré cuatro veces. Entonces diré a domicilio sobre servicios, contacto de cartera. De acuerdo, ahora iré a mi CSS para darle estilo a este menú. Voy a apuntar a la UL y añadir relleno 0. Después muestra flex para hacer que el elemento de la lista se sienta uno al lado del otro. Entonces debajo de eso, apuntaré a la LI dentro de la URL, y agregaré list-style-type, ninguna para quitar las viñetas que aparecen además de los ítems de la lista. Entonces añadiré relleno, 10 píxeles de arriba e abajo, y 20 píxeles de izquierda y derecha. Enfriar. Ahora vamos a apuntar a las etiquetas de anclaje ellos mismos y añadir decoración de texto. Ninguno para quitar los subrayados. Entonces el texto se transforma. Mayúscula. Tamaño de fuente 20 pixels. Color. Este color gris oscuro. Y por último, posición. Relativo. Impresionante. Por lo que ahora puedes ver nuestro menú está buscando exactamente de la manera que queremos. Ahora, trabajemos en los subrayados que aparecen y se mueven. Cuando pasemos el cursor sobre cualquier elemento del menú, utilizaremos los pseudo elementos antes y después para crear los subrayados. Empecemos por crear el primero usando V antes pseudo elemento. Iré aquí mismo dentro de mi CSS y diré UL LI un colon antes. Y voy a añadir contenido. Cadena vacía, ancho, digamos 15 píxeles por ahora. Y altura, cinco píxeles. Color de fondo. Este bonito color azul. Posición. Absoluto. Arriba, 120% Izquierda 0. Por lo que ahora puedes ver tenemos nuestra línea azul con el ancho de 15 píxeles y una altura de 50 píxeles. Y está sentado debajo de nuestros enlaces porque dijimos que es propiedad superior al 120%. De acuerdo, ahora vamos a añadir la otra línea rosa. Simplemente copiaré el pseudo elemento antes. Pégalo de nuevo y cámbielo antes a después. Y voy a cambiar el color de fondo a este color rosa. Y en lugar de izquierda, lo cambiaré a calificar. Y así, ahora tenemos el rosa en el lado derecho de nuestros enlaces. Enfriar. Ahora, vamos a trabajar en el efecto flotador. Al pasar el cursor sobre cualquiera de estos enlaces, queremos que el subrayado azul crezca hasta que se convierta en 50% de los anchos de enlace y se mueva a la derecha al mismo tiempo. Y también queremos que el rosa crezca hasta 50 por ciento de los anchos de enlace y se mueva a la izquierda. Entonces hagámoslo. En primer lugar, subiré aquí dentro del pseudo elemento antes y cambiaré el ancho a 0 en lugar de 15 píxeles para que desaparezca. Entonces haré lo mismo por la línea rosa. Entonces bajaré aquí y diré UL LI, un colon, flotando colon antes. Y sumaré ancho 50 por ciento y transformaré traducir X 100%. Y para que este efecto suceda sin problemas, subiré aquí dentro del pseudo elemento antes y añadiré transición o 0.5 segundos. Entonces ahora cuando voy a pasar el cursor sobre cualquier enlace, puede ver que la línea azul se mueve de izquierda a derecha y su ancho se convierte en el 50 por ciento de los anchos de enlace al mismo tiempo. Enfriar. Ahora, hagamos lo mismo por la línea rosa. Voy a copiar este bloque de código. Pégalo de nuevo, cambia antes a después para apuntar a la línea rosa. Y simplemente cambia la función Traducir X a negativa 100% en lugar de 100% porque queríamos movernos hacia la izquierda, no hacia la derecha. Y finalmente, subiré aquí dentro del pseudo elemento after y agregaré transición 0, 0, cinco segundos. Y ahora cuando voy a pasar el rato sobre cualquier enlace, puede ver que la línea azul se mueve hacia la izquierda y la rosa se mueve hacia la derecha, dándonos este efecto fresco. 52. 55 - efecto de menú creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Como pueden ver, cuando paso el cursor sobre cualquier enlace de nuestro menú, se hace más grande y tiene un fondo naranja. Pero lo bueno es que los otros enlaces se vuelven borrosas. Entonces el enlace en el que estamos rondando entra en foco y los otros enlaces se vuelven borrosas. De acuerdo, vamos a crear este efecto. Iré aquí en mi HTML y añadiré una URL. Entonces dentro de ella añadiré un LI, luego una etiqueta de ancla. Y dentro de eso voy a decir casa. Entonces volveré a copiar eso cuatro veces. Y decir de servicios, cartera y contacto. Por lo que aquí puedes ver todos los elementos de la lista están ahí. De acuerdo, iré a mi CSS y apuntaré a la UL. Entonces añadiré margen 0, relleno 0 también. Entonces con el fin de mostrar los artículos de lado a lado, añadiré display flex. Entonces apuntaré a los elementos de la lista dentro de la UL y agregaré ningún estilo de lista. Margen, 0 píxeles de arriba e abajo, y 20 píxeles de izquierda y derecha. Entonces agregaré transición 0.5 segundos. Muy bien, ahora apuntaré a las etiquetas de anclaje dentro de los ítems de la lista y agregaré bloque de visualización para que podamos controlar su tamaño y hacerlo más grande. Entonces después de eso, sumaré posición. Relativo. Decoración de texto. Ninguno. Acolchado. Cinco píxeles. Tamaño de fuente, 22 pixels, color blanco. Después transformación del texto, mayúscula. Y finalmente transición 0, 0, 0.3 segundos. Como puedes ver, el menú ahora está buscando exactamente de la manera que queremos. Está bien, trabajemos en el efecto que se cierne. Queremos que los enlaces se hagan más grandes y tengan un fondo naranja cuando pasemos sobre ellos. Entonces iré aquí y diré cuando pasemos el cursor sobre el enlace, añadiré escala de transformación 1.5 para que se haga más grande en 1.5 veces su tamaño original. Y ahora se puede ver cuando paso por encima de cualquier enlace, se hace más grande. Muy bien, Volvamos a crear el fondo naranja. Lo crearemos usando el pseudo elemento antes. Entonces diré un colon antes. Y dentro de eso, agregaré contenido. Cuerdas vacías, posición absoluta , top, 0, izquierda 0 también. Entonces queremos que ocupe el tamaño completo de la etiqueta de anclaje. Por lo que agregaremos un ancho, 100%, y una altura 100% también. Después le agregaremos color de fondo, nuestro color naranja. Entonces finalmente, transición punto cero tres segundos. Y ahora puedes ver que tenemos este fondo naranja y está encubriendo todos los enlaces, pero sólo queremos que aparezca cuando pasemos el cursor sobre los enlaces. Por lo que volveré aquí y añadiré escala de transformación 0. Entonces debajo de eso, diré cuando pasemos el cursor sobre el enlace, Nuestro hacer algunos cambios sucedieron al pseudo elemento antes. Añadiré transformada. Escala de nuevo a uno. Por lo que ahora se puede ver el fondo naranja ahora está oculto. Y cuando pasamos por encima de él, se vuelve más grande. El problema es, está encubriendo el texto. Entonces volvamos aquí dentro del fondo naranja y añadamos el negativo de índice z. Por lo que ahora se puede ver el texto aparece frente al fondo naranja. Ahora sólo nos queda una cosa, y eso es difuminar los otros enlaces cuando pasamos el cursor sobre cualquier enlace. Entonces volvamos y hagamos eso. Volveré aquí y Add Filter Blur, cinco pixels. Entonces esto solo significa que cuando pasemos el cursor sobre el pozo, aplicaremos este filtro de desenfoque a las etiquetas de anclaje. También queremos que los enlaces sean un poco transparentes. Por lo que voy a añadir opacidad 0.2. Y ahora se puede ver cuando paso por encima de los enlaces, todos se vuelven borrosas y se vuelven semitransparentes porque ponemos la opacidad en 0.2. Pero queremos que esto le pase a los enlaces que no estaban rondando. Por lo que queremos que aparezca con claridad el enlace por el que pasamos el cursor. Por lo que volveré aquí y añadiré opacidad uno para que se vuelva visible de nuevo cuando Filtro desenfoque 0. Entonces esto significa que la longitud por la que estamos rondando, tendremos una opacidad de uno y el filtro de desenfoque será 0, lo que significa que volverá a ser claramente visible. Y ahora, cuando vuelvo y vuelvo sobre cualquier enlace, puedes ver que se hace más grande y tiene un fondo naranja mientras que los otros enlaces se vuelven borrosas. Y este es el efecto exacto que buscamos. 53. 56: efecto creativo utilizando el retardo de transición: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Se puede ver cuando paso el cursor sobre los elementos del menú, el enlace se mueve hacia arriba y otro enlace viene de abajo y ocupa su lugar. Después crece un fondo verde de izquierda a derecha. Entonces, al alejarse, el fondo verde se encoge de derecha a izquierda. Y eso lo dibujó desaparece. El eslabón se mueve hacia abajo y el otro entra desde arriba. Entonces, empecemos a crear este efecto. Empezaré aquí en mi HTML agregando un UL. Entonces dentro de ella, añadiré una LLI, luego una etiqueta de ancla dentro de eso. Y dentro de la etiqueta de ancla, voy a añadir un lapso y decir casa. Cuando voy a añadir otro lapso y decir casa también. Por lo que la primera banda es la que vamos a mover a la parte superior y el segundo lapso se moverá desde abajo para ocupar su lugar. Está bien. Yo lo copiaré, lo pegaré cuatro veces. Y como pueden ver, acabo de cambiar el texto. Por lo que tenemos sobre servicios, portafolio y contacto. Muy bien, vayamos a nuestro CSS y empecemos a peinar nuestro menú. Voy a apuntar a la UL. A continuación, agregue display, flex. Entonces queremos que todos los elementos de la lista se sientan uno encima del otro. Por lo que voy a añadir columna de dirección flex. Entonces justifique centro de contenido, y alinee elementos centro también. Muy bien, apuntaré a los ítems de lista dentro de la UL. Entonces agregaré posición, relativa, estilo de lista, ninguno, y margen, cinco píxeles. Ahora apuntaré a la etiqueta de anclaje dentro de los ítems de la lista. A continuación, agregue posición, relativa. Pantalla, bloque, altura, 40 píxeles. Decoración de texto. Ninguno. Al relleno. Cinco píxeles de arriba y abajo, y diez píxeles de izquierda y derecha. Cuando voy a añadir un peso de fuente de 300, espaciado de letras a píxeles. Y por último, desbordamiento. Oculto. De acuerdo, vamos a trabajar en los tramos dentro de las etiquetas de anclaje. Yo los apuntaré al agregar posición, ancho relativo. 100% Altura 100%. Por lo que ocupan todo el ancho y la altura de la etiqueta de anclaje. Entonces para que el segundo span vaya a la parte inferior del primer lapso, añadiremos flex display. Entonces lo que esto hará es que hará que el segundo lapso se sienta lado a lado con el primero si hay un espacio. Pero como fijamos el ancho de nuestros tramos 2 al 100%, el segundo lapso no tendrá un espacio para sentarse junto al primero. Por lo que se moverá al fondo y se sentará debajo de él. Entonces añadiré alinear elementos centro y justificar el centro de contenido. Entonces como puedes ver, los segundos tramos se desplazan y se sientan debajo de los primeros porque no tienen suficiente espacio y no los podemos ver porque dijimos desbordamiento en la etiqueta de anclaje aquí a escondidas. Entonces si quitamos eso, se puede ver que los segundos tramos están apareciendo ahora debajo de los primeros. Muy bien, voy a añadir desbordamiento oculto otra vez para que los segundos tramos desaparezcan de nuevo. Sigamos peinando los tramos. Iré aquí y agregaré transición 0.5 segundos. Después color blanco, tamaño fuente 20 píxeles. Y por último, el texto se transforma. Capitalizar. Ahora los tramos se ven mucho mejor. Ahora cuando se cierne sobre la etiqueta de anclaje, queremos que el primer lapso se mueva de su posición hacia arriba a la parte superior, y el segundo lapso se mueva de abajo y tome su lugar. Por lo que diré al pasar el cursor sobre la etiqueta de ancla, quiero hacer algunos cambios en el primer lapso. Por lo que voy a decir span nth niño uno. Y voy a añadir transformar, traducir Y negativo 100%. Por lo que ahora cuando voy a pasar el rato sobre la primera banda, puede ver que se mueve hasta la cima y desaparece. Ahora queremos que el segundo lapso se mueva desde abajo y tome su lugar. Entonces volvamos atrás y hagamos eso. Copiaré este bloque de código pegado y apuntaré al segundo lapso en lugar del primero. Y no voy a cambiar nada. Entonces cuando voy y rondo, ahora se puede ver cuando el primer lapso se mueve hacia arriba, el segundo lapso viene de abajo y ocupa su lugar. Y este es el efecto exacto que queremos. Está bien, trabajemos en el fondo verde. Iré aquí a decir un colon antes. Y luego añadiré contenido. Cuerdas vacías, posición, absoluta. Top 0, izquierda 0. Y queríamos retomar todo el ancho y la altura de la etiqueta de anclaje. Por lo que agregaremos ancho, 100%, altura, 100% también. Entonces fondo-color, nuestro color verde. Y ahora puedes ver tenemos un fondo verde que tiene el mismo ancho y altura que la etiqueta de ancla. Muy bien, queremos que el fondo verde solo aparezca cuando se cierne sobre la etiqueta de anclaje. Por lo que volveré aquí y añadiré escala de transformación x 0. Y queríamos crecer de izquierda a derecha. Por lo que agregaremos origen transformado a la izquierda. Entonces finalmente transición 0.5 segundos. Y al rondar sobre el enlace, queríamos crecer de nuevo y aparecer. Por lo que diré al pasar el cursor sobre el enlace, haré algunos cambios en el pseudo elemento antes. Voy a añadir escala de transformación x uno de nuevo. Y ahora se puede ver que el fondo verde es invisible. Y cuando se cierne sobre el enlace, vuelve a crecer de izquierda a derecha porque configuramos su propiedad de origen transformado a izquierda. Y al alejarse, también se encoge de su lado izquierdo, pero queríamos encogernos de su lado derecho. Entonces lo que podemos hacer es volver aquí y agregar origen transformado, ¿no? Y ahora se puede ver cuando paso el cursor sobre el enlace, el fondo verde crece de izquierda a derecha. Y al alejarlo, se encoge en su lado derecho. De acuerdo, ahora tenemos que sumar algunos retrasos de transición para mezclar el fondo verde, esperar hasta que la primera banda se mueva a la cima. Por lo que iré aquí y agregaré retraso de transición 0.5 segundos. Y ahora cuando vuelvo y pase el cursor sobre el enlace, puede ver que el enlace se mueve primero. Después de eso, aparece el fondo verde dándonos el efecto que queremos. El problema es que cuando nos alejamos, queremos que el fondo verde se encoja primero. Entonces después de eso queremos que suceda el movimiento de span. Por lo que queremos aplicar algún retraso de transición al lapso cuando se aleja. Por lo que volveré aquí dentro del selector de span y agregaré retardo de transición 0.5 segundos. Pero esto provocará que el movimiento de span se retrase al rondar también. Entonces para evitar eso y hacer que la etiqueta de anclaje aparezca inmediatamente al pasar el cursor, podemos ir aquí y decir retraso de transición 0. Entonces también haré lo mismo aquí en el segundo lapso. Entonces lo que esto hará es que hará que los dos tramos se animen inmediatamente cuando se cierren. Y no tendrá ningún retraso. Pero al alejarse, esperará 0.5 segundos porque aquí establecemos el retardo de transición a 0.5 segundos. Por lo que al rondar, animan de inmediato. Al alejarnos, esperaremos. Y ahora cuando voy y paso por encima de los enlaces, los tramos se mueven inmediatamente y aparece el fondo verde. Y al alejarse, el fondo verde se encoge, entonces el movimiento de span ocurre después de eso. Y este es el efecto exacto que queremos. 54. 57 - 2 bordes y un efecto de menú de fondo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear otra imagen, efecto hover. Se puede ver cuando paso el cursor sobre la imagen, este efecto sucede cuando tenemos el fondo de superposición entra de derecha a una posición y se puede ver que se giró mientras era una manera. Entonces cuando regrese, su grado de rotación se convierte en 0. Por lo que ya no se gira. Entonces tenemos el enlace que sube de arriba a esta posición. Entonces el párrafo viene del derecho a su posición y también rotó mientras era un camino. Entonces finalmente, el H2 viene de arriba a su posición. Entonces empecemos a crear este efecto. Se puede ver que tenemos nuestros estilos de la lección anterior. Por lo que todo está en su lugar y sólo vamos a sumar los estilos responsables de nuestro efecto aquí mismo. Entonces, empecemos con el fondo de superposición. Voy a apuntar al pseudo elemento antes del contenedor. Y voy a añadir transformar, traducir 650 píxeles. Por lo que se traducirá 650 píxeles a la derecha a lo largo del eje x, luego 100 píxeles negativos. Por lo que se desplazará 100 píxeles hacia la parte superior. En el eje Y. También sumaré giro 180 grados. Por lo que se girará 180 grados cuando esté lejos. Y por último, voy a añadir transición 0, 0. Entonces por debajo de eso. Y al pasar el cursor sobre el contenedor div, voy a hacer algunos cambios les sucedieron antes de pseudo elemento. Voy a añadir transformar, traducir 0 y 0. Por lo que volverá a su posición original, luego girará 0 grados. Por lo que volverá a girar a 0, dándonos el efecto que queremos. Y ahora se puede ver el fondo está sentado en esta posición, 650 píxeles a la derecha y 100 píxeles hacia arriba. Y también se gira en 180 grados. Y cuando pase el cursor sobre la imagen, se puede ver el fondo vuelve a su posición original mientras gira hacia atrás a 0 grados, dándonos este bonito efecto. Está bien, trabajemos en el H2. Yo lo apuntaré y agregaré transformación, traduciré y negativo 150 píxeles. Por lo que el h2 se desplazará a la parte superior por 150 píxeles. Entonces sumaré transición todos 0.2 segundos. Entonces cuando se cierne sobre el div contenedor, apuntaré al H2. Y añadir transformar traducir Y 0 píxeles para que regrese a su posición. También añadiré retardo de transición 0.5 segundos para que aparezca después de que aparezca el fondo. Y ahora se puede ver que el H2 está sentado encima de la imagen. Y cuando paso el cursor sobre la imagen, pesaba 0.5 segundos, luego se mueve de nuevo a su posición. Y note que cuando me alejo, inmediatamente se movió a la cima otra vez. No se despierta 0.5 segundos al alejarse porque agregamos el retardo de transición solo al pasar el cursor. De acuerdo, pasemos al párrafo. Se desplazó hacia la derecha y girarlo. Por lo que lo apuntaré. Después agrega transformada, traduce X 300 píxeles, luego gira 90 grados. Entonces añadiré transición o 0.2 segundos. Entonces al pasar el cursor sobre el contenedor div, apuntaré al párrafo. Entonces añadiré transformada, traduciré X de nuevo a 0 y rotaré de nuevo a 0 también. Entonces por debajo de eso, agregaré retardo de transición 0.4 segundos. Y ahora se puede ver que el párrafo se ha movido a la derecha en 300 píxeles y está girado en 90 grados. Y al pasar el cursor sobre la imagen, pesaba 0.4 segundos. Después gira hacia atrás a 0 grados mientras se mueve de nuevo a su posición original. Y cuando me alejo, regresa inmediatamente de nuevo a la tarifa y gira. Por último, trabajemos en el enlace. Volveré atrás y apuntado. Entonces añadiré transformada, traduciré y negativa 300 pixels. Por lo que se desplazará a la parte superior por 300 píxeles, luego transitará 0, 0, 0.2 segundos. Y de nuevo, al pasar el cursor sobre el contenedor div, apuntaré a la etiqueta de anclaje y añadiré transformación, traduciré Y 0 píxeles, por lo que vuelve a su posición. Entonces añadiré retardo de transición 0.3 segundos. Y ahora se puede ver el enlace está sentado en la parte superior de la imagen. Y cuando pase el cursor sobre él, el enlace pesaba 0.3 segundos y luego se mueve hacia abajo a su posición original. Ahora en este momento, volveré y apuntaré al div contenedor y añadiré desbordamiento oculto. Y ahora se puede ver que todos los elementos son invisibles. Y cuando pasamos el cursor sobre la imagen, vuelven a aparecer. Y el efecto que queremos sucede perfectamente. 55. 58: efecto del menú de francos: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Se puede ver cuando pasamos el cursor sobre cualquier enlace de este menú, este efecto cool sucede donde tenemos estos cuatro pequeños bordes amarillos que aparecen. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un UL. Después dentro de eso, un LI, luego una etiqueta de ancla. Y voy a decir casa. Entonces añadiré dos tramos dentro de la etiqueta de anclaje junto al texto. Por lo que usaremos estos tramos grado los cuatro bordes que rodean los enlaces, y veremos cómo. Entonces copiaré este ítem de lista, lo pegaré de nuevo cuatro veces. Y voy a decir de los servicios. Contacto. Aquí están los elementos del menú. Vayamos a nuestro CSS y les damos estilo. Voy a apuntar a la UL. Cuándo voy a añadir relleno 0. Entonces con el fin de hacer que el elemento de lista se sienta uno al lado del otro, voy a añadir display flex. Entonces apuntaré a los elementos de la lista y agregaré ningún estilo de lista. Después relleno 10 píxeles de arriba e abajo y 40 píxeles de izquierda y derecha. Entonces apuntaré a la etiqueta de anclaje y añadiré decoración de texto. Ninguno. Cuando el texto se transforma. Mayúscula. Tamaño de fuente 24 pixels, donde en color, blanco, posición, relativo. Y por último, relleno, cinco píxeles. Y ahora se puede ver que el menú se ve mucho mejor. Ahora, quiero que el color de los enlaces cambie a amarillo cuando se cierren sobre ellos. Por lo que diré donde se cierne sobre el enlace. Voy a cambiar el color a este color amarillo. Está bien, sigamos adelante. Vamos a crear las cuatro pequeñas fronteras que rodean los enlaces. Haremos eso usando los pseudo elementos antes y después de los dos tramos que agregamos dentro del enlace. Entonces voy a decir span. Primer hijo, colon antes. Por lo que este selector aquí apunta a que antes pseudo elemento del primer lapso. Y dentro de esto añadiré contenido, cadenas vacías, posición absoluta. Y esta será la frontera que se sienta en la esquina superior izquierda. Por lo que sumaremos top 0 y left 0 también. Después ancho ocho píxeles y alto ocho píxeles. Entonces le añadiré color de fondo. Transparente porque no queremos que aparezca el fondo. Nosotros sólo queremos las fronteras. Ahora agregamos borde, dos píxeles, amarillo sólido. Y frontera izquierda. Dos píxeles sólidos. Nuestro color amarillo también. Y por último, sumaré transición 0.2 segundos. Por lo que ahora puedes ver tenemos estos dos pequeños bordes en la esquina superior izquierda, y son los bordes izquierdo y superior. De acuerdo, vamos a crear los bordes en la esquina superior derecha. Entonces volveré a copiar este bloque de código, lo pegaré de nuevo, y cambiaré antes a después. Por lo que vamos a apuntar al pseudo elemento después del primer lapso. Cuando dentro de eso cambiaré de izquierda a derecha para posicionarlo a la derecha. Entonces también cambiaré la frontera que queda aquí a tasa fronteriza. Para que veas que ahora tenemos estas fronteras en la esquina superior derecha. De acuerdo, vamos a crear el borde que se sienta en la esquina inferior izquierda. Los pegaré antes de código pseudo elemento otra vez. Entonces apuntaré al pseudo elemento antes del último hijo, no al primero. Entonces dentro de eso cambiaré de arriba a abajo porque queremos que estos bordes aparezcan en la esquina inferior izquierda. Entonces también cambiaré la frontera a fondo fronterizo. Y como pueden ver, tenemos la frontera sentada en la esquina inferior izquierda. Vamos a crear el último borde que se sienta en la esquina inferior derecha. Voy a copiar este código. Después pegarlo de nuevo y apuntar al último hijo del pseudo elemento after. Después cambia de izquierda a derecha. Y también cambiar frontera izquierda a frontera derecha. Y ahora, como pueden ver, tenemos la frontera final que se sienta en la esquina inferior derecha. ¿ De acuerdo? Por último, queremos crear nuestro efecto hover. Cuando se cierne sobre los enlaces. Queremos que las fronteras cambien su posición para darnos el efecto que queremos. Entonces hagámoslo. Diré que al pasar el cursor sobre el enlace, apuntaré al pseudo elemento antes del primer lapso. Y si recuerdas, esta es la frontera que se sienta en la esquina superior izquierda. Cuando dentro de eso cambiaré top a negativo 10 pixeles y izquierdo a negativo 10 pixeles también. Y ahora cuando voy a pasar el rato sobre el enlace, se puede ver el borde en la esquina superior izquierda se mueve y cambia su posición a esta nueva posición. Muy bien, Hagamos también lo mismo por las otras fronteras. Volveré a mi CSS y copiaré este código. Y de nuevo y apuntar a los pseudo elementos después esta vez. Y si recuerdas, esta es la frontera que se sienta en la esquina superior derecha, entonces cambiaré de izquierda a derecha. Cuándo volveré a pegar el código. Y Target D ante un pseudo elemento del último hijo con el tiempo, luego cambia de arriba a abajo. Por lo que este es el borde que se sienta en la esquina inferior izquierda. Y pegaré el código una vez más y apuntaré a los pseudo elementos después del último hijo. Y cambiaré de arriba a abajo y de izquierda a derecha. Y ahora cuando voy a pasar el rato sobre cualquier enlace, se puede ver que las cuatro fronteras están cambiando su posición, dándonos el efecto que queremos. Lo único que nos queda es hacer invisibles las fronteras. Entonces haz que aparezcan sólo cuando pasemos el rato. Entonces volvamos atrás y hagamos eso. Pondré la opacidad para todos los bordes en 0. Y al rondar, volveré a poner la opacidad a una. Y ahora se puede ver que las fronteras son invisibles. Y al rondar sobre cualquier enlace, vuelven a aparecer y pasan de su posición a esta nueva posición, dándonos nuestro efecto fresco. 56. 59: efecto de rotación del menú: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Se puede ver cuando paso el cursor sobre cualquier enlace del menú, este efecto sucede donde tenemos los bordes superior e izquierdo giran 360 grados y se encogen al mismo tiempo hasta que se vuelven más pequeños. El mismo efecto sucede también en los bordes derecho e inferior. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un UL. Entonces dentro de eso, voy a añadir un LI, luego una etiqueta de anclaje dentro de eso. Y voy a decir en casa. Después copiaré la URL, pegaré de nuevo cuatro veces, y diré sobre servicios, equipo y contactos. Cuando voy a ir a mi objetivo CSS, la UL, y añadiré margen 0, relleno 0 también. Entonces con el fin de hacer que el enlace se sienta uno al lado del otro, voy a añadir display flex. De acuerdo, ahora apuntaré al LI dentro de la UL y agregaré al estilo de lista ninguno. Entonces apuntaré a la etiqueta de anclaje y agregaré posición relativa. Después muestra bloque, relleno, 15 píxeles de arriba e abajo, y 30 píxeles de izquierda y derecha. Entonces añadiré margen, 0 de arriba e abajo, y 15 píxeles de izquierda y derecha. Entonces añadiré decoración de texto. Ninguno. Transformación de texto, mayúscula. Y por último, color, este color amarillo. Muy bien, ya puedes ver los enlaces ahora se ven mucho mejor. Volvamos atrás y creemos las fronteras. Empezaremos por las fronteras que se sientan en los lados superior e izquierdo de los enlaces. Y usaremos el pseudo elemento antes para hacer eso. Iré aquí y seleccionaré el pseudo elemento antes del enlace. Entonces agregaré contenido. Cuerdas. Posición absoluta, top 0, izquierda 0 también. Cuando ancho 100%, y altura 100% también. Añadamos las fronteras. Añadiré borde top dos pixeles. Sólido. Este color amarillo. Cuando el borde a la izquierda, dos píxeles, amarillo sólido también. Entonces sumaré transición 0.5 segundos. Y finalmente caja dimensionamiento caja frontera. Y como pueden ver, ahora tenemos las fronteras en los lados superior e izquierdo. Muy bien, Empecemos a crear nuestro efecto. Volveré aquí y diré al pasar el rato sobre la etiqueta de ancla, haré algunos cambios en el pseudo elemento antes. Estableceré su ancho a 15 píxeles y su altura a 15 píxeles también, modo que el pseudo elemento antes se encoja y los bordes se encogerán con él. Por lo que ahora cuando voy a pasar el cursor sobre los enlaces, puede ver que el borde se encoge y se hace más pequeño hasta que tengan un ancho y una altura de tan solo 15 píxeles. Ahora, rotemos los bordes mientras los encogemos también. Iré aquí en el efecto de deslizamiento y agregaré transformación, rotaré 360 grados. Entonces quiero que gire a lo largo del lado izquierdo. Por lo que subiré aquí dentro del pseudo elemento antes y añadiré origen transformado izquierdo. Y ahora se puede ver cuando paso por encima de los enlaces, giramos mientras nos encogemos, dándonos este efecto fresco. Muy bien, vamos a crear los Borders derecho e inferior. Usaré el pseudo elemento after para crearlos. Por lo que voy a copiar el pseudo elemento antes, pegarlo y cambiarlo antes a después. También cambiaré de arriba a abajo y de izquierda a derecha. También cambiaré frontera arriba dos frontera abajo y frontera izquierda a tasa fronteriza. Entonces queremos rotarlo a lo largo del lado derecho. Por lo que cambiaré la propiedad de origen de transformación a derecha en lugar de izquierda. Por lo que ahora puedes ver hemos creado los bordes derecho e inferior usando el pseudo elemento after. Vamos a crear el efecto que se cierne. Volveré atrás y copiaré el efecto que se cierne sobre el pseudo elemento antes. Pégalo y cámbielo antes a después. Y ahora cuando vuelvo y paso por encima de los enlaces, se puede ver que los bordes derecho e inferior también se están encogiendo mientras gira alrededor del lado derecho. Y ahora tenemos el efecto exacto. Nosotros queremos. 57. 60 - efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Se puede ver que teníamos estos enlaces y su color es transparente y tenemos un trazo de texto alrededor de ellos. Y cuando paso el cursor sobre cualquier enlace, este efecto ocurre donde tenemos tres capas de los enlaces. La capa blanca original cuyo color cambia a blanco, y una capa roja encima de eso, luego una capa azul claro encima de ambos. Este es un efecto realmente genial. Entonces, empecemos a crearlo. Iré aquí en mi HTML, añadiré una UL. Entonces dentro de eso, voy a añadir un LI, luego una etiqueta de ancla, y decir casa. Entonces agregaré texto de datos, casa también. Después copiaré este ítem de lista, lo pegaré de nuevo cuatro veces, y diré sobre Servicios, Equipo y contacto. Entonces iré a mi CSS, apuntaré a la UL y agregaré margen 0, relleno 0 también. Entonces apuntaré a los elementos de la lista dentro de la UL y agregaré ningún estilo de lista. Entonces apuntaré a los enlaces y agregaré posición relativa bloque de visualización. Y sólo queremos un trazo a su alrededor, por lo que le agregaremos color, transparente. Y luego agregaremos webkit. Trazo de texto, blanco de un píxel. Añadiré tamaño de fuente, 80 píxeles, font-weight, 900. Y por último, decoración de texto, ninguna. Y ahora se puede ver que los enlaces se ven exactamente de la manera que queremos. Tienen un color transparente y un trazo blanco a su alrededor. De acuerdo, vamos a crear la capa roja que se sienta en la parte superior del enlace. Y lo crearemos usando el pseudo elemento antes. Por lo que iré aquí y apuntaré eso y agregaré contenido. UN TTR. Texto de datos para agarrar el texto dentro del atributo de texto de datos de cada enlace. Entonces sumaré posición, absoluta, luego top 0, left 0, y transición 0.5 segundos. ¿Está bien? Al pasar el cursor sobre el enlace, queremos que aparezca el pseudo elemento antes y tome el fondo rojo. Por lo que diré al pasar el cursor sobre la etiqueta de anclaje, seleccionaré el pseudo elemento antes y añadiré color. Este color rojo. Después Z índice uno, luego webkit texto trazo un píxel negro. Por lo que tendremos un trazo negro alrededor del fondo rojo. Entonces finalmente, añadiré transformada, traduciré 10 píxeles a lo largo del eje x a la derecha y 10 píxeles negativos a lo largo del eje y hacia la parte superior. Y ahora puedes ver cuando paso el cursor sobre los enlaces, aparece este fondo rojo y se mueve al lado superior derecho por diez píxeles, dándonos este bonito efecto. Está bien, vamos a trabajar en la capa azul claro. Lo crearemos usando el pseudo elemento after. Por lo que iré aquí y añadiré un colon después, junto al pseudo elemento antes. Entonces copiaré el efecto flotando. Pégalo de nuevo y seleccione el pseudo elemento después en lugar del anterior. Y voy a cambiar el color a este color azul claro. Entonces cambiaré el índice z a dos en lugar de uno. Entonces modificaré la propiedad de transformación a 20 píxeles y 20 píxeles negativos. Por lo que se desplazará más a la parte superior y a la derecha. Ahora puedes ver cuando paso el cursor sobre los enlaces, aparece la capa azul claro y se mueve a la esquina superior derecha de la capa roja, dándonos este efecto fresco. Lo único que queda ahora es cambiar el color de la primera capa a blanco en lugar de transparente al flotar. Por lo que voy a volver y decir, cuando pasemos el cursor sobre el enlace, voy a añadir color blanco. Entonces webkit trazo de texto, un píxel, negro. Entonces finalmente transición 0.5 segundos. Y ahora puedes ver cuando paso el cursor sobre los enlaces, la primera capa ahora tiene un color blanco y un trazo de texto negro. Y este es el efecto exacto que queremos. 58. 62: efecto de traducción de fondo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear otro efecto de desplazamiento de tarjeta. Ya puedes ver tenemos esta tarjeta que es un fondo blanco con alguna sombra de caja a su alrededor, separándola del fondo de cuerpo blanco. Y contiene algún contenido. Y también tenemos esta delgada línea rosa que se sienta en la parte inferior. Y al pasar el cursor sobre la tarjeta, la línea rosa se hace más grande y cubre la tarjeta y el color del texto se vuelve blanco al mismo tiempo. Entonces, empecemos a crear eso. Iré aquí en mi HTML y añadiré un div, le daré una clase de tarjeta. Después dentro de ella, otra con una clase de contenido. Y dentro de eso, voy a añadir un H2 y decir diseño. Entonces debajo de eso añadiré un párrafo y añadiré algo de texto Lorem Ipsum. Entonces finalmente una etiqueta de ancla. Y decir Leer más. Muy bien, vamos a nuestro CSS y seleccionemos la tarjeta div. Añadiré posición, ancho relativo, 320 píxeles. Después panning, 40 píxeles. Color de fondo, blanco. Entonces finalmente, box-shadow, 010 pixels, 30 pixels. Y finalmente RGBA, 0, 0, 0, 0, 0.1. Por lo que ahora puedes ver tenemos este fondo blanco que tiene esta sombra de caja a su alrededor. De acuerdo, vamos a trabajar en el fondo rosa que se sienta en la parte inferior de la tarjeta. Lo crearemos usando el pseudo elemento antes. Por lo que lo apuntaré y añadiré contenido. Cuerdas vacías. Posición absoluta, izquierda, 0, abajo. Y queremos posicionarlo a tan solo cinco píxeles por encima de la línea inferior de la tarjeta. Por lo que sumaré calc negativo 100% más cinco pixeles. Y luego queríamos retomar el tamaño completo del auto. Por lo que agregaremos ancho, 100%, altura, 100% también. Después color de fondo, este color rosa, luego z-índice uno, y finalmente transición, 0.5 segundos. Está bien, se puede ver que el fondo rosa está sentado en la parte inferior. Subamos aquí dentro de la tarjeta div y agregamos desbordamiento oculto. Y ahora se puede ver el fondo rosa está posicionado en la parte inferior y sólo cinco píxeles de él son visibles. Ahora, al pasar el cursor sobre la tarjeta, queremos que el fondo rosa se mueva a la parte superior y cubra la tarjeta blanca. Por lo que volveré aquí y diré, cuando se cierne sobre la tarjeta. Seleccionaré el pseudo elemento antes, que es el fondo rosa. Y sumaré abajo 0. Y ahora cuando vuelvo y vuelvo sobre la tarjeta, el fondo rosa se mueve, se sienta exactamente por encima de la tarjeta. Está bien, Sigamos trabajando y vamos a volver y apuntar al contenido div. Entonces agregaré posición, relativa, transformación de texto, capitalizar, color. Este color gris. Entonces para que el contenido aparezca frente al fondo rosa, añadiré el índice Z 2. Y por último, sumaré la transición 0.5 segundos. Y ahora el contenido tiene este color gris. Y cuando flotamos, el contenido aparece frente al fondo rosa. Muy bien, volvamos atrás y seleccionemos el H2. A continuación, agregue margen inferior diez píxeles, y margen top 0. Entonces tamaño de fuente 30 píxeles. Entonces apuntaré al párrafo y agregaré tamaño de fuente 18 píxeles. Entonces, por último, apuntaré a la etiqueta de anclaje y agregaré margen top 10 pixels. Cuando tamaño de fuente 14 píxeles, muestra la decoración de texto en bloque en línea. Ninguno. Color. Este color gris. Acolchado. Seis píxeles de arriba y abajo, y diez píxeles de izquierda y derecha. Entonces font-weight, 600, color de fondo, blanco. Y finalmente, la sombra de caja 0, dos píxeles, 20 píxeles, RGBA, 0, 0, 0, 0.05. Y ahora se puede ver que el enlace se ve mucho mejor. Por último, cuando pasemos el cursor sobre la tarjeta, queremos que el color del texto del contenido cambie a blanco. Entonces iré aquí y diré, al pasar el rato sobre la etiqueta de ancla, cambiaré el color del texto a blanco. Y ahora cuando vuelvo y flote, puedes ver que el color del texto cambia a blanco, dándonos el efecto exacto que queremos. 59. 63: efecto creativo con tarjeta: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de hover de tarjeta. Se puede ver tenemos esta imagen que se sienta encima de un fondo blanco. Y cuando pasamos por encima de eso, la tarjeta se expande verticalmente y la imagen se mueve hacia arriba. Entonces este texto entra desde arriba y se mueve a su posición. Este es un efecto realmente genial. Entonces veamos cómo podemos crearlo. Empezaré aquí en mi HTML agregando un div y dándole una clase de tarjeta. Entonces dentro de eso, añadiré otro div y le daré una clase de cuadro de imagen. Entonces obviamente este será el div que contiene nuestra imagen. Entonces dentro de ella agregaremos nuestra imagen. Entonces debajo del cuadro de imagen div, agregaremos otro con una clase de contenido para agregar el texto que aparece al pasar el cursor dentro de este div. Entonces voy a añadir un H2 y decir tarjeta hover. Entonces por fin un párrafo con algún texto ficticio Lorem Ipsum. Muy bien, vamos a nuestro CSS para darle estilo a eso. Crearemos el fondo blanco que se sienta detrás de la imagen usando la tarjeta div. Por lo que voy a apuntar a eso. Y sumaré posición relativa. Entonces ancho, 300 píxeles, altura 260 píxeles. Entonces voy a añadir el radio de frontera, 10 píxeles. Entonces para que el fondo blanco sea visible frente al cuerpo blanco, agregaremos box-sombra, 0 píxeles, cinco píxeles, 20 píxeles. Entonces RGB a, 0, 0, 0, 0, 0.5. Y por último, sumaré transición 0.3 segundos. Está bien, como se puede ver, el fondo blanco no aparece porque la imagen lo está cubriendo, pero está ahí. Entonces si vuelvo atrás y cambio su ancho a 800 píxeles, por ejemplo, se puede ver que ahora es visible. ¿ Está bien? Regresaré y volveré a ajustar el ancho a 300 píxeles. Entonces añadiré relleno, 20 píxeles de arriba e abajo y 40 píxeles de izquierda y derecha. Y se puede ver el fondo blanco ahora es visible debido al relleno que le agregamos. De acuerdo, vamos a apuntar al div con la clase de cuadro de imagen para darle estilo a la imagen. Añadiré posición, ancho relativo, 100%, altura, 100% también. Entonces apuntaré a la imagen misma y agregaré ancho, 100% de su ancho de contenedor y radio de borde, 10 píxeles. Como se puede ver, la imagen ahora se escala hacia abajo. 60. 64 4: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de tarjeta. Como puedes ver, tenemos esta tarjeta que tiene una imagen de Capitán Marvel en el centro. Y al pasar el cursor sobre la tarjeta, este efecto ocurre donde la imagen se hace más grande y se mueve hacia la derecha. Y al mismo tiempo, aparece este texto de la izquierda y se mueve desde el centro para colocarse a la izquierda. Y como puede ver, contiene un encabezado, un párrafo, y un enlace. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un div y dándole una clase de tarjeta. Entonces dentro de eso, añadiré otro div con la clase de contenido. Y dentro de eso vamos a sumar el contenido. Empezaré sumando un H2 y diciendo Capitán Marvel. Entonces debajo de eso añadiré un párrafo y añadiré algo de texto ficticio. Entonces finalmente una etiqueta de ancla. Y decir leer más. Eso es todo por el contenido, voy a ir por debajo del contenido div y añadir una imagen. Entonces añadiré nuestra imagen. Entonces como puedes ver, tenemos el contenido en la parte superior y nuestra imagen está sentada en la parte inferior. Muy bien, pasemos a nuestro CSS y apuntemos a la tarjeta div. Entonces agregaré posición, ancho relativo, 500 píxeles y altura 300 píxeles. Entonces añadiré display flex para hacer que el contenido y la imagen se sientan uno al lado del otro, así. Entonces queremos enviarles verticalmente. Por lo que volveré atrás y añadiré alinear elementos. Centro. También añadiré gradiente lineal de fondo. Y voy a añadir este valor de gradiente. Entonces, por último, voy a añadir borde radio 20 píxeles. Y ahora se puede ver la tarjeta div ahora tiene este fondo de gradiente y algún radio de borde alrededor de las esquinas. Está bien, vamos a trabajar en nuestra imagen y centrarla dentro de la tarjeta. Yo lo apuntaré y sumaré posición absoluta inferior 0. Y con el fin de centrarlo, sumaré izquierda 50%. Entonces transforma, traduce X negativo 50 por ciento. Entonces queremos disminuir un poco su altura. Por lo que sumaré altura 400 píxeles. Y finalmente, transición 0.5 segundos. Y ahora se puede ver la imagen está centrada dentro del Cardiff y su altura es más pequeña. Está bien, trabajemos en el efecto que se cierne. Al pasar el cursor sobre la tarjeta, queremos que la imagen se haga un poco más grande y luego se mueva a la derecha. Entonces iré aquí y diré, cuando pasemos el rato sobre la tarjeta. Haré algunos cambios que le sucedieron a la imagen. Estableceré su altura en 450 píxeles en lugar de 400 píxeles. También sumaré izquierda 80 por ciento para moverlo a la izquierda. Y ahora cuando vuelvo y vuelvo sobre la tarjeta, puede ver que la imagen se hace más grande y se mueve para sentarse en el lado derecho y el lado izquierdo se vacía porque aquí es donde vamos a posicionar el contenido. Entonces volvamos a nuestro CSS y apuntemos al contenido div. Entonces agregaremos posición relativa 40% del ancho de la tarjeta. Después se fue, 20 por ciento. Color, blanco. Texto transformar, capitalizar. Y finalmente, transición 0.5 segundos. Y ahora se puede ver el contenido está sentado el 20% del ancho de la tarjeta desde la izquierda, por lo que queremos ocultarlo. Y cuando se cierne sobre la tarjeta, queremos que vuelva a aparecer y se mueva a sentarse a la izquierda. Por lo que volveré dentro del div contenido y añadiré opacidad 0. Entonces debajo de eso, diré al pasar el cursor sobre la tarjeta, seleccionaré el contenido y agregaré izquierdo 5% en lugar de 20%. Y opacidad una otra vez. Y ahora se puede ver que el texto está oculto. Y cuando se cierne sobre la tarjeta, el texto aparece de nuevo y se mueve para sentarse a la izquierda. Lo único que queda ahora por hacer es darle estilo a los elementos dentro del contenido. Lo hizo yo apuntaré al H2 y añadiré margen 0, relleno 0 también. Entonces apuntaré al párrafo y añadiré margin-bottom 20 pixels. Entonces, por último, apuntaré a la etiqueta de anclaje y agregaré posición. Relativo. Display. Color de bloque en línea. Este color gris oscuro. Después relleno, cinco píxeles de arriba e abajo y diez píxeles de izquierda y derecha. Entonces fondo, blanco, decoración de texto, ninguno. Y por último, radio de frontera 10 píxeles. Por lo que ahora puedes ver los elementos de contenido y el enlace se ven mucho mejor. Y ya hemos completado este bonito efecto de tarjeta. Era uno sencillo pero genial. Entonces te veo en la siguiente lección. 61. 65 5: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear otro efecto de desplazamiento de tarjeta. Se puede ver que teníamos este fondo azul oscuro con el número 88 en él. Y cuando se cierne sobre eso, el fondo azul se encoge y se convierte en un pequeño círculo con un borde azul a su alrededor. Y el número 88 se hace más pequeño y su color cambia a azul oscuro. También, aquí aparece este texto, y tenemos un encabezamiento, un párrafo, y un enlace. De acuerdo, vamos a crear este efecto. Iré aquí en mi HTML y añadiré un div, le daré una clase de tarjeta. Entonces dentro de ella, añadiré otro div con una clase de cara y cara a uno. Por lo que este será el div que contiene el encabezamiento y el párrafo y el enlace. Está bien, dentro de ella sumaré un H2 y diré servicios. Entonces debajo de eso añadiré un párrafo y añadiré algo de texto fictito. Y finalmente una etiqueta de ancla. Y decir leer más. Entonces debajo de ese div, añadiré otro div con la clase de fase y fase dos. Por lo que este será el div que tenga un fondo azul oscuro. Y dentro de ella sumaré un H2 y sumaré el número 88. De acuerdo, entonces me trasladaré a nuestro CSS y apuntaré al div con la clase de tarjeta. Y agrega posición, ancho relativo, 300 píxeles, 400 píxeles, luego fondo, blanco. Y finalmente transición, 0.5 segundos. Muy bien, ahora tenemos un fondo blanco que está centrado dentro del navegador. Al pasar el rato sobre esta tarjeta, queríamos tener alguna sombra de caja. Por lo que diré al pasar el cursor sobre el div con la clase de tarjeta, añadiré box-shadow, 030 pixels, 50 pixels, y RGBA. 0, 0, 0, 0 punto a. Y ahora cuando pase el cursor sobre la tarjeta, tenemos esta bonita sombra de caja debajo de la tarjeta. Está bien, sigamos adelante. Voy a apuntar al div con la clase de cara. Y esta clase se aplica tanto a la primera como a la segunda fase. Entonces es una clase común. Entonces sumaré posición absoluta, top 0, izquierda 0 también. Entonces queríamos retomar el tamaño completo de la tarjeta div. Por lo que agregaremos ancho 100% y altura 100% también. Añadiré display flex. Entonces justifique el contenido. Centrar para centrar el texto horizontalmente y alinear elementos centro para centrarlo verticalmente. Y como se puede ver, el texto ahora está centrado horizontal y verticalmente. De acuerdo, vamos a trabajar en la primera fase que tiene nuestro contenido. Voy a apuntar al div con la clase de fase uno, y añadiré relleno, 20 píxeles. A continuación, el texto alinear centro para centrar el color de fondo del texto blanco. Y por último, color, este color azul oscuro. Entonces apuntaré al H2 dentro de este div. Y sumaré margen top 80 pixels. Por lo que habrá suficiente espacio por encima de la H2 para que el número 88 se sienta dentro. También vamos a darle estilo a la etiqueta de ancla. Yo lo apuntaré. Y añadir display, inline-block. Entonces marque los 20 primeros pixeles para obtener un poco de espaciado entre él y el párrafo. Después relleno cinco píxeles de arriba e abajo y diez píxeles de izquierda y derecha. Entonces texto-decoración. Ninguno. Color. Este azul oscuro. Y por último, frontera. Dos píxeles, sólidos. Nuestro color azul oscuro. Var1 transformación de texto. Capitalizar, fuente de peso, negrita. Y finalmente transición 0.3 segundos. Y como puedes ver, la etiqueta de ancla se ve mucho mejor. Muy bien, vamos a darle estilo a la segunda fase. Ahora, lo apuntaré y le añadiré color de fondo. Nuestro color azul oscuro, luego transición 0.5 segundos. Y ahora puedes ver tenemos este fondo azul oscuro que se sienta encima del primero. Vendamos también el H2 dentro de él. Yo lo apuntaré y agregaré tamaño de fuente, 120 pixels, color blanco. Y finalmente transición 0.5 segundos. De acuerdo, vamos a trabajar en el efecto que se cierne. Ahora. Estaremos rondando sobre la tarjeta. Queremos que este fondo azul se escala hacia abajo y se convierta en un círculo. Por lo que diré al pasar el cursor sobre la tarjeta, seleccionaré la segunda fase y añadiré apretados 80 píxeles. Ancho 80 píxeles, luego fronterizo radio, 50 por ciento para convertirlo en un círculo. Y como puedes ver, cuando pasamos el rato, el fondo se vuelve más pequeño, entra en un círculo. Posicionémoslo correctamente. Volveré de nuevo y añadiré los 40 pixeles superiores. Izquierda. 50 pixeles. Después transforma, traduce X negativo 50% para centrarlo horizontalmente. Entonces le añadiré color de fondo, transparente. Y finalmente, borde, dos píxeles, sólido, nuestro color azul oscuro. Y ahora cuando pase el cursor sobre la tarjeta, se puede ver que el círculo ahora está posicionado correctamente en la parte superior del div contenido. Ahora, vamos ahora a la H2. Al pasar el rato, diré que cuando pasemos sobre el div de la tarjeta, seleccionaré el H2 que está dentro de la segunda fase. Y cambiaré su color a nuestro color azul oscuro. Y voy a añadir font-size 32 pixels. Y ahora cuando vuelvo y me muevo, puede ver que el color del encabezado se vuelve azul y su tamaño se hace más pequeño, dándonos el efecto que queremos. Por último, solo queremos cambiar el fondo del enlace cuando pasemos el cursor sobre él. Por lo que voy a ir aquí y decir cuando se cierne sobre la etiqueta de ancla, cambiaré el color de fondo a azul oscuro. Y cambiaré el color a blanco. Y ahora cuando voy y paso el cursor sobre el enlace, se puede ver su color de fondo cambia a azul, y el color del texto cambia a blanco. Y eso es todo, todo el mundo. Ya hemos creado el efecto de carta. Nosotros queremos. 62. 66: efecto hover de tarjeta creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de hover de tarjeta. Se puede ver que tenemos este fondo gris oscuro que tiene alguna sombra de caja a su alrededor. Y también tiene una imagen y la palabra diseño debajo de la imagen. Y cuando pasamos sobre él, se mueve a la parte superior y su color cambia a este color rosa. Y otro fondo blanco que contiene un párrafo y un enlace se mueve hacia abajo y se sienta detrás de este fondo rosa. Muy bien, empecemos a crear este efecto de tarjeta. Iré aquí en mi HTML y añadiré un div, le daré una clase de tarjeta. Entonces dentro de eso, añadiré otro div con una clase de fase uno. Por lo que esta será la cara de tarjeta que contiene la imagen y la palabra diseño. Por lo que dentro de ella, añadiré otro div con una clase de cuadro de imagen. Y dentro de eso voy a añadir una etiqueta de imagen y añadir nuestra imagen. Entonces añadiré un h3 y añadiré la palabra diseño. Entonces debajo de eso añadiré otro div con la clase de la fase 2. Y dentro de ella, añadiré un div con una clase de contenido. Después un párrafo dentro de ese div con algún texto Lorem Ipsum. Entonces finalmente una etiqueta de ancla debajo de eso. Y diré leer más. Ahora, iré a mi CSS y apuntaré a la tarjeta div. Entonces agregaré posición, relativa, cursor, puntero, y ancho 300 píxeles. Por lo que ahora se puede ver la tarjeta div tiene un ancho de 300 píxeles y se sienta en el centro del navegador. Muy bien, volvamos atrás y apuntemos al div con la clase de cara uno que contiene la imagen y el h3. Entonces dentro de ella, agregaré posición, ancho relativo, 300 píxeles, 200 píxeles. Color de fondo, negro por ahora. Entonces volveré atrás y añadiré display flex, columna de dirección flex para hacer que la imagen y el H3 se sientan una encima de la otra. Después para centrarlos horizontal y verticalmente dentro la cara un div añadiré justifique centro de contenido, y alinear elementos centro también. Entonces finalmente sumaré transición 0.5 segundos. Muy bien, ahora vamos a apuntar al segundo div con la clase de la fase 2. Entonces dentro de ella, sumaré posición. Ancho relativo, 300 píxeles, altura, 200 píxeles. Color de fondo, blanco. Entonces también mostrar flex, dirección flex, columna. Justificar contenido, centro. Alinear artículos centro también. Después box-dimensionamiento, border-box, y finalmente relleno 20 pixels. Entonces ahora como pueden ver, tenemos este fondo blanco que contiene el párrafo y el enlace, y se sienta detrás del negro. Muy bien, Vamos también a añadir algo de sombra de caja a este fondo blanco. Iré aquí y agregaré box-shadow, 020 pixels, 50 pixels, RGB, 0.8000. Entonces por fin, sumaré la transición 0.5 segundos. Y como puedes ver, el fondo blanco ahora tiene esta sombra a su alrededor. De acuerdo, ahora vamos a trabajar en los efectos flotando. Queremos que las dos fases se sientan una encima de la otra. Y al rondar, queremos que la primera fase se mueva hacia arriba y la segunda fase se mueva hacia abajo. Entonces para hacer eso, iré aquí dentro del div con la clase de fase 1 y agregaré transformada, traduciré y 100 píxeles. Entonces debajo de eso, diré al pasar el cursor sobre la tarjeta div, seleccionaré la cara uno div. Entonces cambiaré el fondo negro a este color rosa. También añadiré transformar, traducir y volver a 0 otra vez. Y ahora se puede ver que el fondo negro se ha movido al fondo por 100 píxeles. Y cuando pasamos por encima de la tarjeta, vuelve a su posición en la parte superior y su color cambia a este color rosa. Hagamos lo mismo para el segundo div. En la parte inferior, entraré dentro del div con la clase de fase 2, y añadiré transformada, traduciré Y negativo 100 píxeles, luego por debajo de eso. Y al pasar el cursor sobre la tarjeta, seleccionaré la cara a div. Y agregar transformar. Traducir Y 0 otra vez. Y ahora se puede ver que el fondo blanco se desplaza hacia la parte superior y está cubriendo el negro. Y al pasar el cursor sobre la tarjeta, este efecto ocurre donde el fondo blanco se mueve hacia abajo y el fondo rosa se mueve hacia arriba, dándonos el efecto exacto que queremos. Pero queremos que el fondo rosa aparezca frente al blanco, no lo contrario. Entonces puedo volver aquí dentro de la cara un div y agregar z-index 1. También cambiemos el color de fondo de negro a este color gris oscuro. Y como puedes ver, el rostro uno div tiene este color gris y está sentado frente al Blanco lo hizo, y al pasar el cursor sobre la tarjeta, son efectos todavía funciona correctamente. De acuerdo, ahora trabajemos en peinar nuestra tarjeta. Voy a apuntar al div con la clase de cuadro de imagen que contiene nuestra imagen. Y sumaré opacidad 0.2 y transición 0.5 segundos. Entonces debajo de eso diré, al pasar el cursor sobre la tarjeta, seleccionaré el div cuadro de imagen y añadiré opacidad una de nuevo. Y como puedes ver, la imagen y el H3 ahora son un poco transparentes. Y cuando se cierne sobre la tarjeta, vuelven a ser completamente visibles. Volvamos atrás y apuntemos a la imagen dentro de la cara, un div. Entonces sumaré ancho 100 pixeles. Entonces también apuntaré al H3, que es la palabra diseño, y agregaré margen diez píxeles 00. Entonces agregaré relleno, 0, color, blanco, texto, alinear, centro. Y por último, tamaño de fuente, 25 píxeles. Por lo que ahora se puede ver la imagen y los H3 se ven mucho mejor. A continuación, trabajemos en el párrafo y la etiqueta de anclaje dentro de la segunda fase div, apuntaré primero al párrafo. Entonces sumaré margen 0, relleno 0. Bueno, entonces apuntaré a la etiqueta de anclaje y agregaré margen 15 pixels 00. Después añadiré display, inline-block, luego text-decoration. Ninguno, font-weight, 900 color. Este color gris. Después relleno cinco píxeles. Y finalmente frontera. Un píxel, sólido, este color gris también. Y ahora se puede ver cuando paso el cursor sobre la tarjeta, el párrafo y la etiqueta de ancla se ven mucho mejor. Hagamos sólo una última cosa y eso es cambiar el color de fondo del enlace al pasar el cursor sobre él. Iré aquí y diré, al pasar el rato sobre la etiqueta de ancla, añadiré color de fondo, nuestro color gris, luego color blanco. Y ahora cuando voy y paso el cursor sobre el enlace, puedes ver sus cambios de color de fondo y su color cambia a blanco también. Eso es todo, todos. Ya hemos terminado este efecto de carta cool, y creo que se ve increíble. 63. 67: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este efecto de desplazamiento de tarjeta en capas. Se puede ver cuando paso el cursor sobre la tarjeta, este efecto sucede donde a las capas blancas de la tarjeta se rotan por un grado específico, dándonos este efecto. Además, hay un espacio en blanco en la parte inferior que aparece y contiene este texto. Muy bien, empecemos a crear este efecto. Iré aquí dentro de mi HTML y añadiré un div, le daré una clase de tarjeta. Entonces dentro de ella, añadiré otro div con la clase de cuadro de imagen. Por lo que este será el div que contiene la imagen. Entonces debajo de eso, añadiré otro div con una clase de detalles. Y dentro de ella sumaré un H2 y diré John Doe. Y luego voy a añadir una etiqueta de salto de línea. Y voy a añadir un lapso y sólo decir fundador. Entonces iré a mi CSS y apuntaré al div del coche. Entonces agregaré posición, ancho relativo, 320 píxeles, altura, 350 píxeles. Fondo, blanco, radio de borde, cuatro píxeles. Entonces box-sombra, 02 pixels. Diez pixeles, RGBA, 0, 0, 0, 0, 0.2. Y ahora puedes ver tenemos este fondo blanco que se sienta en el centro del navegador. Muy bien, vamos a crear las dos capas blancas que se sientan debajo de nuestra tarjeta. Los crearemos usando los pseudo elementos antes y después. Por lo que seleccionaré V antes pseudo elemento de la tarjeta div. También seleccionaré la tarde. Y voy a añadir contenido. Cuerdas vacías. Posición, absoluta, superior, 0, izquierda, 0, ancho, 100%, altura, 100% también. Cuando fronterizo radio. Para píxeles, color de fondo, rojo por ahora. Entonces finalmente transición 0.5 segundos. Y ahora puedes ver tenemos este fondo rojo que se sienta encima de la tarjeta. Volvamos atrás y cambiemos el color de fondo a blanco. Otra vez. También sumaré z-índice minos1. Para hacer que el fondo blanco se sienta detrás de la tarjeta. Muy bien, ahora, al pasar el cursor sobre la tarjeta, queremos que los pseudo elementos antes y después roten para que podamos obtener nuestro efecto. Por lo que voy a ir aquí y decir cuando se cierne sobre la tarjeta, voy a hacer que pasen algunos cambios al pseudo elemento antes. Añadiré transformada, rotaré 20 grados. También añadiré box-shadow, 02 pixels, 20 pixels, RGB, 0, 0, 0, 0 punto 2. Hagamos lo mismo para el pseudo elemento after. Voy a copiar eso, pegarlo de nuevo y cambiar de antes a después. Entonces solo cambiaré el grado de rotación a diez grados en lugar de 20. Y ahora puedes ver cuando paso el cursor sobre la tarjeta, este efecto ocurre cuando tenemos dos fondos blancos que giran por diferentes ángulos, dándonos este efecto de carta en capas. Está bien, vamos a trabajar en el div cuadro de imagen que debería contener nuestra imagen. Yo lo apuntaré y agregaré posición absoluta, top 10 pixels, left, 10 pixels, bottom ten pixels, right? También diez píxeles. Por lo que este div tendrá diez píxeles de espacio a su alrededor. Entonces le añadiré color de fondo. Este color gris oscuro. Entonces finalmente transición 0.5 segundos. Entonces aquí tenemos un fondo oscuro que está rodeado de V card div. Entonces, cuando se cierne sobre la tarjeta, queremos que este fondo gris oscuro se desvíe un poco hacia la parte superior. Por lo que voy a ir aquí y decir, al pasar el cursor sobre la tarjeta, seleccionaré el cuadro de imagen div. Y cambiaré de fondo a 80 píxeles en lugar de 10 píxeles. Y ahora puedes ver cuando pase el cursor sobre la tarjeta, el fondo gris oscuro se encoge un poco desde abajo, dejando este espacio en blanco. Y aquí es donde vamos a posicionar nuestro contenido. Entonces volveré aquí y apuntaré al div con la clase de detalles. Entonces sumaré posición, absoluta, izquierda, 10 pixeles, ¿verdad? Diez píxeles, abajo, diez píxeles también. Entonces sumaré altura, tan solo 60 pixeles. Y por último, el texto alinear centro. Y ahora puedes ver que tenemos nuestros detalles sentados en la parte inferior. Está bien, Sigamos trabajando y vamos aquí a apuntar al H2. Entonces añadiré margen 0, relleno 0 también. Entonces font-weight, 600. Tamaño de fuente, 20 píxeles. Color. Este color gris. Entonces, por último, el texto se transforma en mayúsculas. Y ahora se puede ver que el H2 tiene este color gris y está sentado exactamente en la posición que queremos. Sigamos adelante. Voy a apuntar al lapso dentro de este H2, que es la palabra fundador. Entonces agregaré peso de fuente, 500. Tamaño de fuente, 16 píxeles. Entonces colorea este color rojo. Y ahora los detalles se ven exactamente como queremos. Y al pasar el cursor sobre la tarjeta, el fondo gris se encoge y aparecen los detalles. Solo ocultemos los detalles detrás del fondo gris. Voy a volver aquí dentro del cuadro de imagen div. Y añadiré z-index también. Y ahora se puede ver que los detalles están ocultos. Y al pasar el cursor sobre la tarjeta, vuelven a aparecer debajo del fondo gris oscuro como queremos. Enfriar. Ahora volvamos atrás y añadamos nuestra imagen. Voy a ir a mi HTML y voy a ir dentro del cuadro de imagen div y añadir imagen. Entonces añadiré nuestra imagen. Entonces iré a mi CSS y apuntaré a la imagen y agregaré posición. Absoluto, top, 0, izquierda, 0, ancho, 100%, altura, 100%. Entonces, por último, ajuste de objeto, cubierta. Y ahora puedes ver nuestra imagen ahora aparece dentro del div. Y al pasar el cursor sobre la esquina de la imagen, DIV se encoge hacia la parte inferior y aparecen los detalles de la tarjeta dándonos el efecto exacto que queremos. 64. 68: efecto creativo: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de hover de tarjeta. Se puede ver que teníamos esta imagen y este texto en la parte inferior dice título de la publicación. Y cuando pasamos el cursor sobre la tarjeta, este efecto ocurre donde el título se expande y ocupa el tamaño completo de la tarjeta En este párrafo y enlace aparecen debajo del título, la imagen también desaparece. Entonces, empecemos a crear este efecto. Iré aquí en mi HTML y añadiré un div, le daré una clase de tarjeta. Entonces dentro de eso, agregaré otro div, le daré una clase de cuadro de imagen. Por lo que esto contendrá nuestra imagen, pero lo agregaremos más adelante. Entonces debajo de eso, agregaré nuestro contenido. Añadiré un div, le daré una clase de contenido. Entonces dentro de eso, voy a añadir un h3 y decir título de post, luego una etiqueta de párrafo, y luego algún texto ficticito de Lorem Ipsum. Y finalmente una etiqueta de ancla. Y decir Leer más. A continuación, me trasladaré a mi CSS y apuntaré al div con la clase de tarjeta. Y sumar posición. Ancho relativo, 300 píxeles, altura 400 píxeles. Entonces le añadiré un color de fondo. Y por último, sombra de caja, 0 píxeles a lo largo del eje x, luego 30 píxeles a lo largo del eje y, para que tengamos alguna sombra debajo de nuestra tarjeta cuando también un valor de desenfoque de 30 píxeles, entonces el color de la sombra será RGBA, 0.5000. Y ahora puedes ver tenemos esta tarjeta con fondo negro y algunos textos sombra debajo de ella. Está bien, trabajemos en peinar los contenidos para que se vea como queremos. Iré aquí y apuntaré al div con la clase de contenido. Entonces sumaré posición Absoluto para posicionarlo relativamente al auto lo hizo entonces queremos posicionarlo en la parte inferior de la tarjeta. Por lo que vamos a sumar los 0 píxeles inferiores. Después el ancho, el 80% del ancho de la tarjeta, y la altura, solo 80 píxeles. Entonces le añadiré color de fondo, blanco. Por lo que ahora puedes ver tenemos este fondo blanco que contiene nuestro encabezado y nuestro párrafo, y se sienta la esquina inferior de la tarjeta. Muy bien, Vamos a centrar este fondo blanco horizontalmente. Dado que tiene un ancho del 80 por ciento del ancho de la tarjeta, esto significa que el espacio restante aquí es del 20% del ancho de la tarjeta. Y si desplazamos el contenido a la derecha en un 10% del ancho de la tarjeta, quedará 10 por ciento de espacio restante a la izquierda y 10 por ciento de espacio restante a la derecha. Y esto se enviará al contenido. Entonces hagámoslo. Iré aquí y agregaré izquierda 10 por ciento para desplazar el contenido div a la derecha en un 10 por ciento. Como se puede ver, ahora está centrado. Muy bien, volvamos atrás y sigamos trabajando. Añadiré texto alinear centro para centrar el texto dentro del contenido div. Entonces finalmente, transición 0.5 segundos. De acuerdo, con el fin de ver lo que estamos haciendo, Vamos a hacer que la altura del contenido div sea 100% en lugar de 80 píxeles. De acuerdo, vamos a darle estilo a los elementos dentro del div contenido. Ahora, apuntaré al H3 y agregaré tamaño de fuente, 30 píxeles. Transformación de texto. mayúsculas, el margen, 25 píxeles. Muy bien, vamos a darle estilo al párrafo que voy a apuntar y añadir ancho. 80% del ancho del contenido cuando marcan diez píxeles de arriba e abajo y de izquierda y derecha para centrarlo horizontalmente. Entonces tamaño de fuente 18 píxeles. Y finalmente, transición, 0.5 segundos. Enfriar. Ahora vamos a apuntar a la etiqueta de ancla y añadir texto, decoración. Ninguno, color de fondo, negro, color blanco. Después relleno, 10 píxeles de arriba e abajo, y 15 píxeles de izquierda y derecha. A continuación, muestra el margen de bloque en línea, los 10 píxeles principales. Cuando finalmente transición, 0.5 segundos. Está bien, se puede ver que no hay espacio suficiente, pero esto es porque fijamos el ancho del contenido en tan solo el 80% de la deuda de tarjetas. Pero cuando lo configuramos al 100%, nuestro div de contenido se verá mucho mejor. Por lo que volveré aquí dentro del div contenido, y volveré a establecer la altura a 80 píxeles. Y también añadiré desbordamiento oculto para ocultar el texto fuera de los 80 píxeles de nuestro contenido div. Enfriar. Ahora queremos hacer que el contenido div se expanda y ocupe todo el ancho y la altura de la tarjeta div cuando pasemos el cursor sobre la tarjeta. Entonces iré aquí y diré, cuando pasemos el rato sobre la tarjeta. Haré que pasen algunos cambios al contenido div. Pondré su altura al 100% y su ancho al 100% también. Y ahora se puede ver cuando paso el cursor sobre la tarjeta, el fondo blanco se hace más grande y ocupa el tamaño completo del actual sí. Pero también puedes ver que está desplazado hacia la izquierda. Y esto porque pusimos su propiedad izquierda en 10 por ciento para centrarla horizontalmente, si recuerdas. Por lo que podemos arreglar eso fácilmente agregando left 0% en lugar de 10%. Y ahora puedes ver el fondo blanco encaja perfectamente en la tarjeta div y lo cubre por completo. Muy bien, agreguemos algunos toques finales a este efecto. Queremos que el párrafo y la etiqueta de anclaje sean visibles y aparezcan sólo cuando pasemos el cursor sobre la tarjeta. Por lo que iré dentro tanto del párrafo como de un enlace y estableceré la opacidad en 0. Entonces iré aquí mismo y diré, al pasar el rato sobre la tarjeta, seleccionaré el párrafo. También seleccionaré la etiqueta de anclaje con eso. Y voy a añadir opacidad uno, luego retrasar la transición 0.5 segundos para que tardará un poco antes de aparecer. Y ahora cuando voy a pasar el rato sobre la tarjeta, se puede ver que el párrafo y la etiqueta de anclaje aparecen después de que el fondo blanco aparezca por completo, dándonos este efecto fresco. Está bien, sigamos adelante y agregamos la imagen a esta tarjeta. Volveré a mi HTML. Y aquí dentro del div con la clase de cuadro de imagen, añadiré nuestra imagen. Entonces volveré a mi CSS y apuntaré al div con la clase de cuadro de imagen. Entonces sumaré posición, absoluta, top 0, izquierda 0 también. Entonces ancho, 100%, altura 100%. Y por último, transición 0.5 segundos. De acuerdo, digamos la imagen. Yo lo apuntaré y agregaré ancho, 100%, altura, 100% también. A continuación, ajuste de objeto, cubra. Y por último, transición 0.5 segundos. Y ahora se puede ver que la imagen está ocupando el tamaño completo de su contenedor y mirando exactamente de la manera que queremos. De acuerdo, Por último, cuando se cierne sobre la tarjeta, queremos que la imagen se vuelva transparente. Entonces iré aquí y diré al pasar el rato sobre el div con la clase de tarjeta, seleccionaré la imagen y añadiré opacidad 0. Entonces eso es todo, todo el mundo. Se puede ver cuando pasamos el cursor sobre la tarjeta, la imagen poco a poco se vuelve transparente. Y ahora hemos terminado este efecto de tarjeta de aspecto fresco. 65. 69: efecto de texto humoso: Hola a todos. En esta lección vamos a crear estos creativos efecto de desvanecimiento ahumado para el texto. Por lo que vamos a empezar aquí en nuestro HTML, y voy a añadir una UL. Después LI. Y pondré cada carta dentro de un aliado. Por lo que sumaré S justo aquí. Entonces copiaré eso y lo pegaré de nuevo muchas veces. Y luego sumaré todas las letras grado. Entonces ahora agreguemos algunos estilos. Iré a mi CSS y empezaré agregando un color de fondo gris oscuro al cuerpo. Entonces voy a apuntar a la UL. Y sumaré margen 0, relleno 0 también. Entonces añadiré display flex para que todas las letras se muestren de lado a lado, así. Ahora vamos a apuntar a los ítems de lista que contienen las letras. Y voy a añadir el estilo de lista ninguno para deshacerme de estas balas. Entonces agregaré color, blanco, luego tamaño de fuente, 100 píxeles, peso fuente, negrita, espaciado entre letras, diez píxeles. Y por último, transición a segundos. Y ahora la palabra se ve mejor. Si echamos un vistazo a una demo, y si miras cuidadosamente el movimiento de las letras, puedes ver que se están moviendo hacia arriba y girando al mismo tiempo. Por lo que usaremos la función de traducción para hacer que las letras se muevan hacia arriba y la función de rotación para hacerlas rotar obviamente. Entonces vayamos a nuestro CSS y cuando pase el cursor sobre la UL, quiero que le pasen algunos cambios al aliado. El primer cambio es que quiero agregar transformación, rotar 45 grados. Después un espacio. También quiero que las letras se traduzcan verticalmente en el eje y por menos 200 píxeles, lo que se moverán hacia arriba. Ahora, cuando pase el cursor sobre la UL, se puede ver que las letras se mueven hacia arriba y giran al mismo tiempo. Ahora, yo también quiero que la opacidad de las letras sea 0. Por lo que iré aquí mismo y le añadiré opacidad 0. Y ahora cuando vuelves a rondar, las letras en ese siendo transparentes. Ahora con el fin de hacer este efecto ahumado o borroso, podemos usar una propiedad CSS llamada filtro. Por lo que iré aquí mismo dentro de los ítems de la lista y Agregar Filtro desenfocar 20 pixels. Por lo que esta es una propiedad CSS que hará que los textos borren y le dará este bonito efecto ahumado. Y cuanto mayor número agregues aquí, más borroso se pondrá. Por lo que ahora cuando pase el rato sobre nuestra palabra, se puede ver que estamos obteniendo exactamente el efecto que queríamos. Ahora, queda una cosa. No queremos que este efecto le pase a todas las letras al mismo tiempo. Queremos que la primera letra desaparezca primero, luego la segunda, luego la tercera, y así sucesivamente. Podemos hacer esto fácilmente usando la propiedad de retraso de transición, que retrasará la ocurrencia de la transición. Entonces lo que voy a hacer es ir justo aquí y decir LI, colon. Dash child, paréntesis abiertas, 1, cerrar paréntesis. Esto se dirigirá al primer hijo de los ítems de la lista, que es la letra S. Siguiente, copiaré esto y lo pegaré cuatro veces. Y cambiaré el número cada vez. Por lo que dos por la segunda letra, tres por la tercera, por, por la cuarta, cinco por la quinta. Entonces iré aquí mismo a la primera letra y añadiré retraso de transición 0 porque queremos que desaparezca de inmediato. Entonces copiaremos esto y lo haremos 0.4 segundos para la segunda letra que 0.8 segundos para la tercera, 1.2 segundos para la 4.6ª, un segundo para la quinta. Y ahora cuando voy a pasar el rato sobre la palabra, las letras deberían desaparecer una tras otra. Al igual que así. 66. 70 - Relleno de texto en la historia: Hola a todos. En esta lección vamos a crear este efecto de relleno de texto. Cuando se cierne sobre esta palabra, se puede ver este bonito efecto relleno está sucediendo. Entonces hagámoslo realmente. Empezaré aquí en mi HTML agregando un H1. Y sólo diremos texto. Después iremos a nuestro CSS para agregar algunos estilos. Vamos a apuntar a la H1. A continuación, agregue margen, 0, relleno, 0, familia de fuentes. Daniel. Tamaño de fuente, 120 píxeles. Color. Este color gris claro. Texto transforma mayúsculas para hacer todas las letras mayúsculas. Y por último, posición relativa. Entonces aquí puedes ver que es más grande y todas las letras son mayúsculas. Muy bien, ahora vamos a crear el texto más oscuro que entrará cuando pasemos el cursor sobre este texto gris claro, usaremos el pseudo elemento antes. Entonces iré aquí mismo y le añadiré un colon antes. Y voy a añadir contenido. Textos. Posición, absoluta, superior, 0, izquierda, 0, color. Queremos que sea más oscuro. Entonces usaremos este color gris oscuro. ¿ Verdad? Por lo que aquí puedes ver tenemos el texto oscuro sentado encima de los textos claros y cubriéndolo. Esto es porque dijimos izquierda y arriba derecha aquí a 0. Entonces, por ejemplo, si cambié la pestaña 100% en lugar de 0, puedes ver que ahora está sentado debajo del texto claro. Muy bien, volvamos a cambiarlo a 0 otra vez. Ahora, queremos que el relleno y el efecto sobre este texto más oscuro sucedan cuando pasamos el cursor. Por lo que vamos a transitar la propiedad width, lo que significa que haremos el ancho del texto oscuro 0. Y luego al rondar, lo haremos 100% de nuevo. Y suavizaremos la acción mediante el uso de la propiedad de transición. Lo tengo. Vamos a llegar a ella. Iré aquí mismo dentro del pseudo elemento antes y añadiré ancho 0, desbordamiento oculto. Y finalmente transición. Todos 0.5 segundos. Después al rondar sobre el H1, voy a hacer algunos cambios sucedieron al pseudo elemento antes. Volveré a cambiar el ancho a 100. Por lo que aparecerá con su ancho completo, dándonos ese efecto de relleno que vamos por. Y ahí vamos. Es así como puedes hacer un bonito texto relleno en efecto de una manera muy rápida y fácil. 67. 71: efecto de collar con css: Hola a todos. En esta lección vamos a crear este bonito efecto hover para los iconos de las redes sociales. Entonces, cuando paso el cursor sobre cualquier icono, se puede ver que un fondo verde patea, el color del icono cambia y se hace más grande. Entonces veamos cómo podemos hacer eso. ¿Verdad? Entonces aquí en mi HTML, puedes ver tengo un enlace a la biblioteca de iconos Font Awesome que nos dará acceso a todos los iconos de Font Awesome. Empezaré agregando un div y dándole una clase de contenedor. Entonces dentro de ella voy a añadir un enlace y dado una clase de icono. Entonces dentro de eso, voy a añadir i para Font, Iconos Impresionantes. Y le daré una clase de f, a, b, f a Facebook. En esta clase solo mostraremos el icono de Facebook. Entonces copiaré este enlace, lo pegaré cuatro veces. Y voy a añadir los otros iconos que queremos, como Twitter, Google, YouTube, e Instagram. Entonces aquí puedes ver que nuestros iconos están todos sentados en fila y se ven bastante feos. Entonces vayamos a nuestro CSS y hagamos que se vean un poco mejor. Empezaré por apuntar al contenedor. Y voy a añadir display flex. Entonces apuntaré a los enlaces con la clase de icono. Agrega ancho 90 píxeles, luego altura 90 píxeles también. Entonces le añadiré un color de fondo. Este color blanco, margen, diez píxeles, radio de borde, 30 por ciento. Y por último, el color son un bonito color verde. Mantengámoslo en movimiento. Iré aquí mismo dentro del contenedor y agregaré texto alinear centro para centrar el icono, así. Después iré al icono y añadiré sombra de caja y añadiré algo de sombra de cuadro. Entonces posición relativa. ¿Verdad? Ahora, necesitamos trabajar en los iconos dentro de nuestro enlace. Por lo que voy a decir icono, yo para apuntar a los iconos. Entonces añadiré altura de línea, 90 píxeles para que el icono se centre verticalmente. Entonces tamaño de fuente 25 píxeles, y transición o 0.2 segundos. Bien. Ahora nuestros iconos se ven exactamente como queremos. Entonces pasemos al siguiente paso. Al pasar el cursor sobre cualquier enlace, quiero hacer que el icono cambie de colores para que coincida con el fondo. Y quiero que el ícono se vuelva un poco más grande. Entonces hagámoslo. Voy a decir icono en el hover. Haré que pasen algunos cambios al icono Font Awesome. Añadiré transformada, escala 1.3, por lo que se hará más grande y coloreará este color blanco, al igual que el color de fondo. Entonces ahora cuando voy a pasar el cursor sobre cualquier icono, puede ver que el color se vuelve igual que el fondo, razón por la cual ya no podemos verlo. Pero pasemos al siguiente paso. Necesitamos crear el fondo verde en movimiento que aparece cuando pasamos el cursor sobre los iconos. Entonces vamos a crear eso. Iré aquí mismo y añadiré ícono colon antes. Y añadiré contenido, posición vacía, absoluta, ancho, 120 por ciento, y altura 120% también. Entonces color de fondo o color verde. Entonces sumaré izquierda menos 110 por ciento y top 90 por ciento. Entonces ahora puedes ver que tenemos nuestro fondo verde y está sentado en esta posición por los valores de arriba e izquierda que le agregamos. Vamos a añadir transformada. Gira 45 grados para rotar el fondo verde. De acuerdo, ahora tenemos que hacer que se mueva a través de nuestro enlace cuando pasemos sobre él. Entonces si echamos un vistazo a nuestra demo, puede ver que cuando paso el cursor sobre el enlace y el fondo verde viene de su posición inicial, luego se mueve a través del enlace hasta que sube un poco hacia la parte superior derecha, luego regresa y cubre el enlace. Por lo que vamos a utilizar animaciones CSS para crear este efecto. Tendremos tres etapas de animación. En la primera etapa, el fondo estará en su posición original. Después en la segunda etapa, al 50% de la duración de la animación, el fondo se desplazará un poco a la esquina superior derecha del enlace. Después pasamos a la tercera etapa. Al 100% de la duración , volverá a cubrir el enlace. Entonces hagámoslo. Iré aquí mismo en mi CSS y crearé una nueva animación. Y sólo nombra animación. Y dentro de ella, al 0% de la duración de la animación, diré izquierda menos 110 por ciento y top 90 por ciento. Si recuerdas, esos son los valores que ya aplicamos aquí arriba. Por lo que eso debería hacer que la animación comience desde la posición original del fondo verde. A continuación, copiaré eso. Vuelve a pegarlo. Y al 50% de la duración de la animación, cambiaré la izquierda a 15 por ciento y la parte superior a menos 30 por ciento. Después agrega el 100%. Haré la izquierda menos 10 por ciento y la parte superior menos 10% también. Ahora, necesitamos agregar esta animación al fondo verde. Entonces subiré aquí. Y al pasar el cursor sobre el icono, haré que pasen algunos cambios al fondo verde. Añadiré animación, luego el nombre de la animación, que es animación, luego duración de la animación 0.7 segundos. Y la iteración de animación cuenta uno, porque queremos que esto suceda sólo una vez cuando pasemos el cursor. Y por último, el modo de película de animación hacia adelante porque queremos que el fondo verde se mantenga en su posición final después de que termine la animación. Y queda una cosa, que es ocultar las partes del fondo verde fuera del enlace subiendo aquí dentro del selector de iconos y agregando desbordamiento oculto. Y ahora cuando voy y paso el cursor sobre el enlace, pueden ver son fondo verde viene de la esquina inferior izquierda, luego se mueve hacia arriba hasta que se desplaza un poco más allá la esquina superior derecha y luego regresa y cubre el enlace. Y mientras todo lo que está sucediendo, el ícono en sí se hace más grande y son cambios de color para que coincida con el fondo. 68. 72: efecto de borde rotativo usando transformaciones de texto con CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de desplazamiento de borde. Se puede ver cuando paso el cursor sobre este texto, este efecto sucede donde aparecen los bordes superior e inferior, luego los izquierdo y derecho. Después tenemos fronteras rotadas que aparecen uno tras otro también. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un div y dándole una clase de caja. Entonces dentro de eso le añadiré un lapso y le daré una clase de girado. Por lo que este será el lapso que ha girado fronteras. Entonces debajo de eso, sumaré un H1. Y dentro de eso voy a decir CSS. Entonces añadiré un elemento de salto de línea para que los textos venideros se sientan en la siguiente línea. Entonces añadiré otro lapso y dentro de él diré frontera. Por lo que envolvemos este lapso de palabras solo para poder peinarlo de forma individual. Entonces después de este lapso, añadiré otro elemento de salto de línea. Y diré hover, luego otro elemento de salto de línea y decir efecto. Muy bien, entonces iré a mi CSS y apuntaré al div externo con la clase de caja. Entonces agregaré posición, ancho relativo, 200 píxeles, altura 200 píxeles también. Entonces caja-dimensionamiento, border-box. Y por último, color de fondo, amarillo. Por lo que ahora puedes ver tenemos esta caja amarilla centrada en el navegador. Está bien, trabajemos en el H1. Volveré atrás y apuntado. Entonces añadiré margen 0, relleno 0 también. Entonces color, este color gris oscuro. Y para centrar el texto, sumaré posición absoluta, superior, 50 por ciento. Izquierda, 50 por ciento también. Entonces Transformar. Traducir, negativo 50 por ciento y negativo 50 por ciento. Entonces agregaré texto alineado, centro, tamaño de fuente, 24 píxeles. Y por último, el texto se transforma, mayúscula. Muy bien, vamos a añadir un color diferente a la palabra borde. Te acuerdas que lo envolvimos dentro del lapso. Entonces vamos a apuntar a este lapso. Y agrega color. Este color verde y tamaño de fuente, 30 píxeles. Impresionante. Trabajemos en los bordes de esta caja amarilla. Crearemos estos bordes utilizando los pseudo elementos antes y después. Por lo que iré aquí y apuntaré al pseudo elemento antes del cuadro div. Entonces dentro de eso, añadiré contenido cadenas vacías, posición absoluta 0, izquierda 0 también. Entonces queremos que ocupe todo el ancho y la altura de la caja div. Por lo que agregaremos ancho 100% y altura 100% también. Entonces vamos a añadir borde superior cuatro píxeles sólido. Nuestro color verde. Y borde inferior cuatro píxeles sólido. Nuestro color verde otra vez. Entonces box-dimensionamiento, border-box, y finalmente transición 0.5 segundos. Por lo que ahora puedes ver tenemos estos dos bordes del pseudo elemento antes en la parte superior y la inferior del fondo amarillo. Y esto se debe a que fijamos la altura y el ancho del fondo amarillo al 100%. Entonces si retomando todo el ancho y la altura del cuadro div, acuerdo, ahora vamos a animar estos dos bordes. Volveré aquí y añadiré escala de transformación x 0. Entonces para hacer crecer las fronteras, de nuevo, al flotar, iré aquí y diré, cuando pasemos el rato sobre la caja, quiero hacer algunos cambios en el pseudo elemento antes. Voy a añadir la escala de transformación x volver a una otra vez. Y ahora se puede ver que los dos bordes ahora están ocultos porque ponemos x a 0. Y cuando muevo sobre el cuadro div, los dos bordes vuelven a crecer hasta que su escala x se vuelve una de nuevo. Está bien, Trabajemos en las fronteras izquierda y derecha. Ahora. Los crearemos usando el pseudo elemento after. Por lo que sólo voy a copiar el pseudo elemento antes. Pégalo de nuevo y cámbielo antes a después. Entonces. Dentro de eso, cambiaré frontera arriba dos frontera derecha. Y frontera de fondo a frontera izquierda. También copiaré el efecto hovering. Pégalo y cámbielo antes a después. Entonces cambiaré la propiedad de transformación de escala x a escala. ¿ Por qué? Y ahora se puede ver cuando voy a pasar el rato sobre el texto, este efecto sucede donde tenemos bordes izquierdo y derecho que aparecen y crecen a lo largo del eje y junto con los pseudo elementos después. De acuerdo, ahora trabajemos en las fronteras rotadas. Si recuerdas, agregamos un span en nuestro marcado HTML con una clase de girado, y dijimos que lo usaremos para crear los bordes rotados. Veamos cómo podemos hacer eso. En primer lugar, lo apuntaré y agregaré posición, absoluta. Entonces ancho, 100%, altura, 100% también. Bloque de pantalla y color de fondo. Amarillo. Entonces queremos transformarlo en 45 grados. Por lo que sumaré transformada, rotaré 45 grados. Entonces, por último, caja de dimensionamiento de caja de borde. Y ahora se puede ver tenemos este fondo amarillo que se gira 45 grados y se sienta en la parte superior del primer fondo. Muy bien, ahora vamos a crear el efecto de borde para este fondo girado. Iré aquí y copiaré todo este código de la caja div y es efectos hover. Entonces pegaré y apuntaré al div girado, no a la Caja 1. Por lo que se seleccionarán los pseudo elementos antes y después del rotado. Entonces iré aquí y apuntaré al pseudo elemento antes del div girado al flotar. Y el pseudo elemento después del div girado al rondar también. Y ahora puedes ver cuando paso el cursor sobre el texto, este efecto sucede donde los cuatro bordes de los fondos girados crecen y se hacen más grandes, dándonos este efecto realmente genial. Por último, queremos sumar algunos retrasos de transición entre las fronteras para que aparezcan uno tras otro. Y vamos a ir aquí cuando se cierne sobre el pseudo elemento after del cuadro div. Y voy a añadir retardo de transición 0.5 segundos para que al situar los bordes derecho e izquierdo del cuadro div, esperemos 0.5 segundos. Entonces iré aquí y agregaré retraso de transición 1 segundo. Y luego finalmente aquí y agregar retraso de transición 1.5 segundos. Y ahora cuando flote, puedes ver que las fronteras están apareciendo una tras otra, dándonos el efecto exacto que queremos. 69. 73: Hola a todos. Bienvenido a esta nueva sección del curso donde estaremos hablando de animaciones CSS y fotogramas clave. Ahora, la forma en que funcionan las animaciones CSS y los fotogramas clave es muy sencilla. En primer lugar, hay que definir o crear una regla de animación CSS y asignarle el nombre que desee. Segundo, agrega esta regla de animación. Se lo crea a cualquier elemento HTML de la página para que la animación funcione en ella. Esto será mucho más fácil si lo vemos en acción. Entonces aquí en mi HTML, tengo este div todo por sí mismo. Le he agregado algunos estilos en mi CSS. Acabo de agregar un ancho, alto, y un color de fondo rojo. Entonces cuando vemos esto en el navegador, podemos ver nuestro div vacío está sentado aquí mismo. Ahora volvamos a nuestro CSS y veamos cómo usar fotogramas clave y animación en este div. Entonces dijimos que lo primero que tenemos que hacer es definir la regla de animación. Y para hacer eso, lo escribimos así en los fotogramas clave de Mark. Entonces el nombre de la animación, digamos moviéndose. Y luego dentro de ella usamos palabras clave como de y para. Entonces diré de agregar, transformar, traducir X 0, y luego transformar traducir x 1, 0, 0, 0, 0, 0. 0. Entonces lo que está pasando aquí es que creamos una regla de animación. Y lo que hará esta regla de animación es que llevará el elemento de un estado a otro. Por lo que tomará el elemento de translate X 0, decir de su posición original para traducir x 1, 0, 0, 0, 0, 0, gris. Ahora bien, si voy al navegador y recargo mi página, se ve nada cambiado. Elemento sólo está sentado en su lugar y no ha sucedido ningún movimiento. Y eso es porque creamos la regla de animación aquí mismo, pero no le dijimos al navegador qué elemento recibirá esta animación. Entonces si estás familiarizado con algún lenguaje de programación, esto es muy similar a las funciones donde creas un bloque de código que debería hacer algo. Y luego agregas ese bloque de código a los elementos que quieres que ese bloque de código surta efecto. Entonces lo que debemos hacer aquí es decirle al navegador en qué elemento debe funcionar esta animación. Y esto se puede hacer fácilmente yendo al elemento en sí, que es el div. Por lo que hay dos propiedades requeridas para que la animación funcione en este elemento. El primero es el nombre de la animación, que se mueve. Y el segundo es la duración de la animación. O cuántos segundos queremos que esta animación tome de principio a fin. Digamos tres segundos. Y ahora, cuando voy al navegador y vuelvo a cargar, puede ver que el div ahora empieza desde translate X 0, es decir, desde su posición original y se mueve a traducir x 1, 0, 0, 0, 0, 0, 0 en un periodo de tres segundos. Esto es todo para esta lección. Esa fue una introducción a la animación CSS y los fotogramas clave. Aprendimos qué son y cómo funcionan. Y en las próximas lecciones, aprenderemos más propiedades que nos darán mayor control al usar CSS, animaciones, y fotogramas clave. Entonces nos vemos. 70. 74: crea animaciones css con más etapas: Hola a todos. En esta lección aprenderemos a crear animaciones con más de dos etapas. Entonces vamos a saltar justo dentro. Aquí está el código de la lección anterior. Si echas un vistazo a las palabras clave que estamos usando aquí, puedes ver que tenemos desde y hacia. Y esto significa que el elemento cambiará de esta primera etapa a esta etapa final a lo largo de una duración específica, que en nuestro caso es de tres segundos. Ahora bien, ¿y si queremos sumar más cambios y más etapas? Por ejemplo, en lugar de hacer que el elemento se mueva horizontalmente de la primera posición a la segunda, si queremos que se mueva de la primera posición a una segunda, y luego 2 terceros 1. Entonces tendríamos tres etapas. Bueno, podemos hacer esto fácilmente usando el método de porcentaje en lugar de las palabras clave de N2. Entonces lo que podemos hacer aquí es que podemos eliminar esto de la palabra clave y agregar 0% en su lugar. Por lo que este 0% significa el punto de partida de la duración de la animación. Entonces eliminaré estos dos y añadiré el 100%. En este medio al 100% de la duración de la animación, o tres segundos. Entonces lo que estoy haciendo aquí es que solo digo que al 0% de la duración de la animación, decir el punto en el que quiero que empiece la animación, quiero agregar esta transformación, que en realidad no cambiará nada para el elemento. Por lo que el elemento comenzará desde donde originalmente estaba en nuestra página. Y luego al 100% del tiempo de duración de animación, es decir, al final de los segundos tres, quiero que el elemento esté en esta posición. Por lo que durante estos tres segundos, el elemento se moverá de la primera posición a la segunda posición. Y nada debe cambiar con respecto a la lección anterior. Por lo que iré al navegador y recargaré. Y se puede ver que el div se está moviendo de su posición original a su nueva posición a lo largo de tres segundos, igual que hicimos en la lección anterior. Volvamos a nuestro CSS. Ahora, esto sigue siendo dos etapas. Queremos más etapas que eso. Podemos hacer eso fácilmente usando el método de porcentaje porque nos da muchas opciones del 0% al 100%. Entonces, por ejemplo, si voy justo aquí y cambio este 100% a 50 por ciento, y luego por debajo de eso, agrego 100%. Después Transformar, traducir 1, 0, 0, 0, 0, 0 en el eje x. Y entonces digamos 500 píxeles hacia abajo. Entonces ahora tenemos tres etapas. La primera etapa, la segunda etapa, y la tercera. Entonces lo que sucederá es del 0% al 50 por ciento de la duración de la animación, decir desde el principio hasta el punto medio de la duración de la animación. O Durante el 1.5o un segundo de los tres segundos completos, la posición del elemento debe cambiar de su posición original horizontalmente a esta segunda posición. Y luego en los 1.5 segundos restantes, el elemento cambiará de esta posición a esta nueva posición, que es 1, 0, 0, 0, 0 a la derecha, y 500 píxeles hacia la parte inferior de la página desde su posición original. Entonces cuando voy al navegador y refresco, puede ver que el elemento se mueve de su lugar original a un punto 1, 0, 0, 0, 0, 0 a la derecha durante el 1.5o de segundos. Y luego se mueve a una nueva posición, que sigue siendo 1, 0, 0, 0, 0 a la derecha, y 500 píxeles hacia abajo durante el 2.5ésimo segundo. Y luego después de eso vuelve a su posición original una vez terminada la duración de la animación. Ahora podemos hacer diferente la duración del cambio para cada etapa. Por ejemplo, si cambio este 50 por ciento a tan sólo 10 por ciento, en esta situación, la primera etapa sucederá mucho, mucho más rápido porque sucederá en un periodo de sólo 10 por ciento de los tres segundos. Si bien la segunda etapa sucederá más lenta porque sucederá del 10 por ciento al 100%, decir durante un periodo del 90% de los tres segundos. Entonces vayamos al navegador y veamos cómo se ve eso. Se puede ver que la primera etapa está sucediendo mucho más rápido ahora, mientras que la segunda está sucediendo más lentamente. Entonces esto es todo para esta lección, todos, si tienen alguna pregunta al respecto, solo déjenla en la sección de preguntas y respuestas y haré todo lo posible para ayudarles a verlos en la siguiente lección. 71. 75: propiedad del modo para relleno de animación: Hola a todos. Bienvenido a esta nueva lección donde estaremos aprendiendo sobre la propiedad del modo de película de animación. De acuerdo, entonces lo que hicimos en la última lección es que hicimos que este div se moviera a la derecha, cien, diez cientos píxeles, luego hacia abajo, 500 píxeles, así. Y luego después de que termine la animación, notarás que el div solo está reventando en su lugar original. Eso puede parecer raro. Entonces, ¿qué pasa si queremos que el div se quede en su posición final donde termina la animación en lugar de reventar así. Bueno, podemos hacerlo usando la propiedad del modo de película de animación, que básicamente le dice al navegador qué hacer con el elemento fuera de la ventana de animación, es decir, antes de que comience la animación y después de que termine. Entonces aquí estamos tratando el segundo caso, que es después de que termine la animación. Y hay dos opciones. El primero es el elemento volverá a estallar a su lugar original, es el predeterminado. Y el segundo es el elemento se mantendrá en su posición final. Y lo haremos usando la propiedad del modo de película de animación. Por lo que volver a nuestro CSS. Iré aquí mismo dentro del selector div y añadiré el modo de película de animación. Y tenemos cuatro valores. El primero es ninguno, que no hace nada fuera de la ventana de animación. Simplemente dirá, cuando termine la animación, devolver el div a su estado original antes de la animación. Y por supuesto, es el valor por defecto. El segundo valor es hacia adelante, lo que nos debe interesar en nuestra situación porque hacia adelante le dice al navegador que tome la última etapa de la animación aquí y la aplique al elemento al final de la animación. Por lo que ahora, cuando voy al navegador y recargo, puede ver que el elemento se mantiene en su posición final y no vuelve a reaparecer a su lugar original antes de la animación. Personalmente, creo que esto se ve más realista. Ahora, también podemos usar un valor llamado al revés. Entonces para demostrar esto, solo volveré a mi CSS. Iré aquí mismo y añadiré otra propiedad que es retardo de animación. Y digamos tres segundos. Y lo que esto hará es que hará que la animación espere tres segundos antes de que comience. Entonces si voy a mi navegador y me refresco, puedes ver el div esperar tres segundos y luego empieza a volver a pasar a nuestro CSS. Ahora, digamos que queremos que la animación empiece de 500 píxeles a la derecha y no de su lugar original en la página. Iré aquí mismo y cambiaré esto a 500 píxeles en lugar de 0. También cambiaré 10% a, digamos 50 por ciento. Porque quiero que el movimiento horizontal tome más tiempo para que realmente lo podamos ver. Y también cambiaré la duración de la transición a cinco segundos para que podamos ver lo que está sucediendo con claridad. Ahora, de acuerdo con el código que tenemos aquí mismo, lo que debería pasar es que la animación debe esperar tres segundos, y luego debe comenzar desde este punto aquí mismo, que es de 500 píxeles a la derecha de su posición original. Y entonces la animación debe continuar hasta que esté terminada. Y al final, el div debería permanecer en su posición final porque dijimos que el modo de película de animación se adelanta. Entonces cuando voy al navegador y recargo, se puede ver la animación esperar tres segundos. Entonces el elemento parte 500 píxeles a la derecha. Entonces comienza la animación y continúa como antes. Ahora bien, esto podría no ser lo que esperabas. Es posible que hayas pensado que el div comenzaría aquí, 500 píxeles a la derecha, luego esperar tres segundos. Y después de eso, comenzaría la animación. Es decir, eso tiene sentido porque fijamos el punto de partida de la animación en 500 píxeles a la derecha. Pero este no es el defecto. Recuerda que el valor predeterminado es que antes de que comience la animación y después de que termine, los elementos deben estar en su lugar original. Pudimos cambiar la posición una vez terminada la animación y convertirla en el punto final de la animación utilizando hacia adelante como valor de la propiedad del modo de película de animación. Y también podemos hacer eso y hacer que la animación comience en el punto de partida que definimos en los fotogramas clave y no en su lugar original mediante el uso de otro valor que está al revés. Entonces volveré a mi CSS y cambiaré esto hacia adelante, hacia atrás. Entonces iré a mi navegador y recargaré. Y ahora se puede ver la animación está empezando desde el punto 500 píxeles a la derecha y no desde su posición original. Pero como cambiamos hacia adelante, hacia atrás, el div ya no se queda en su lugar final, retrocediendo nuevamente a su posición original, podemos arreglarlo fácilmente aplicando tanto hacia adelante como hacia atrás. Entonces volveré a mi CSS y cambiaré esto a ambos. Y ahora cuando voy y recargo el navegador, puede ver que el elemento permanece en el punto de partida durante tres segundos, luego se mueve al punto final, y se queda ahí están a la animación. Entonces para envolver las cosas, la propiedad del modo de película de animación simplemente nos dice de dónde deben comenzar los elementos y dónde debe terminar. Si no lo definimos, el elemento, simplemente partiremos de su estado original antes de que se lleve a cabo cualquier animación. Y también volverá a este estado original una vez terminada la animación. Pero podemos usar hacia adelante para que los elementos sean día en el paso final de la animación. O podemos usar al revés para que empiece desde el punto de partida de la animación. O simplemente podemos usar ambos para juntar los dos resultados. 72. 76: propiedad de cuentos de iteración de animación: Hola a todos. Bienvenido a esta nueva lección del curso de transición y transformaciones de animación CSS, donde estaremos hablando de la propiedad de recuento de iteración de animación. Por lo que el recuento de iteración de animación simplemente le dice al navegador cuántas veces se debe repetir la animación y acepta valores de números. Entonces dos significa que la animación se reproducirá dos veces, y tres significa que se repetirá tres veces y así sucesivamente. Genial. Entonces aquí en mi CSS tenemos todo como estaba al final de la lección anterior. Simplemente eliminaré esta propiedad de retardo de animación para que la animación comience inmediatamente. Y voy a ir aquí mismo y añadir recuento de iteración de animación. Digamos tres. Y cambiaré la duración de la animación a tres segundos para que sea un poco más rápido. Y ahora, cuando vaya al navegador y vuelva a cargar, se puede ver la animación se repetirá tres veces antes de que termine. Impresionante. También podemos usar la palabra clave infinito para hacer que la animación se reproduzca un número infinito de veces o para siempre. Entonces volvamos a nuestro CSS y probemos eso. Iré aquí mismo y cambiaré esto a infinito. Y ahora cuando vuelva al navegador y vuelva a cargar, la animación se reproducirá para siempre y nunca se detendrá. Y eso es todo por esa propiedad. Es muy sencillo. Simplemente especifica cuántas veces se debe reproducir la animación. También quiero hablar un poco de otra propiedad, que es la función de temporización de animación. Esto es similar a la función de temporización de transición que aprendimos en la primera sección del curso. Y acepta los mismos valores que son 0s. Lineal. Facilidad de entrada, facilidad de salida y facilidad de entrada. Entonces revisemos esos juntos. Voy a cambiar este infinito a uno y luego agregar la función de temporización de animación yz. Entonces lo que hace es que hace que el movimiento comience lento, luego ir más rápido cuando n lento. Muy bien, veamos cómo se ve eso. Pero primero, cambiemos nuevamente la duración de la animación a cinco segundos. A ver qué está pasando. Iré a mi navegador y recargaré. Y con el plano de animación, se puede ver el efecto de la facilidad. Muy bien, volvamos atrás y probemos la facilidad, que empieza rápido. El viento se ralentiza al final. Al igual que así. Entonces facilidad en, que si recuerdas, empieza lento, luego va más rápido al final. Y facilidad de entrada, salida, que es muy similar a la facilidad ya que empieza lento, luego va más rápido en el medio, luego vuelve a ralentizar al final. Y finalmente, lineal, lo que hará constante la velocidad de cambio para que la velocidad del movimiento sea la misma a lo largo de la duración de la animación. Y así chicos, esto es todo para esta lección, y los estaré viendo en la próxima. 73. 77 - propiedad de dirección de animación: Hola a todos. Bienvenidos a esta nueva lección en nuestro curso, donde estaremos hablando de la propiedad de dirección de animación. Las propiedades de dirección de animación bastante simples. Simplemente especifica la dirección de la animación y acepta cuatro valores. El primer valor es normal, que es el valor predeterminado. Y le dice al navegador que inicie la animación desde su principio aquí hasta su fin, aquí mismo. Entonces intentemos eso. Iré aquí mismo y agregaré dirección de animación, normal. Y cuando voy al navegador y recargo, se puede ver que la animación se está reproduciendo normalmente desde el principio hasta el final. El segundo valor que podemos utilizar es inverso, que le dice al navegador que reproduzca la animación. En reversa, lo que significa que comenzará desde el final de las animaciones y terminará en su inicio. Por lo que cambiaré esto para revertir y volver a mi navegador. Y se puede ver que la animación se está reproduciendo en reversa desde el final hasta el principio. Genial. Ahora el tercer valor es alterno. Y lo que alterna hace es que haga que la animación se reproduzca desde el principio hasta el final, luego retrocede desde el final hasta el principio. Y luego desde el principio hasta el final, y desde el final hasta el principio y en adelante y en adelante hasta que finalice el recuento de iteración de animación. Entonces cambiaré eso para alternar. Y también cambiaré el recuento de iteración de animación a infinito y la duración de la animación a solo tres segundos. Y ahora, cuando voy al navegador y recargo, la animación se reproduce desde el punto de partida hasta el punto de llegada, y luego regresa del punto de llegada al punto de partida y así sucesivamente. Y también tenemos reversa alterna, que hace lo mismo que alterna, pero apenas empieza desde el final hasta el principio. Esta es la única diferencia. Entonces vamos a revisar eso. Añadiré ríos alternos. Y se puede ver que comienza desde el final hasta el principio y luego vuelve al final. Y seguirá haciéndolo para siempre. 74. 78: método corto de animación: Hola a todos. En esta lección, aprenderemos cómo combinar todas las propiedades de animación CSS en una sola propiedad. Porque si las miras, hay muchas propiedades y son confusas. Por lo que podemos combinarlos todos en una propiedad llamada animación. Pero, ¿cómo hicimos eso? Iré aquí mismo y solo diré animación. Y entonces la primera propiedad que suelo añadir es el nombre de la animación. Entonces diré movimiento, luego un espacio y añadiré la duración de la animación, que es de tres segundos, luego un espacio. Y podemos simplemente poner todas estas propiedades de lado a lado. No importa cómo se ordenen. Harán lo mismo sin importar cuál aparezca primero o un segundo o lo que sea. Pero hay que tener algo en cuenta si quieres usar la propiedad de retardo de animación, tienes que agregar el tiempo de retardo después del tiempo de duración, porque el navegador siempre considera el primer valor de tiempo que agregas aquí como la animación duración, el siguiente valor de tiempo como el retardo de animación. Entonces si agrego cinco segundos aquí, lo que sucederá es que el navegador esperará cinco segundos antes de que comience la animación. Y así, hemos combinado todas las propiedades en una sola propiedad. Y tenemos la misma animación que queríamos antes. 75. 79: texto flotado con animación: Hola a todos. En esta lección, vamos a aprender a crear este texto flotando de derecha a izquierda efecto. Se trata de una animación infinita o enlista. Y cuando lo miras, puedes ver que gira de izquierda a derecha, luego de derecha a izquierda, y así sucesivamente y así sucesivamente. Empezaremos aquí en nuestro HTML agregando un H1. Entonces dentro de ella, diré que viene, luego etiquetas BR. Y dentro de eso, pronto. Ahora vamos a nuestro CSS. Voy a apuntar a la H1. Agregar texto alinear centro para centrar el texto. Color. Blanco. Entonces font-family. Arial. Tamaño de fuente, 90 píxeles, altura de línea, 90 píxeles para ese espaciado de dos letras. Entonces sombra de texto. Estos valores. Y ya puedes ver ahora que H1 se ve exactamente como queremos. A continuación, queremos animarlo. Entonces iré aquí mismo y crearé una nueva animación. Diré en mark key frames. Y ahora lo nombraremos flotador. Entonces diré desde y dentro de ella, Transformar, Girar cinco grados para que el estado inicial del H1 se rote cinco grados en sentido horario. Entonces diré quetransformemos, roten menos cinco grados,para transformemos, roten menos cinco grados, que el estado final se rote cinco grados en sentido contrario a las agujas del reloj. Y ahora subamos aquí y sumamos esta animación a la H1. Por lo que voy a decir animación. A continuación, el nombre de la animación flotar, luego la duración de la animación, tres segundos, y la función de temporización de animación lineal. Entonces el recuento de iteración de animación, que es infinito. Por supuesto. Ahora, cuando recargo el navegador, puede ver que el H1 arranca cinco grados en sentido horario, luego se mueve hasta que gira a cinco grados en sentido contrario a las agujas del reloj, luego se parte de nuevo a su estado inicial. Pero eso no queremos. Queremos que pase del estado inicial al estado final. Y luego del estado final al estado inicial. Y seguir haciendo eso. Podemos solucionar eso no hay problema configurando la dirección de animación para alternar. Por lo que iré aquí mismo y añadiré dirección de animación alterna. Y ahora cuando vuelva a cargar el navegador, el H1 debería animar la forma en que queremos del estado inicial a un estado final. Estado final, dos estado inicial, y así sucesivamente. 76. 80: efecto de carga rotativo utilizando la animación css: Hola a todos. En esta lección, vamos a crear esta bonita animación de carga CSS usando fotogramas clave así como CSS Transforms. Entonces aquí en mi HTML, añadiré un div y le daré una clase de carga. Entonces iré a mi CSS. Aquí tenemos algunos estilos agregados al cuerpo que solo enviarán al div y agregarán un bonito color de fondo. Por lo que ahora apuntaré a nuestro div con la clase de carga. Entonces estableceré su ancho en 100 píxeles. Entonces es altura a 100 píxeles también. Entonces le añadiré color de fondo, blanco para que podamos verlo. Entonces radio de borde 12 pixels para darle unas bonitas esquinas redondeadas. Ahora, cuando vamos a echar un vistazo a una demo y lo hicimos más lento e hizo la iteración de animación contara solo una para que podamos ver claramente lo que está pasando. Entonces cuando recargo mi página, se puede ver que el div comienza desde su posición original, luego gira en su eje y en 180 grados. Y luego cuando está a 180 grados en el eje y, gira de nuevo en su eje x por otros 180 grados. Por lo que ahora tenemos tres etapas de la animación. El primer paso es 0%, y en este punto, el giro y y rotar x están en 0, lo que significa que el elemento se encuentra en su posición original sin ninguna rotación. Entonces la segunda etapa es del 50 por ciento, en la que el elemento se gira 180 grados a lo largo sólo del eje y y la rotación del eje x sigue siendo 0. Entonces la etapa final es del 100%, donde sumamos la rotación sobre el eje x por 180 grados. Para que en esta etapa, el elemento se rote tanto en su eje x como en su eje y en 180 grados. Entonces hagámoslo. Iré a mi CSS y crearé una nueva animación y la nombraré cargando, por ejemplo. Entonces dentro de ella, voy a sumar la primera etapa 0% y decir Transformar. Girar X 0 grados y girar y 0 grados allí también, para que la animación empiece desde su ubicación original. Entonces sumaré la segunda etapa de la animación al 50 por ciento. Y diré Transformar, Girar X 0 y girar y 180 grados. Por lo que al 50% de la duración de la animación, queremos que el div termine girado 180 grados a lo largo del eje y. Y luego en la etapa final, al 100% de la duración de la animación, añadiré Transformar, Girar X 180 grados, y rotar y 180 grados también. Y ahora subiré aquí y añadiré animación. Entonces nombre de la animación, que está cargando, luego duración de la animación, dos segundos, función de temporización de animación, lineal. Y por último, la iteración de animación cuenta, que es, así es, infinito. Y debido a que estamos utilizando las funciones de rotación x, rotación y, que funcionan en un entorno 3D, debemos definir una perspectiva. Por lo que subiré aquí al cuerpo y añadiré perspectiva a 100 píxeles. Y ahora cuando vuelva a cargar mi navegador, se puede ver el div. Empezaremos girando 180 grados en su eje Y, luego 180 grados en su eje x. Y tenemos el efecto que queríamos. 77. 81: dirigir un automóvil y una moto de motor utilizando la animación: Hola a todos. En esta lección, vamos a crear esta bonita animación infinita donde tenemos un auto y una moto a caballo por esta carretera. La idea detrás de este ejemplo es simple. Tenemos una imagen de fondo, que es este camino. Y tenemos dos imágenes. Una para el auto y la otra para la moto. El color y las imágenes de la moto no se mueven. Están fijos en su posición. El movimiento aquí viene de fondo. Por lo que estamos animando la posición de fondo para la esquina inferior izquierda de la imagen a la esquina inferior derecha. Entonces veamos cómo podemos crear esta animación. Iré aquí mismo en mi HTML y añadiré un div con una clase de fondo. Entonces iré a mi CSS, apuntaré al cuerpo y añadiré margen y relleno 0 para eso también. Entonces apuntaré al div con la clase de fondo y agregaré altura 100 vh, luego URL de fondo, y añadiremos la imagen de carretera. Entonces añadiré posición de fondo, abajo a la izquierda. Entonces este es el punto inicial de nuestra animación. Animaremos la posición de fondo desde la parte inferior izquierda hasta la tasa inferior para que podamos conseguir que se movilicen el efecto de fondo que queremos. Entonces hagámoslo. Iré aquí mismo y crearé una nueva animación y la llamaré conducción. Y dentro de ella. Recuerda, queremos animar la posición de fondo desde la parte inferior izquierda hasta la parte inferior derecha. Por lo que diré desde la posición de fondo, abajo a la izquierda a la posición de fondo abajo a la derecha. Genial. Ahora agreguemos esta animación a nuestro fondo. Subiré aquí y diré animación. Entonces el nombre de la animación, que está conduciendo, luego la duración de la animación, 15 segundos, luego lineal e infinito, por supuesto, porque queremos que la animación siga repitiéndose indefinidamente. Entonces ahora, cuando voy a mi navegador y lo recargo, se puede ver que la posición de fondo está cambiando desde abajo a la izquierda, la tasa inferior, y haciendo que el fondo se mueva agradable y suave. Y ahora sólo necesitamos sumar las imágenes de nuestro auto y motos. Por lo que volveré a mi HTML e iré dentro nuestro div y añadiré la primera imagen con la clase de auto. Entonces la segunda imagen abajo que con la clase de moto. Se puede ver que aquí tenemos las imágenes, pero se ven raras en este momento. Entonces vamos a agregarles algunos estilos. Nuestro ir a mi CSS y apuntar primero a la imagen del auto. Entonces añadiré posición absoluta para que podamos controlar la posición de la imagen. Entonces sumaré a la izquierda 300 pixels y al fondo menos 50 pixels. Entonces sumaré con 200 pixeles para hacer más pequeña la imagen del auto. Y ahora se puede ver que el auto se ve mucho mejor. Ahora, hagámosle lo mismo a la moto. Regresaré a mi CSS, copiaré esto, lo pegaré de nuevo, y apuntaré a la moto en este caso. Entonces cambiaré a la izquierda a 700 pixeles para que sea una cabeza del auto. Después de abajo a 55 píxeles. Por lo que será un poco más alto y nos dará esa agradable sensación 3D. Y por último, cambiaré el ancho a 150 píxeles. Y ahora cuando voy al navegador y recargo, puedes ver que tenemos exactamente la animación de conducción que queríamos. Y podemos controlarlo. Para que podamos hacerlo más rápido o más lento cambiando la duración de la animación. Regresaré a mi CSS y lo haré más rápido haciendo la duración de la animación diez segundos. Y ahora puedes ver que están conduciendo más rápido. Ahora. Antes de terminar la lección, solo quiero que sepas que obtuve la imagen de fondo de este lado, tres pic.com, que tiene toneladas de imágenes gratis que puedes usar. Y lo conseguí usando este enlace. Simplemente lo puedes encontrar en los Archivos de recursos. 78. 82: rotador de texto con animación: Hola a todos. En esta lección, aprenderemos cómo crear este rotador de texto usando CSS, animaciones, y fotogramas clave. Muy bien, Así que aquí en mi HTML, voy a añadir H uno. Y dentro de ella, voy a decir que me encanta CSS. Entonces añadiré un lapso vacío. Por lo que este lapso contendrá las diferentes palabras que cambiarán las cuales nuestra animación transición y transforma. Pero los vamos a agregar usando CSS. Ahora, vamos a nuestro CSS. Se puede ver aquí le he agregado algo de estilo al cuerpo con el fin de centrar el H1 horizontal y verticalmente. También he agregado este color de fondo al grado corporal. Ahora vamos a apuntar al H1 y añadir color. Blanco. Entonces tamaño de fuente 50 píxeles. Entonces me apuntaré al lapso. Y usaremos el pseudo elemento antes para agregar el contenido que queremos. Por lo que diré transiciones de contenido en primer lugar. Y aquí está. Entonces añadiré texto transformado mayúscula. Cuando font-familia, Arial. Y el color será este bonito color azul. Ahora, queremos cambiar la palabra transiciones. Podemos hacer esto no hay problema creando una nueva animación y nombrándolo conmutador de palabras. Por ejemplo. Cuando en 0%, estableceré el contenido en transiciones. Entonces al 50%, lo pondré en animaciones. Y ese 100%, lo pondré en transformaciones. Y ahora subamos aquí y añadamos animación. Interruptor de palabras. Cinco segundos, infinitos. Entonces ahora lo que sucederá es que este contenido cambiará de transiciones a animaciones, a transformaciones en un periodo de cinco segundos. Y eso seguirá para siempre porque ponemos el conteo de iteración de animación en infinito. 79. 83: patrón de imagen animado utilizando la animación: Hola a todos. En esta lección, aprenderemos cómo crear este patrón de fondo animado usando animaciones CSS, y fotogramas clave. Entonces hagámoslo. Aquí en mi HTML, añadiré un div y le daré una clase de banner. Entonces iré a mi CSS y apuntaré a ese div con la clase de banner. Y sumaré altura 100 vh, por lo que ocupa la altura completa del navegador. Entonces añadiré la imagen de fondo. Por lo que voy a decir URL de fondo, y voy a añadir nuestra imagen. Entonces añadiré la posición 00 de fondo para que la posición de la imagen sea la de arriba a la izquierda. Y cuando vemos eso en el navegador, se puede ver que tenemos nuestra imagen de patrón y se repite. Pero porque es un patrón y otras partes de la imagen se ven exactamente iguales. Lo estamos viendo como si estuviera ocupando todo el ancho y la altura. Pero eso no es cierto. En realidad, la imagen se repite vertical y horizontalmente. Por lo que en realidad estamos viendo muchas imágenes repetidas en este momento, ni una sola imagen. Ahora la idea detrás del patrón de fondo animado es animar el cambio en la posición de fondo de 0 a la izquierda y 0 en la parte superior a 0 a la izquierda. Y el número de píxeles igual a la altura de la imagen en la parte superior. Por lo que voy a ir a mi CSS y voy a crear una nueva animación y nombrarlo patrón animado. Y diré de la posición de fondo 00 a la posición de fondo 0 de la izquierda y 600 píxeles de la parte superior. Ahora he añadido 600 píxeles aquí mismo, porque la altura del patrón es de 600 píxeles. Por lo que si quieres que el patrón se mueva verticalmente, debes hacer que la posición de fondo se sitúe a 600 píxeles desde el grado superior. Ahora subiré aquí y diré animación, patrón animado. 15 segundos, lineales e infinitas, claro. Y ahora cuando voy a recargar mi navegador, puede ver que la imagen ahora se mueve verticalmente hasta que se mueve 600 píxeles, que es el final de una imagen y el comienzo de otra, luego mover otros 600 píxeles y así sucesivamente y así sucesivamente. Ahora, es realmente fácil hacer que el patrón se mueva horizontalmente. Por lo que iré a mi CSS y haré este 600 pixeles 0 para que no se mueva verticalmente. Entonces sumaré 800 píxeles de la izquierda. Y agregué un 100 pixeles porque es el ancho de mi imagen. Mi imagen es de 600 pixels por 800 pixels. Y ahora cuando voy al navegador y recargo, se puede ver que la imagen de fondo se está moviendo horizontalmente. Y por supuesto podemos hacer que se mueva horizontal y verticalmente al mismo tiempo volviendo a mi CSS y cambiando nuevamente el 0 a 600 píxeles. Y ahora se puede ver que el patrón se mueve horizontal y verticalmente. Al mismo tiempo. 80. 84: efecto para alternar con animación: Hola a todos. En esta lección vamos a crear este bonito efecto de agitación hover para nuestro botón. Y por supuesto, estaremos usando animación CSS para hacerlo. Por lo que antes de empezar, queríamos ver cómo funciona este efecto temblor. Aquí en esta demo, he hecho muy alta la duración de la animación para que podamos ver exactamente lo que está pasando. Entonces cuando paso el cursor sobre el enlace, se puede ver que gira un poco a la derecha, luego un poco a la izquierda, Cuando un poco a la derecha otra vez, y luego finalmente vuelve a su posición original. Por lo que esto debería ser muy fácil de hacer. Muy bien, Hagamos esto. Voy a ir a mi HTML y voy a añadir una etiqueta de ancla y sólo decir hover me. Entonces iré a mi CSS y añadiré algunos estilos. Añadiré un fondo gris oscuro al cuerpo. Entonces debajo de eso, apuntaré a la etiqueta de anclaje y agregaré decoración de texto. Ninguno. Entonces color, blanco. Familia de fuentes, Sans Serif. Tamaño de fuente 40 pixels. Borde, tres píxeles. Blanco sólido. Acolchado. 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Entonces sumaré transición o 0.3 segundos. Entonces cuando pase el cursor sobre el enlace, quiero que el color y el color del borde también cambien. Entonces copiaré esta línea de código, pegaré aquí, y cambiaré el color blanco a este color rojo. Entonces después de eso, también cambiaré el color en sí para leer en lugar de luz. Por lo que ahora cuando voy y paso el cursor sobre el enlace, se puede ver el color del borde y el cambio de color del texto. Ahora queremos crear el efecto temblor. Lo que voy a hacer es ir aquí mismo y crear una nueva animación. Y lo voy a nombrar, agitar. Y dentro de ella, diré al 33 por ciento de la duración de la animación, quiero que el enlace se rote 10 grados a la derecha. Y después de un 66 por ciento de la animación, quiero que se rote a la izquierda por 10 grados también. Por lo que usaremos menos 10 esta vez. Y el 100% de la duración de la animación. Yo quiero que se vuelva a girar a la derecha por 10 grados. Entonces lo que pasará aquí es que el botón se rotará a la derecha, luego a la izquierda, luego a la derecha, antes de que vuelva a su lugar original. Genial. Ahora agreguemos esta animación a nuestro botón sobre el flotador. Iremos aquí mismo y agregaremos animación. Después nombre de la animación, agitar y duración de la animación 0.3 segundos, luego lineal. Y, por último, la iteración de animación cuenta sólo una vez al flotar. Y ahora cuando voy y paso el cursor sobre el botón, se puede ver que el efecto temblor está sucediendo a la derecha, luego a la izquierda, luego a la derecha otra vez, y luego vuelve a su posición inicial. Y ese es exactamente el efecto que queremos. 81. 85: botón animado con animación: Hola a todos. En esta lección aprenderemos a crear este enlace. Entonces si echas un vistazo, puedes ver que tenemos un fondo rojo el cual tiene un ancho específico y ocupa toda la altura de nuestro enlace. Y este fondo está sesgado y se mueve de izquierda a derecha a través del enlace. Al pasar el cursor sobre el enlace, se puede ver que el fondo rojo ocupará todo el ancho. Y cuando nos alejamos, vuelve a moverse de izquierda a derecha. Entonces, ¿cómo podemos crear este efecto? Bueno, este es un 1 fácil. En primer lugar, utilizaremos el pseudo elemento antes para crear el fondo rojo. Y le daremos la altura completa de la longitud y un ancho específico, y digamos 120 píxeles. Entonces lo sesguaremos un poco usando la función de sesgo. Y le aplicaremos una animación para que siga moviéndose de izquierda a derecha infinitamente. Entonces cuando pasemos el cursor sobre el enlace, lo haremos para que elimine la función de sesgo, detenga la animación y haga que ocupe todo el ancho del enlace. Entonces hagámoslo realmente. Aquí en mi HTML. Empezaré por ir aquí mismo y añadir un enlace. Y dentro de ella, diré que me cierren. Entonces iré a mi CSS para agregar algunos estilos. Añadiré un fondo gris oscuro al cuerpo. Entonces debajo de eso, apuntaré a la etiqueta de anclaje y agregaré decoración de texto. Ninguno. Entonces color, blanco. Familia de fuentes. San serif. Tamaño de fuente 40 píxeles, borde, tres píxeles. Blanco sólido, relleno, 40 píxeles de arriba e abajo, y 80 píxeles de izquierda y derecha. Y por último, posición relativa. Ahora que el enlace se ve bien, necesitamos crear el fondo rojo usando el pseudo elemento antes. Por lo que voy a ir a mi CSS y decir un colon antes. Y voy a vaciar el contenido. Entonces haré el color de fondo rojo. Entonces diré top 0, izquierda 0 también. Entonces ancho. Digamos 120 píxeles y altura, 100% cuando la posición es absoluta. Y luego cuando lo miramos, se puede ver que tiene un fondo rojo, está ocupando toda la altura del enlace y tiene un ancho de 120 píxeles. Pero se puede ver que las letras están escondidas debajo de ella. Podemos solucionar esto fácilmente volviendo al pseudo elemento antes y agregando z-index min.1. Y ahora se puede ver que el texto está apareciendo frente a él. Bien. Ahora queremos sesgarla un poco. Por lo que volveré y añadiré Transformar sesgo. Y lo sesgaré por menos 15 grados. Y ahora puedes ver que está bien sesgado, como queremos. Bien. Ahora queremos crear la animación que hará que se mueva de izquierda a derecha. Entonces iré aquí mismo y crearé un nuevo nombre de animación, moviéndose, por ejemplo. Y dentro de ella, diré desde y quiero que el fondo rojo empiece desde fuera del enlace. Por lo que diré izquierda menos 120 píxeles, que es el ancho del fondo rojo. De esta manera, comenzará desde fuera del enlace. Para dejar clara esta idea, Vamos a intentar subir aquí y cambiar a la izquierda de 0 a menos 120 píxeles. puede ver que ahora se encuentra fuera del enlace desde la izquierda. Por lo que este será nuestro punto de partida. Y bueno. Ahora volvamos atrás y hagamos de nuevo este 0. Entonces completemos nuestra animación. Entonces voy a ir justo aquí y decir dos a la izquierda, 100%. Por lo que el movimiento de fondo rojo terminará en el 100% del ancho del enlace a la izquierda, lo que significa fuera del enlace desde el borde derecho. Genial. Ahora agreguemos esta animación al fondo rojo. Subiré aquí y añadiré animación. Entonces nombre de animación moviéndose. Y duración de animación 1.2 segundos, luego lineal, luego finalmente infinito. Y ahora se puede ver que el fondo rojo se mueve de izquierda a derecha a través del enlace. Entonces k, Ahora necesitamos ocultarlo fuera del enlace. Entonces iré aquí mismo en el selector de enlaces y añadiré desbordamiento oculto. Muy bien, Ahora al pasar el cursor sobre el enlace, queremos iniciar la animación, quitar el sesgo y hacer que el fondo rojo tome el ancho completo. Entonces iré aquí mismo. Y cuando pasamos el cursor sobre el enlace, quiero hacer algunos cambios sucedieron al pseudo elemento antes. Por lo que en primer lugar, voy a hacer el ancho y al 100%. Por lo que ocupa todo el ancho del enlace y luego Transformar Skew 0 grados para que vuelva a su forma original. Y por último, animación. Ninguno. Para iniciar la animación. Ahora queremos que estos cambios sucedan sin problemas. Por lo que subiré aquí en el pseudo elemento antes y añadiré transición todos los ceros, cinco segundos. Y ahora cuando voy a recargar, se puede ver el fondo rojo. Seguiremos moviéndonos de izquierda a derecha hasta que pase el cursor sobre el enlace y haga que se detenga. En este punto, ocupa todo el ancho. Y cuando me aleje y seguiremos moviéndonos de nuevo. 82. 86: texto de iluminación con animación: Hola a todos. En esta lección vamos a crear este bonito texto de iluminación usando animaciones CSS. Entonces esta es una animación infinita y el cambio que está sucediendo aquí, porque un cambio de color y sombra de texto. Entonces hagámoslo realmente. En primer lugar, empecemos agregando el marcado de nuestro HTML. Entonces iré aquí mismo dentro del cuerpo, y añadiré una lista desordenada. Y dentro de ella, voy a añadir un ítems de lista, y cada elemento de lista contendrá una letra. Bien, ahora vamos a nuestro CSS y añadamos algunos estilos. Añadiré un color de fondo gris oscuro al cuerpo. Entonces voy a apuntar a la UL. Y vamos a sumar margen 0, relleno 0 también. Y vamos a añadir display flex para que todos los elementos de la lista se muestren uno al lado del otro. Enfriar. Ahora agreguemos algunos estilos a las letras de la lista mismas. Por lo que apuntaré a la LI dentro de la UL. Y añadiré estilo lista y luego color. Y voy a añadir un color gris más claro cuando tamaño de fuente 18 pixels. Y por último, espaciado entre letras 15 píxeles para obtener algo de espacio entre las letras. Genial. Ahora vamos a crear la animación de iluminación. Iré aquí mismo y crearé una nueva animación y la nombraré iluminación. Y dentro de ella, diré al 0% de la duración de la animación, quiero que el color sea el color gris. Y quiero que la sombra de texto sea ninguna. Entonces nada va a cambiar. Entonces copiaré eso, lo pegaré de nuevo dos veces y solo cambiaré 0% a 90 por ciento. Entonces al 100% de la duración de la animación, cambiaré el color gris a este color amarillo. Y voy a añadir una sombra de texto aquí mismo. Ahora, antes de todo esto, en realidad probé muchos valores hasta que descubrí que me gusta este valor. Por lo que ahora queremos agregar esta animación a las letras. Por lo que subiré aquí dentro del selector de ítems de lista y añadiré animación. Entonces el nombre de la animación, la iluminación. Cuando la duración de la animación 1.4 segundos, lineal e infinito, por supuesto. Entonces lo que sucederá aquí es del 0% al 90 por ciento de los 1.4 segundos, que es la duración de la animación. Las letras no cambiarán. No les pasará nada. Pero del 90% al 100% de la duración de la animación, las letras serán amarillas y tendremos una sombra de texto. Hice que el cambio ocurriera durante un periodo muy corto de tiempo para darle una sensación de iluminación o una bombilla encendida y apagada rápidamente. Pero si el cambio ocurre lentamente, se verá como iluminación. Será muy suave y aburrido. Entonces vamos a ver eso en realidad. Se puede ver que el cambio está sucediendo rápidamente, dándonos el efecto de la iluminación. Pero si nos fijamos en nuestra demo, se puede ver que los cambios no están ocurriendo todos al mismo tiempo. La primera letra se ilumina primero, luego la segunda, y luego la tercera, y así sucesivamente y así sucesivamente. Podemos configurar eso simplemente usando la función de retardo de animación. Volveré a mi CSS y apuntaré al primer hijo de un ítems de lista. Y voy a decir UL LI nth niño uno. Entonces lo que esto hará es que apunte al primer ítem de lista en la UL, que es la primera letra. A continuación, añadiré retardo de animación 0 porque quiero que la primera letra se encienda de inmediato. Entonces copiaré todo eso. Pégalo de nuevo, apunte a la segunda letra esta vez y cambie el retardo de animación a 0.1 segundos. De esta forma, esperará 0.1 segundos antes de encenderse. Entonces lo haré por todas las letras. Y cada vez aumentaré el retardo de animación 0.1 segundos para que se iluminen uno tras otro. Bien. Ahora que he agregado todos los retrasos de animación, echemos un vistazo. Se puede ver la primera letra se ilumina primero, luego la segunda, y luego la tercera, y así sucesivamente, hasta la última letra cuando la animación vuelva a empezar, porque la hicimos infinita. 83. 87 – ritmo del corazón con animación: Hola a todos. En esta lección aprenderemos cómo crear este corazón en CSS y cómo hacerlo latir usando animación CSS. Esta será una lección interesante. Entonces veamos cómo podemos hacer eso. Muy bien, empezaré aquí en mi HTML agregando un div y dándole una clase de corazón. Entonces iré a mi CSS. Y empezaré agregando un color de fondo gris oscuro al cuerpo. Entonces después de eso, apuntaré a nuestro div con la clase de corazón. Y le voy a añadir algunos estilos. Empezaré sumando posición, relativa. Entonces ancho, 100 píxeles, altura 100 píxeles también. Color de fondo. Este color rojo, claro. Bien. Ahora puedes ver que esto es solo un div normal con un fondo rojo. Entonces sigamos trabajando. Iré aquí mismo y usaré tanto los pseudo elementos antes como el después para crear el corazón. Por lo que voy a empezar por el pseudo elemento antes justo aquí. Y yo solo haré que el contenido esté vacío. Entonces sumaré posición, absoluta, top 0, left 0 también, el ancho 100% y la altura 100%. Entonces le añadiré color de fondo. Y agreguemos el blanco por ahora. Bien. Ahora puedes ver que tenemos el pseudo elemento antes con un color de fondo blanco sentado encima de nuestro div con una clase de corazón. Entonces lo que tenemos que hacer ahora es que necesitamos hacer que el div blanco se moviera hacia la parte superior por la mitad de un apretado. Por lo que volveré a mi CSS. Y dentro del pseudo elemento antes, añadiré transformar traducir. ¿ Por qué? Menos 50%. Por lo que ahora se puede ver que el div blanco se mueve hacia la parte superior, una distancia igual a la mitad de un apretado. Genial. Ahora copiaré todo eso. Vuelve a pegarlo. Y me voy a cambiar de antes a después. Y voy a cambiar el fondo blanco a, digamos verde. Ahora en esta ocasión queremos mover el pseudo elemento después a la izquierda, no hacia la parte superior. Entonces voy a ir justo aquí y cambiar Traducir Y para traducir X. Ahora puedes ver que se mueve hacia la izquierda, una distancia igual a la mitad de su ancho. Bien. Ahora, iré aquí mismo en el div con la clase de corazón. Y voy a añadir transformar, girar, y lo voy a girar 45 grados. Por lo que ahora se puede ver que el div gira en 45 grados y tanto los pseudo elementos antes como después giran con él. Ahora creo que te estás diciendo a ti mismo, Hey, ya casi estamos ahí y eso es correcto. Todo lo que necesitamos hacer ahora para conseguir la forma del corazón es ir justo aquí al pseudo elemento antes y agregar el radio de frontera 50 por ciento. Entonces haré lo mismo para el después. Y ahora puedes ver que tenemos la forma del corazón que queremos. Volvamos atrás y cambiemos el color de fondo para que ambos lo lean también. De acuerdo, Ahora lo tenemos. A continuación, necesitamos trabajar en la animación para hacer latir este corazón. Aquí hay una demo lenta de nuestra animación para que podamos verla mejor. Voy a recargar la página. Y se puede ver que el corazón se queda quieto por un tiempo. Después se escala hacia arriba. Cuando escala un poco hacia abajo, luego escala de nuevo hacia arriba, luego escala hacia abajo hasta su tamaño original. Permanece quieta por un tiempo. Y luego repite el mismo proceso infinitamente. Entonces veamos cómo podemos crear eso. Iré a mi CSS, crearé una nueva animación y lo nombraré latido del corazón. Entonces al inicio de la animación, al 0%, sumaré transformada. Gira 45 grados para mantener el corazón girado. Después escala por uno porque queremos que empiece en su tamaño original. Entonces copiaré todo eso y lo pegaré de nuevo cinco veces. Y sumaré algunos intervalos por ciento. Por lo que sumaré 25 por ciento, 3050, 7100%. Bien. Por lo que al 25 por ciento, mantendré la balanza igual porque recuerda, el corazón se queda quieto un rato antes de que comience la animación. Entonces del 0% al 25 por ciento de la duración de la animación, quiero que el corazón se mantenga estático. Entonces al 30 por ciento de la duración de la animación, aumentaré la escala a 1.4 veces su tamaño original para que el corazón se vuelva realmente grande. Entonces al 50 por ciento, lo bajaré un poco. Por lo que haré un 1.2 y al 70 por ciento, lo escalaré nuevamente a 1.4. Entonces al 100%, quiero reducirlo a su tamaño original, por supuesto, así que lo dejaré así. Ahora, necesitamos agregar esta animación a nuestro div. Por lo que subiré aquí y añadiré animación. Latido cardíaco. Y la duración de la animación, más importante por un segundo, lineal e infinito, por supuesto. Y ahora se puede ver que nuestro corazón está latiendo. Si todavía por un tiempo, entonces se vuelve más grande, luego un poco más pequeño que más grande, luego vuelve a su tamaño original, y así sucesivamente y así sucesivamente. Y ese es exactamente el efecto que queremos. 84. 88: fondo de texto animado con animación: Hola a todos. En esta lección, estaremos creando este fondo de textos animados. Entonces la idea detrás de esto es que agregamos una imagen de fondo al texto y animamos la propiedad de posición de fondo de esa imagen. Suficientemente fácil, ¿verdad? Entonces veamos cómo podemos hacer eso. Empezaré aquí en mi HTML agregando una H, y solo diré animación CSS. Entonces iré a mi CSS y empezaré agregando un color de fondo azul al cuerpo. Entonces voy a apuntar a la H1. Agregar tamaño de fuente, 200 píxeles. Texto alinear centro para centrar el texto. Transformar texto mayúscula, fondo. Y añadiré nuestra imagen como fondo. Se puede ver que nuestra imagen ha sido agregada al encabezado, pero queremos que aparezca como fondo para el texto en sí. Podemos hacer eso usando una propiedad llamada Bad ground clip. Por lo que iré aquí mismo y agregaré texto de clip de fondo webkit. Esto hará que la imagen se convierta en el fondo del texto. Pero tenemos que hacer transparente el color del texto. Por lo que puedes ver el texto ahora tiene nuestra imagen como fondo. Y ahora queremos animar este fondo. Entonces iré aquí mismo y crearé una nueva animación y lo nombraré, digamos fondo de texto. Entonces dentro de ella, diré desde la posición de fondo 0 de la izquierda y 0 de la parte superior a la posición de fondo, 100% de la izquierda y 100% de la parte superior. Entonces subiré aquí y añadiré animación. Textos, fondo, 20 segundos, lineales e infinitas por supuesto. Y ahora se puede ver que el fondo está realmente animado de una posición a otra, dándonos infinitamente la animación que queremos. 85. 89: rematar bolas con animación: Hola a todos. En esta lección, vamos a crear esta animación de carga rebotante. Para que veas que tenemos cinco círculos y están rebotando al azar. Entonces veamos cómo podemos hacer eso. Empezaré por ir aquí en mi HTML, y añadiré una URL. Entonces añadiré cinco elementos de lista dentro de ella. Y estos elementos de lista serán los círculos o bolas rebotantes. Entonces iré a mi CSS para agregar algunos estilos. Empezaré aquí en el cuerpo agregando color de fondo, este color gris oscuro. Entonces voy a apuntar a la UL. Y voy a añadir margen 0, relleno 0, luego mostrar flex. Ahora vamos a segmentar los elementos de la lista dentro de la URL. Y ahora vamos a añadir estilo de lista. Ninguno. Ancho 30 píxeles, altura, 30 píxeles también. Y luego color de fondo, blanco. Después el margen 0 de arriba e abajo, y diez píxeles de izquierda y derecha, porque queremos algo de espacio entre los elementos de la lista. Entonces aquí nuestros elementos de lista sentados uno al lado del otro porque configuramos la propiedad display de la UL a flex. Sigamos adelante. Regresaré dentro del selector de ítems de lista y añadiré límite de radio 50 por ciento para que los ítems de lista sean círculos. Genial. Por lo que ahora necesitamos trabajar en nuestra animación. Si echamos un vistazo rápido a nuestra demo, se puede ver que los círculos se están moviendo de su posición original hacia arriba a una nueva posición. Después retrocede de nuevo hacia abajo a la posición original. Por lo que la animación contendrá tres etapas. En la primera etapa, los círculos estarán en su posición original sin movimiento. Entonces al 50% de la duración de la animación, los círculos se moverán hacia arriba por una distancia igual a, digamos, 150 píxeles. Entonces al final de la duración de la animación, volveremos a su posición original. Entonces veamos cómo podemos hacer eso. Iré aquí mismo y crearé una nueva animación. Entonces lo llamaré saltando. Y dentro de ella, voy a decir al 0% de la duración de la animación, voy a añadir transformar traducir Y 0. Después al 50% de la duración de la animación. Transformar, Traducir Y menos 150 píxeles, por lo que los círculos se moverán 150 píxeles hacia la parte superior. Entonces al 100%, Transformar, Traducir Y 0 de nuevo para hacerlos regresar a su posición original. Bien. Ahora subiré aquí dentro del selector de ítems de lista y añadiré animación. Después saltando. Después la duración de la animación, 0.8 segundos, luego lineal e infinita, claro. Por lo que ahora se puede ver que los círculos están saltando hacia arriba 150 píxeles al regresar a su posición inicial. Cu. Ahora necesitamos añadir un borde en la parte inferior de los círculos. Por lo que voy a ir dentro de la URL y voy a añadir borde, abajo. Diez píxeles, blanco sólido. Por lo que ahora puedes ver tenemos la frontera por debajo de los círculos. Genial. Ahora nos queda una cosa. Ahora los círculos están saltando juntos. Tenemos que cambiar eso. Queremos que parezca saltar al azar. Entonces lo que podemos hacer es agregar valores aleatorios de retardo de animación para cada círculo. Por lo que iré aquí mismo y apuntaré al primer elemento de lista. Entonces diré UL, LI y niño uno. Y dentro de ella, voy a añadir retardo de animación. Y añadiré cualquier valor aleatorio, digamos 0.45 segundos. Entonces copiaré todo esto. Pega de nuevo cuatro veces para que podamos apuntar a cada elemento de la lista de forma individual. Entonces cambiaré el número del niño aquí a dos, luego tres, luego 45. Y añadiré valores aleatorios para cada círculo. Entonces para el segundo círculo, sumaré, digamos, 0.6 segundos. Y para el tercer círculo, sumaré 0.3 segundos y saldré del cuarto círculo. Respuesta es, por lo que se moverá de inmediato. Y por último, sumaré 0.1 segundos al quinto círculo. Esos son sólo valores aleatorios que harán que los círculos se muevan aleatoriamente. Por lo que ahora volveré al navegador y recargaré. Y se puede ver que los círculos están rebotando hacia arriba y hacia abajo al azar, dándonos el efecto que lo queremos. Entonces esto es todo para esta lección, todos, y los veré en la próxima. 86. 90: efecto de lluvia con animación: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones, transiciones y transformaciones CSS . En esta lección, crearemos este efecto lluvioso usando animación CSS. Entonces empecemos. Empezaré aquí en mi HTML agregando un div y dándole una clase de lluvia. Entonces iré a mi CSS para darle estilo a ese div. Empezaré por apuntar al cuerpo. Entonces añadiré relleno, 0, margen 0 también. El URL de fondo. Y voy a añadir la imagen de fondo. Entonces voy a añadir repetición de fondo. No se repita. Y por último, tamaño de fondo. Cubrir. Bien. Por lo que ahora puedes ver nuestra imagen está puesta como fondo para el cuerpo. Sigamos adelante. Regresaré a mi CSS y apuntaré al div con la clase de lluvia. Entonces dentro de ella, agregaré altura 100% para que ocupe la altura completa del cuerpo. Entonces URL de fondo. Y voy a añadir la imagen de la lluvia. La lluvia que está cayendo es en realidad una imagen que puedes encontrar en los recursos para esta lección. Entonces ahora cuando voy al navegador y recargo, puedes ver que tenemos nuestro fondo y la imagen de lluvia se sienta sobre él. Ahora sólo necesitamos animar la imagen de la lluvia. Por lo que volveré a mi CSS y voy a crear una nueva animación y llamarla lluvia. Entonces al 0%, sumaré posición de fondo 0% desde la izquierda y 0% desde la parte superior. Entonces al 100%, sumaré posición de fondo 20 por ciento desde la izquierda y 100% desde un pueblo. Bien. Ahora necesitamos agregar la animación a la imagen de lluvia. Por lo que subiré aquí y añadiré animación. Lluvia, 0.3 segundos, lineal e infinita, claro. Y ahora cuando voy al navegador y recargo, puedes ver la posición de la imagen de lluvia está cambiando, dándonos ese efecto lluvioso que vas a por. 87. 91: efectos de cursor con animaciones CSS: Hola a todos y bienvenidos a esta nueva lección en el curso donde vamos a crear este bonito efecto hover en esos iconos Font Awesome. Entonces, cuando paso el cursor sobre cualquiera de esos, se puede ver un fondo azul oscuro se desvanece y un borde se desvanece también, y tiene una animación alrededor del fondo. Entonces vamos a crear eso juntos. Entonces aquí en mi HTML, puedes ver tengo un enlace para la biblioteca de iconos Font Awesome que me dará acceso a los iconos que usaremos en este ejemplo. Empezaré aquí agregando un UL, luego LI. Y dentro de ella, añadiré una etiqueta de icono y le daré una clase de corazón FAS y FAA. Entonces copiaré esto, lo pegaré de nuevo tres veces. Y cambiaré la clase de icono cada vez. Entonces diré martini de vidrio, globo y regalo. Por lo que ahora puedes ver tenemos nuestros cuatro iconos listados aquí. A continuación, vamos a nuestro CSS para agregar algunos estilos. Voy a apuntar a la UL y voy a añadir relleno, 0, margen 0 también, y display flex. Entonces apuntaré a la LI dentro de ella y agregaré lista-style-type. Ninguno. Ancho 120 píxeles, altura, 120 píxeles también. Y queremos algunos espacios entre los iconos. Por lo que vamos a sumar el margen 0 y 20 píxeles de izquierda y derecha. Entonces añadiré borde, dos píxeles, sólido. Y este color azul oscuro. Muy bien, ahora queremos hacer este radio fronterizo. Por lo que iré y agregaré radio de frontera 50 por ciento. Entonces añadiré transición 0, 0, 0.5 segundos, posición relativa. Y con el fin de centrar los iconos dentro de la LI, usaremos flexbox. Por lo que voy a añadir display, flex, alinear elementos centro, y justificar el contenido. Centro. Enfriar. Ahora agreguemos algunos estilos a los iconos. Yo los apuntaré y añadiré font-size. 48 píxeles para hacerlo más grande. Entonces colorea nuestro color azul oscuro y transición. Todos 0.5 segundos. Muy bien, Tenemos nuestros iconos mirando como queremos. Entonces ahora es el momento de trabajar sobre el fondo azul que se desvanece. Para crearlo, iré aquí mismo y diré UL LI antes. Y voy a añadir contenido vacío. Después posición absoluta, top 0, left, 0, ancho 100%, y altura 100%. Entonces color de fondo, el color azul oscuro. Y con el fin de que también sea un círculo, vamos a sumar el radio fronterizo 50 por ciento. Por lo que ahora puedes ver tenemos el fondo azul oscuro y está cubriendo el ícono. Sigamos adelante. Para que vuelva a aparecer el ícono, volveré aquí y añadiré z-index minos1, luego transitaré todos los 0.5 segundos. Y vamos a sumar opacidad 0. Ahora se puede ver que el fondo desapareció porque fijamos la opacidad en 0. Pero queremos que vuelva a aparecer cuando pasemos el rato. Por lo que volveré a mi CSS y al pasar el rato sobre el aliado, lo lograré. Por lo que hay algunos cambios en el pseudo elemento antes. Añadiré opacidad, una para que vuelva a aparecer. Y voy a añadir escala de transformación 0.8. Por lo que no tomará todo el ancho y la altura del aliado. Y así entonces nos dejará un espacio libre para que sumemos la frontera. Entonces ahora cuando voy y paso el cursor sobre los iconos, puedes ver el fondo aparece de nuevo, y no ocupa la misma cantidad de espacio que el elemento de la lista. Ocupa 80%, dejando algo de espacio libre a su alrededor. Pero los propios iconos no están apareciendo porque tienen el mismo color que el fondo. Entonces hagamos el cambio de color al rondar. Iré aquí mismo y diré UL LI en rondar. Haré algunos cambios sucedieron a los íconos. Añadiré color blanco. Muy bien, ahora vamos a crear el borde animado que aparece alrededor del fondo azul oscuro. Copiaré todo el pseudo elemento antes, lo pegaré, y cambiaré antes a después. Entonces le haré algunos cambios. En primer lugar, haré transparente el fondo porque no queremos ningún color de fondo. Entonces añadiré borde, dos píxeles discontinuados. Y este color azul más claro. Y por último, caja border-box. Entonces si cambiamos la opacidad a una, se puede ver que ahora el borde está apareciendo alrededor del borde de los ítems de la lista. Entonces volvamos a cambiarlo a 0 otra vez. Ahora, vamos a crear la animación para el borde. Iré aquí mismo y crearé una nueva animación. Nómbralo girando. Y al inicio de la animación, al 0%, añadiré escala de transformación 0.92, que encogerá un poco el pseudo elemento después y lo pondrá entre el borde de los ítems de lista y el fondo azul. Por lo que a continuación, voy a añadir girar 0 grados. Voy a copiar eso, pegarlo de nuevo, y al 100%, lo haré girar 360 grados. Está bien, eso está bien. Por último, aplicaremos esta animación al pseudo elemento after para cuando pasemos el cursor sobre el LI. Entonces hagámoslo. Diré LI en rondar después. Y sumaré opacidad uno al principio. Después animación, rotación, diez segundos, lineal e infinito. ¿Verdad? Ahora, cuando voy a pasar el rato sobre los iconos, se puede ver el fondo azul oscuro se desvanece. Entonces el color del icono cambia a blanco, y el borde discontinua comienza a girar. Y eso nos da un bonito efecto hover. 88. 92: carga de animación de texto: Hola a todos. Bienvenido a esta nueva lección en el curso donde vamos a crear esta bonita animación de carga. Se puede ver esta es una animación de aspecto agradable donde los colores de la carga de palabras están cambiando y el espaciado de letras y la opacidad también están cambiando. Entonces vamos a crearlo. Aquí en mi HTML. Empezaré sumando un UL. Entonces dentro de ella, añadiré un aliado y añadiré la primera letra L. Luego copiaré esto y lo pegaré seis veces y cambiaré la letra cada vez hasta que tengamos la palabra cargando. Entonces iré a mi CSS para agregarle algunos estilos. Voy a apuntar a la URL y vamos a restablecer el margen y el relleno para ella. Por lo que añadiré margen 0, relleno 0 también. Y queremos que las letras se muestren de lado a lado. Por lo que voy a añadir display flex. Ahora. Está bien, sigamos adelante. Voy a apuntar a los ítems de lista dentro de la URL, que representa las letras. Entonces añadiré lista-style-type, ninguno para deshacerme de estas balas. Después tamaño de fuente, 80 píxeles para hacer más grandes las letras, luego espaciado entre letras. 20 pixels. Ahí vamos. Aquí están nuestras letras sentadas lado a lado con 20 píxeles de espaciado entre cada una de ellas. A continuación, trabajaremos en nuestra animación. Iré aquí mismo y crearé una nueva animación. Nombralo cargando. Y hagámoslo simple al principio. Sólo cambiemos los colores de las letras. Por lo que al 0% de la duración de la animación, haremos el color rojo. Entonces al 100%, el color será azul. Por lo que esto nos dará un cambio gradual de color de rojo a azul. De acuerdo, sumemos la animación aquí arriba a las letras. Entonces animación, carga, tres segundos, lineal e infinito. De acuerdo, así que aquí se puede ver el color de las letras está cambiando de rojo a azul en un periodo de tres segundos. A continuación, cambiemos la posición de las letras. Yo quiero hacer la mudanza de derecha a izquierda. Por lo que voy a ir justo aquí y al 0%, voy a añadir transformar traducir X menos 50 pixels. Y al 100%, voy a añadir transformar traducir X 50 pixels. Por lo que las letras comenzarán a mover 50 píxeles de la izquierda de la posición original a 50 píxeles a la derecha. Justo así. Vale, Ahora, durante este movimiento, queremos cambiar el espaciado entre letras para que las letras se acerquen unas a otras y luego se repartan de nuevo. Por lo que al 0%, añadiré espaciado entre letras. 20 pixels. Entonces añadiré una nueva etapa de animación al 50% de la duración de la animación aquí mismo. Y dentro de ella, añadiré espaciado entre letras menos 20 píxeles. Entonces al 100%, volveré a añadir el espaciado entre letras 20 píxeles. Entonces lo que sucederá aquí es que durante el movimiento, las letras se acercarán las unas a las otras, entonces nos alejaremos otra vez, tal y como se puede ver aquí. Enfriar. Ahora, queda una cosa aquí. Cuando recarguemos la página, queremos que las letras se desvanezcan rápidamente, queden un rato, luego se desvanezcan. Podemos lograrlo controlando la opacidad. Por lo que iré aquí mismo en la duración de la animación y al 0%, añadiré opacidad 0. Entonces quiero que se desvanezca rápidamente. Por lo que crearé una nueva etapa al 10 por ciento, y sumaré una opacidad. Entonces ahora cuando voy a recargar, puedes ver que las letras se están desvaneciendo muy bien. Bien. Ahora queremos que se desvanezcan también. Por lo que iré a mi CSS y al 50 por ciento, añadiré opacidad uno también. Por lo que se mantendrán agudos, invisibles del 10 por ciento al 50%. Entonces al 100%, agregaré opacidad 0, por lo que se desvanecerán muy bien. Entonces ahora cuando recargo la página, puedes ver que se desvanecen, luego se desvanecen, dándonos el efecto de carga que estamos buscando. Genial. Ahora, queda una cosa. Queremos que todas las letras entreguen este efecto, pero una tras otra. Entonces la primera letra, luego la segunda, luego la tercera, y así sucesivamente. Lo que podemos hacer es que podemos usar la propiedad de retardo de animación en cada uno de ellos. Por lo que iré aquí mismo y añadiré UL LI nth niño uno. Esto apuntará a la primera letra. Y debido a que queremos que aparezca inmediatamente la primera letra, vamos a añadir retardo de animación 0 segundos. Entonces copiaré todo esto. Pégalo de nuevo seis veces. Y voy a cambiar uno aquí, 22. Y agrega retardo de animación, 0.2 segundos. Después 3.40 segundos, 4.60 segundos, 5.80 segundos, 61 segundos, y finalmente, 7.21 segundos. Entonces aquí estamos. Las letras están cambiando una tras otra, dándonos esta gran animación de carga de aspecto. 89. 93: impresionante pulso utilizando animaciones: Hola a todos. En esta lección del curso de animaciones CSS, vamos a crear este efecto de pulso. Puedes ver aquí tenemos un ícono de Font Awesome para un teléfono. Y tiene un fondo verde. Y hay dos fronteras que están pulsando. Se están haciendo más grandes y desapareciendo. Por lo que usaremos animaciones CSS, y las transformaciones para esta lección. Muy bien, Primero que nada, voy a empezar por ir justo aquí en mi HTML y añadir un div y darle una clase de pulso. Entonces dentro de ella, voy a añadir una etiqueta de icono. Dale una clase de teléfono FAS y FAS. Por lo que esto imprimirá el ícono del teléfono para nosotros. Y puedes ver aquí arriba que estoy usando un enlace CDN para la biblioteca Font Awesome que nos dará acceso a todos los iconos de Font Awesome. De acuerdo, entonces cuando vemos eso en el navegador, puedes ver que tenemos nuestro ícono sentado aquí mismo en el centro de la página, y tiene un color de negro por defecto. Entonces vayamos a nuestro CSS y añadamos algunos estilos. Voy a apuntar al div con la clase de pulso, que tiene nuestro icono dentro de él. Y sumaré ancho, 100 pixeles, altura 100 pixeles también. Color de fondo, este color verde, color blanco. Y para hacer una circular, vamos a sumar el radio fronterizo 50 por ciento. Muy bien, ahora entremos el icono dentro de él horizontal y verticalmente. Añadiré text-align, center, y line height, 100 pixels para centrarlo verticalmente. Entonces necesitamos hacer el ícono un poco más grande. Por lo que vamos a añadir tamaño de fuente 48 pixels. Y por último, vamos a sumar posición relativa. ¿ Verdad? Por lo que ahora tenemos el ícono mirando exactamente como queremos con este fondo circular verde. Y ahora queremos crear las fronteras a su alrededor que serán animadas. Entonces vamos a manejar eso. Iré aquí mismo y diré post colon antes. Y voy a añadir contenido. Posición vacía, absoluta, izquierda menos 20 pixels. Arriba menos 20 píxeles, velocidad menos 20 píxeles, e inferior menos 20 píxeles también. Entonces le agregaremos un borde a esto antes pseudo elemento. Entonces diré frontera, un píxel, sólido y nuestro color verde. Está bien, así que ahora puedes ver tenemos nuestra frontera alrededor del antes. Y el espacio justo aquí entre el borde y el div de pulso es igual a 20 píxeles. Y eso lo hará porque agregamos menos 20 píxeles aquí mismo a la izquierda, arriba, derecha, e inferior. Entonces si vamos y cambiamos estos píxeles menos de la izquierda a 0, se puede ver que el borde ahora está tocando el borde izquierdo del div de pulso. Hagamos esto menos 20 píxeles otra vez. Y queremos una frontera circular. Por lo que vamos a sumar el radio fronterizo 50 por ciento. Y ahora animaremos esta frontera para darnos el efecto de pulso que estamos tratando de hacer. Por lo que crearé una nueva animación y la nombraré pulsando. Y dentro de ella al 0% de la duración de la animación, voy a añadir transformación, escala 0.5 y opacidad 0. Entonces al 50 por ciento. Copiaré esto y cambiaré la escala a una y la opacidad a una también. Entonces al 100%, cambiaré la escala a 1.2, por lo que será más grande y la opacidad a 0, por lo que nos desvaneceremos. Entonces lo que sucederá aquí es que la frontera comenzará a la mitad de su tamaño y una opacidad de 0, luego se hará más grande hasta alcanzar su tamaño original y una opacidad de uno, entonces se volverá aún más grande y la opacidad será 0 de nuevo, lo que significa que se desvanecerá. Entonces, veamos si podemos hacer este efecto. En primer lugar. Añadamos la animación al borde. Subiré aquí y añadiré animación pulsando 1.5 segundos, lineal e infinito. Entonces ahora puedes ver que se está haciendo más grande, luego desaparece. De acuerdo, vamos a añadir otra frontera. Iré aquí mismo y añadiré coma. Entonces añadiré un pseudo elemento después al lado de ellos. Antes. Entonces queremos que inicien sus animaciones una tras otra. Por lo que iré rango aquí y apuntaré solo al pseudo elemento después. Y voy a añadir retardo de animación 0.5 segundos. Y ahora puedes ver que están empezando uno tras otro, dándonos el efecto que íbamos a por. 90. 94 - Salón deslizador de imágenes simple con animaciones css: Hola a todos. En esta lección, crearemos este sencillo deslizador de imagen usando animación CSS. La idea detrás de este deslizador de imagen es muy simple, así que veamos cómo podemos hacerlo. En primer lugar, comenzaré aquí en mi HTML agregando un div y dándole una clase de slider. Entonces iré a mi CSS y entraré dentro del selector de cuerpo y añadiré color de fondo. Este color gris oscuro. Entonces apuntaré al div con la clase de slider. Y añadiré ancho 800 píxeles, altura 400 píxeles, luego fondo, URL. Y voy a añadir la primera imagen. Ahora necesitamos crear nuestra animación, pero en lugar de que ustedes me vean escribirla, pausaré la grabación y la añadiré. Entonces voy a explicar cómo funciona. Así que aguanta. Bienvenido de nuevo. Para que veas creé la animación y le di el cambio de nombre BG. La idea detrás de este sencillo deslizador es que vamos a cambiar la imagen de fondo del slider div. Por lo que se puede ver que al 0%, el fondo será la primera imagen y se queda así hasta el 20% de la duración de la animación. Después del 20 por ciento al 25 por ciento, el fondo cambiará de la primera imagen a la segunda. Y la segunda se queda hasta el 45 por ciento de la duración de la animación, momento en que cambia a la tercera imagen, y así sucesivamente hasta que se visualicen todas las imágenes. Entonces agreguemos esta animación al div deslizador. Iré aquí mismo y añadiré animación. Entonces el nombre de la animación cambia BG, Entonces 10 segundos, lineal e infinito. Y ahora cuando voy al navegador y recargo la primera imagen para quedarme un rato, entonces aparece la segunda imagen y se queda un rato. Después el tercero y así sucesivamente, hasta que termine la animación. 91. 95: cambiar el color de fondo con animaciones CSS: Hola a todos. En esta lección, crearemos este color de fondo que cambia sin cesar. Como se puede ver, el color de fondo del cuerpo está cambiando suavemente. La idea detrás de este efecto es muy simple. Entonces, sumémonos y veamos cómo podemos hacerlo. En primer lugar, iré aquí en mi HTML y añadiré un H1. Y dentro de ella, voy a decir cambiado, luego etiqueta BR, luego color de fondo. Entonces iré a mi CSS para agregarle algunos estilos. Voy a apuntar a la H1. Entonces añadiré tamaño de fuente 70 pixels. Entonces quiero centrar el texto. Por lo que voy a agregar texto, alinear, centrar, luego transformar impuestos, capitalizar, y colorear blanco. Bien. Ahora, con el fin de crear este cambiante color de fondo, necesitaremos crear una nueva animación y crear tantos pasos como necesitemos. Y en cada paso cambiaremos el color de fondo. Entonces veamos realmente cómo podemos hacer eso. Iré aquí mismo y crearé una nueva animación. Y lo llamaré G, cambio. Entonces al 0%, le añadiré color de fondo, este bonito color. Entonces copiaré esto, lo pegaré de nuevo, y 20 por ciento. Voy a cambiar el color de fondo a otro color. Bien. Ahora, pausaré la grabación y añadiré los demás pasos. Y bienvenido de nuevo. Aquí, he agregado los otros pasos con nuevos colores de fondo y 40%, luego 60%, luego al 80 por ciento, y finalmente al 100%. Por lo que necesitamos agregar nuestra animación al cuerpo. Por lo que subiré aquí y añadiré animación. Entonces el nombre de animación BG cambia. Cuando la duración de la animación. Probemos diez segundos. Cuando la iteración de animación cuenta infinita, por supuesto, grado. Ahora echemos un vistazo a nuestra animación. Voy a recargar la página cuando debería comenzar la animación. Por lo que se puede ver que el color de fondo está cambiando suavemente de un color a otro, y así sucesivamente y así sucesivamente. Y va a seguir haciendo esto porque dijimos que el recuento de iteración de animación a infinito. Aquí una pequeña nota. Si miras de cerca aquí la animación que creamos, notarás que el color de fondo al inicio de la animación es el mismo al final de la misma. Y esto se debe a que cuando la animación termine su primer ciclo, volverá a empezar. Y el último color aquí mismo cambiaría al primer color. Entonces si no son del mismo color va a cambiar, no va a ser suave. Por ejemplo, cambiemos este último color a, digamos verde. Después ve a recargar. Entonces esperaremos hasta que termine la animación. Y aquí se puede ver que el cambio no está sucediendo de manera fluida. Entonces deberíamos cambiarlo de nuevo al primer color y todo estará bien. Entonces esto es todo para esta lección. Fue uno muy sencillo y puedes usar tantos colores como quieras. Entonces, por ejemplo, se puede cambiar el color cada 10 por ciento de la duración de la animación. Por lo que terminarías con 10 colores diferentes. Y también puedes controlar el tiempo que cada color permanece en la pantalla cambiando la duración de la animación. 92. 96: cuna de newton: Hola a todos. En esta lección, estaremos creando este efecto cuna Newton usando animaciones CSS. Creo que esta sería una lección interesante, así que veamos cómo podemos hacer que esto suceda. En primer lugar, voy a ir a mi HTML aquí mismo, y voy a añadir un div y darle una clase de cuna. Entonces dentro de eso, añadiré cinco tramos vacíos para que cada lapso sea como un brazo de la cuna. Entonces iré a mi CSS para que esto se vea como nuestra demo. Empezaremos por apuntar a todos los tramos dentro del div con la clase de cuna. Entonces diré lapso de cuna. Y continuaré estableciendo la propiedad display de estos tramos para bloquear para que se conviertan en elementos de bloque. De esa manera, podemos agregarles ancho y altura. Entonces sumaré ancho, tres píxeles. Y ese será el ancho de los brazos de la cuna, luego altura, 300 píxeles y color de fondo, blanco. Entonces ahora si voy y recargo mi navegador, puedes ver que tenemos todos los tramos y ellos se sientan uno por encima del otro. Debido a que configuramos la propiedad de visualización para bloquear, necesitamos alinearlas para que estén de lado a lado y no de arriba a abajo. Podemos hacerlo fácilmente usando a nuestro buen amigo, Flexbox. Entonces iré aquí mismo dentro de mi CSS y apuntaré a su contenedor, que tiene la clase de cuna. Y yo sólo diré display flex. Por lo que ahora puedes ver que todos se sientan uno al lado del otro. Pero necesitamos separarlos. Significa que necesitamos agregar un poco de espacio entre ellos. Por lo que iré dentro del selector de span y añadiré margen 0 de arriba e abajo y 30 píxeles de izquierda y derecha. Y ahora puedes ver que tienen algo de espaciado. Genial. Ahora vamos al selector de cuna y agregamos borde, top 10 pixels, blanco sólido. Y se puede ver que nos estamos acercando a lo que queremos. Ahora necesitamos trabajar en los círculos de la cuna. Los estaré creando usando el pseudo elemento antes. Por lo que volveré a apuntar a los tramos. Y diré antes. Entonces añadiré contenido, vacío, luego posición, absoluto. Y entonces vamos realmente arriba aquí para span selector y añadir posición relativa para que las bolas o círculos sean relativos a nuestros giros. Entonces bajaré aquí y añadiré abajo 0 porque queremos que estén en el fondo de nuestros tramos, claro. Después izquierda 0 también. Ancho 60 pixels, altura 60 pixels. Necesitamos que tengan el mismo ancho y altura para que sean cuadrados y, porque entonces fácilmente podemos hacerlos círculos simplemente agregando limitado-radio. 50 por ciento. Entonces por fin, voy a añadir color de fondo, blanco también. De acuerdo, así que ahora cuando voy al navegador y recargo, se puede ver que tenemos los pseudo elementos antes para cada lapso y se sientan en la parte inferior de su lapso, por supuesto, porque agregamos abajo 0. Pero ahora necesitamos que estén centrados en cada lapso. Entonces lo que podemos hacer es que los podemos desplazar a la izquierda para que haya centrado, igual que en nuestra demo. Entonces iré aquí mismo y agregaré transformada, traduciré x menos 50%, que se desplazen a la izquierda por la mitad de su ancho, que es de 30 píxeles, y se centren así. Pero puedes ver que hay un poco de espaciamiento entre los círculos que los hace parecer separados unos de otros. Entonces vamos aquí mismo dentro del selector de span y disminuimos este margen de 30 píxeles a 29 píxeles. Ahí vamos. Se están tocando entre sí y no hay espacio entre ellos. Genial. Ahora necesitamos trabajar en nuestra animación para que esta cuna realmente funcione. Entonces tengo una demo realmente lenta aquí mismo de la cuna que nos dejará ver lo que está pasando con claridad. Necesito que ignoren el brazo derecho aquí por ahora y sólo presten atención al brazo izquierdo aquí. Echa un vistazo a su movimiento. Voy a recargar el navegador. Y se puede ver que el primer brazo comienza desde su posición original y gira 60 grados en sentido horario, luego gira de nuevo a su posición original. Días por un tiempo hasta que regrese el segundo brazo y luego simplemente repite el proceso. Por lo que tendremos tres etapas para la animación del primer brazo. En la primera etapa, el brazo girará en el sentido de las agujas del reloj 60 grados, luego regresó a su posición original en la segunda etapa. Y luego en la etapa final, permanecerá quieto en su posición original hasta que el segundo brazo vaya y complete su rotación. Entonces vamos a crear realmente estas tres etapas. Iré aquí mismo y crearé una nueva animación. Nómbralo brazo izquierdo. Entonces dentro de ella, diré que al 0%, sumaré transformada, rotaré 0 grados. Después una transformación del 25 por ciento gira 60 grados para que el brazo gire 60 grados en el sentido de las agujas del reloj. Entonces al 50 por ciento, quiero que vuelva a su posición original. Por lo que diré Transformar, Girar 0 grados. Y quiero que se quede en esta posición hasta que el brazo derecho termine su rotación. Por lo que diré que al 100%, Transformar Girar 0 grados también. Por lo que del 50 por ciento al 100% de la duración de la animación, le diré al brazo izquierdo que tenga rotación 0, lo que significa que permanecerá en su posición. Enfriar. Ahora queremos agregar esta animación al brazo izquierdo, por lo que apuntaré al lapso. Después el primer hijo, que seleccionará el brazo izquierdo para nosotros, claro. Entonces dentro de ella, añadiré animación, brazo izquierdo y añadiré una duración de animación de dos segundos. Entonces facilidad en. E infinito. Entonces iré a recargar. Y se puede ver que el brazo izquierdo está girando, pero está girando en su punto central. Esto es completamente normal por supuesto, porque ese es el predeterminado, pero queremos que rote desde su punto superior justo aquí. Podemos manejar eso. No hay problema solo entrando aquí mismo dentro del selector de span y agregando origen de transformación. Y ahora se puede ver que el brazo izquierdo está girando de la manera que queremos. Gira 60 grados en el sentido de las agujas del reloj, luego regresa a su posición, se queda por un tiempo. Después repite nuevamente el proceso. Está bien. Ahora echemos un vistazo al brazo derecho. Volveremos a ir a nuestra demo lenta. Y esta vez quiero que vigiles el brazo derecho. Entonces cuando recargo, puede ver que el brazo derecho se queda en su posición y no se mueve hasta que el brazo izquierdo gire y regrese. Y una vez que regresa, el brazo derecho comienza a girar 60 grados en sentido contrario a las agujas del reloj. Eso significa que usaremos la propiedad de retardo de animación en el brazo derecho para hacerla esperar hasta que el brazo izquierdo complete su acción. Volvamos a recargar. Por lo que espera. Después comienza a girar, termina, y luego permanece quieto hasta que termine el brazo izquierdo, luego repite todo el proceso. Entonces vamos a crear esa animación. Iré aquí mismo y crearé una nueva animación. Nómbralo brazo derecho. Entonces lo haré, no puede ser todo eso. Pega de nuevo aquí y sólo cambia 60 grados a menos 60 grados. Entonces subiré aquí, copiaré esto, lo pegaré de nuevo, y cambiaré de primer hijo a último hijo. Entonces cambiaré el nombre de la animación a brazo derecho en lugar de izquierda en. Deja todo como está y agrega un retardo de animación de 1 segundo. Entonces lo que sucederá cuando vuelva a cargar es que el brazo izquierdo girará inmediatamente hacia la izquierda y tomará el 50 por ciento de la duración de la animación para rotar y regresar. En otras palabras, tomará 1 segundo. En tanto, el brazo derecho esperará este 1 segundo debido a que tiene un retraso de animación de 1 segundo. Y entonces comenzará a girar a la derecha, tomando la mitad de su duración de animación, también 1 segundo para completar su acción y regresar. Durante este tiempo. Este 1 segundo, que de nuevo es la mitad de esta duración de animación. El brazo izquierdo estará esperando y esta espera por medio movido su medio proceso continuará para siempre. 93. 97 - bonito efecto de carga con las animaciones CSS: Hola a todos, bienvenidos a esta nueva lección en el curso de animaciones CSS. En esta lección, vamos a crear esta bonita precargada. Se puede ver que tenemos cuatro plazas. Todos ellos se giran en 45 grados y tienen este efecto. Se están alejando el uno del otro, todos girando 90 grados como una sola unidad, luego volver juntos. Y esto pasará más. Y esta es una animación agradable y es fácil de hacer. Un resumen básico de lo que haremos es crear un div contenedor que guarde los cuatro cuadrados en su interior. Después cambiaremos los valores de posición para cada cuadrado para que la cubierta de Foursquare sea el div exterior y ocupe todo el espacio disponible. Entonces rotaremos el div externo, que rotará con él los cuatro cuadrados. Y después de eso, crearemos nuestra primera animación en la que cambiaremos la altura y el ancho del contenedor div, lo que hará que los cuatro cuadrados internos se alejen unos de otros y luego regresen el uno al otro. Y por último, crearemos nuestra segunda animación que rotará los propios cuatro cuadrados. Entonces veamos cómo podemos crear eso. A lo mejor sonó como mucho, pero te prometo que será muy fácil una vez que lo empecemos a hacerlo. En primer lugar, comenzaré aquí en mi HTML agregando nuestro div y dándole una clase de contenedor. Entonces añadiré cuatro tramos dentro de ella, y esos serán los cuatro cuadrados dentro del contenedor div. Después de eso, iré a mi CSS para agregar algunos estilos. Empezaré por apuntar al div con la clase de contenedor. Entonces dentro de eso, sumaré ancho 100 pixeles, altura 100 pixeles. Y vamos a añadir un color de fondo temporal de rojo. Y entonces finalmente sumaré posición relativa. Por lo que ahora se puede ver sólo tenemos un cuadrado rojo con el ancho y la altura de 100 píxeles. Al avanzar, ahora trabajaremos en los cuatro tramos dentro del contenedor div. Primero agreguemos algunos estilos generales a todos ellos. Apuntaré el lapso, y sumaré posición. Ancho absoluto, 50 pixels. Altura 50 pixels. Se puede ver que nada ha cambiado porque no agregamos ningún color de fondo. Por lo tanto, vamos a apuntar cada lapso individualmente. Para ello, iré aquí mismo y diré lapso en niño. Y yo apuntaré al primero. Entonces añadiré tabulador 0, izquierda 0 también. Por lo que el lapso estará en la esquina superior izquierda del contenedor. Entonces debajo de eso, agregaré un color de fondo. Este bonito color amarillo. Por lo que ahora se puede ver el primer cuadrado se sienta en la parte superior del contenedor rojo con el ancho y una altura de 50 píxeles, que es la mitad del ancho y la altura del contenedor. Y está en la esquina superior izquierda. Desde que dijimos izquierda y top a 0, haremos lo mismo para las tres de las otras plazas, y las posicionaremos de una manera que los hará completamente cubiertos el contenedor rojo. Por lo que posicionaremos al siguiente junto a este cuadrado amarillo, y los dos restantes se colocarán debajo de ellos. ¿ Verdad? Voy a volver a mi CSS para apuntar a la segunda plaza. Por lo que voy a decir span y child 2. Y sumaré top 0 y derecho 0. Entonces color de fondo, este color verde. Por lo que ahora puedes ver tenemos las plazas verdes sentadas junto a la amarilla. Ya que dijimos es propiedad correcta a 0. Impresionante. Ahora trabajemos en las otras dos plazas. Regresaré a mi CSS y copiaré este bloque de código. Pégalo de nuevo dos veces. Y yo apuntaré al tercer lapso y cambiaré aquí arriba, abajo. Esto lo colocará en el lado izquierdo del contenedor por debajo de la primera plaza. También cambiaré su color de fondo a este bonito color rojizo. Entonces apuntaré al cuarto lapso y cambiaré de arriba a abajo e de izquierda a derecha. Por lo que se colocará en la esquina inferior derecha del contenedor debajo del fondo verde. Entonces le añadiré color, este color azul. Está bien, así que ahora puedes ver tenemos las cuatro plazas y están cubriendo por completo el contenedor rojo. Ahora, empecemos a trabajar en animar el contenedor. Animaremos su ancho y altura para hacerlo más grande que más pequeño. Nuevamente, iré aquí mismo y crearé una nueva animación. Y lo voy a nombrar animar. Entonces dentro de ella, al 0% de la duración de la animación, diré ancho 100 píxeles y altura 100 píxeles también. Por lo que el contenedor comenzará en su tamaño original. Entonces copiaré eso, lo pegaré. Y al 10 por ciento de la duración de la animación, dejaré los valores del ancho y la altura tal como están, que es de 100 píxeles. De esta forma, desde el inicio de la animación hasta el 10 por ciento de la duración de la animación, el contenedor se mantendrá en su tamaño original antes de hacerse más grande. Entonces debajo de eso, volveré a pegar esto. Y al 50% de la duración de la animación, ahora haré más grande el contenedor cuadrado. Cambiaré el ancho a 150 píxeles en lugar de 100. Y luego la altura a 150 píxeles también. Después vuelve a pegar. Y al 90 por ciento, haré 100 pixeles el ancho y la altura. Entonces finalmente, al 100%, también dejaré el ancho y la altura como 100 píxeles. Entonces básicamente, el cambio en la ciencia ocurrirá del 10 por ciento al 90 por ciento de la duración de la animación. Se hará más grande, luego volverá a su tamaño original. Entonces agreguemos esta animación al contenedor rojo. Subiré aquí dentro del selector de contenedores. Y voy a añadir animación, animar 1 segundo, lineal, e infinito. Por lo que ahora cuando voy a recargar el navegador, puede ver que el contenedor rojo se hace más grande y separa los cuatro cuadrados internos uno del otro, luego volver a ser más pequeño y vuelve a su tamaño original. Genial, pero aún no terminamos. Queremos rotar el cuadrado rojo 45 grados. Por lo que volveré aquí mismo dentro del selector de contenedores, y añadiré transformación, rotaré 45 grados. Por lo que ahora se puede ver que el contenedor gira 45 grados y los cuatro cuadrados giran con él porque están dentro de él. Ya no necesitamos este fondo rojo. Por lo que volveré aquí y lo quitaré. Impresionante. Ahora sólo nos queda una cosa, que es rotar las casillas mientras se alejan unos de otros. Esto será fácil de hacer. Entonces vamos a crear la animación responsable de eso. Iré aquí mismo y crearé una nueva animación. Y lo voy a nombrar, rotar. Después copiaré todas las etapas de la primera animación y la pegaré dentro de la animación de rotación. Y al 0%, voy a quitar eso y Transformar Girar 0 grados. Entonces al 10 por ciento , volverá a ser 0 grados. Y al 50 por ciento, lo cambiaré a 90 grados para que cada cuadrado se rote 90 grados. Entonces al 9100%, lo dejaré rotado de nuevo 90 grados. No quiero que gire hacia atrás. Yo sólo quería quedarme rotado por 90 grados. Enfriar. Añadamos esta animación a nuestras plazas. Subiré aquí dentro del selector de span y añadiré animación. Girar. 1 segundo, lineal e infinito. Impresionante. Por lo que ahora se puede ver que los cuatro cuadrados giran 90 grados mientras están muy separados el uno del otro, luego retroceden el uno al otro, completando nuestro pequeño efecto fresco. 94. 98: movimiento de espacios con animaciones: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones CSS. En esta lección, aprenderemos a crear esta bonita precarga o animación. Se puede ver que teníamos tres casillas y se están moviendo como si se estuvieran persiguiendo. Yo quiero que le echen un vistazo de cerca a sólo uno de ellos. Y notarás que cada uno solo se mueve en un camino regular, realidad un camino de otra plaza. Y todos se mueven en el mismo camino. La única diferencia es que todos ellos tienen una propiedad de retardo de animación diferente. Por lo que se están moviendo uno tras otro, creando este efecto persiguiendo. Entonces, empecemos a crear eso. Empezaré aquí en mi HTML agregando un div y dándole una clase de cargador. Entonces dentro de eso, agregaremos tres tramos, y esos son los tres cuadrados que crean los precargados. Entonces iré a mi CSS. En primer lugar, apuntaré al contenedor div, que tiene una clase de Loader. Y sumaré ancho, 150 píxeles, altura 150 píxeles también. Posición relativa. Entonces debajo de eso, apuntaré a los tramos dentro de este contenedor div. Y sumaré posición. Ancho absoluto, 50 pixels. Altura 50 píxeles también. Fondo, blanco. Y finalmente radio de borde, cuatro píxeles. Por lo que ahora puedes ver tenemos un cuadrado con una altura y un ancho de 50 píxeles. Y esos son en realidad tres tramos que están sentados uno encima del otro. Ahora, trabajemos en crear nuestras animaciones. Iré a mi CSS y crearé una nueva animación y la nombraré Chase. Entonces dentro de ella al 0% de la duración de la animación, o al inicio, sumaré top 0, left 0. Por lo que esto significa las plazas. Empezaremos en la esquina superior izquierda de su contenedor. Entonces por debajo de eso, al 12.5% de la duración de la animación, sumaré el top 0 y la izquierda el 50%. Por lo que ahora los cuadrados se moverán a la derecha en un 50% del ancho del contenedor. Entonces por debajo de eso. Y al 25 por ciento, sumaré top 0 a la izquierda, 50 por ciento. Por lo que se puede ver que los valores no cambian de 12.5% de la duración de la animación a 25 por ciento. Y esto porque queremos que las plazas permanezcan en su lugar un rato antes de pasar a la siguiente posición. Esto solo hará que el efecto se vea más bonito. Ahora, pausaré el video y añadiré las otras etapas. Entonces voy a explicar lo que hice. Por lo que veinticinco por ciento de la duración de la animación, agregamos 37.5% y agregamos top 50 por ciento y dejamos 50 por ciento. Por lo que los cuadrados se moverán de la esquina superior derecha a la esquina inferior derecha, luego permanecerán un rato en ese lugar hasta que lleguemos al 50 por ciento de la duración de la animación. Y por debajo de eso, al 62.5% de la duración de la animación, cambiamos de izquierda a 0 nuevamente. Por lo que las plazas estarán en la esquina inferior izquierda del contenedor y permanecerán en esa posición al 75 por ciento. Después volverán a la esquina superior izquierda al 87.5% de la duración de la animación. Y quédate en ese lugar hasta que termine la animación. Y seguiremos haciendo eso para siempre. Entonces subamos aquí dentro del selector de span y agregamos esta animación. Iré aquí mismo y añadiré animación. Chase. Dos segundos, lineales e infinitas. Y ahora cuando voy al navegador y recargo, se pueden ver los cuadrados moverse y un camino cuadrado, y todos se mueven juntos. Por lo que están apareciendo como un cuadrado. Ahora, con el fin de que aparezcan como tres cuadrados separados, Podemos usar retardo de animación. Para hacer eso. Voy a apuntar a la segunda plaza yendo justo aquí y diciendo span nth child también. Y voy a añadir retardo de animación, 0.700 segundos. Entonces copiaré eso, lo pegaré de nuevo, y apuntaré al tercer cuadrado y agregaré retardo de animación 1.4 segundos. Y ahora cuando voy a mi CSS y recargo, se puede ver que las tres casillas comienzan a moverse una tras otra, dándonos exactamente el efecto de carga que íbamos a buscar. 95. 99: efecto revelado con animaciones CSS: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones CSS. En esta lección, vamos a crear este efecto de animación de textos precargados. Entonces puedes ver que tenemos un H1 aquí, y está algo encubierto por este texto amarillo encima. Entonces veamos cómo podemos hacer eso. Empezaré aquí en mi HTML agregando un H1. Y voy a decir simplemente cargando. Entonces iré a mi objetivo CSS, este. Y voy a añadir tamaño de fuente 40 pixels. Margen, 0, relleno, 0. Transformación de texto, mayúsculas, espaciado entre letras, diez píxeles, color, blanco. Y finalmente posición relativa. Por lo que ahora puedes ver tenemos nuestro H1 blanco y se ve bastante bien. Ahora, trabajemos en los textos amarillos que lo encubren. Usaremos el pseudo elemento antes para crear ese texto amarillo. Entonces iré aquí mismo y diré un colon antes. Y dentro de eso voy a añadir contenido cargando porque queremos la misma palabra. Por supuesto. Entonces posición absoluta, arriba, 0, izquierda 0 también. Ancho 100%. Y color. Este bonito color amarillo. Entonces ahora se puede ver que el H1 ahora es amarillo, y esto se debe a que ahora está cubierto por el texto amarillo, que es el pseudo elemento antes. Muy bien, Sigamos trabajando. Iré aquí mismo dentro del pseudo elemento antes y agregaré desbordamiento. Oculto. Entonces frontera, ¿verdad? Cuatro píxeles, sólidos. Y nuestro color amarillo. Enfriar. Por lo que ahora puedes ver el texto tiene un borde derecho que se moverá junto con él y llenará el texto blanco con el amarillo. Y ahora solo necesitamos trabajar en animar este texto amarillo. Iré de nuevo a mi CSS y crearé una nueva animación. Y lo nombraré animado. Entonces dentro de ella al 0% de la duración de la animación, sumaré ancho 0. Después sumar 50 por ciento. Haré el ancho al 100%. Y por último, al 100%, volveré a establecer el ancho a 0. Entonces lo que hará esta animación es que hará que las etiquetas amarillas comiencen con un ancho de 0, luego su ancho aumentará hasta que se convierta en 100% del texto blanco, que hará que lo encubra. Entonces su ancho será de nuevo 0, y se encogerá al final de la animación. Y esto seguirá sucediendo infinitamente porque por supuesto vamos a establecer el recuento de iteración de animación en infinito. Entonces agreguemos esta animación al fondo amarillo. Subiré aquí y añadiré animación. Animar. Cinco segundos, lineales e infinitas. Por lo que ahora se puede ver que el texto amarillo se está haciendo más grande y encubriendo el texto blanco. Entonces se encoge de nuevo. Y sigue haciendo eso infinitamente, dándonos esta bonita precargada. 96. 100 tiempo: cargar con animaciones CSS: Hola a todos. En esta lección, vamos a crear este bonito efecto cargador. Se puede ver que tenemos la palabra cargando dentro de este anillo que está girando alrededor de él. Entonces veamos cómo podemos crear eso. Empezaré aquí en mi HTML agregando un div, dándole una clase de contenedor. Por lo que esta clase contendrá el anillo y el texto. Entonces dentro de ella, añadiré otro div, le daré una clase de texto. Y escribiré cargando dentro de ese div. Entonces debajo de eso, añadiré otro div, le daré una clase de anillo. Y este será el anillo que gira alrededor del texto. Entonces iré a mi CSS para empezar a crear este efecto de carga. Empezaré primero apuntando al div con la clase de contenedor. Entonces dentro de ella, agregaré posición, ancho relativo, 200 píxeles, altura 200 píxeles también. Entonces ahora el contenedor div tiene un ancho y una altura de 200 píxeles, y está centrado horizontal y verticalmente dentro del navegador debido al código Flexbox aquí en el cuerpo. Muy bien, ahora voy a apuntar al div con la clase de anillo. Y pondré su ancho al 100% y es de altura al 100% también. Por lo que toma el mismo ancho y altura que su contenedor. Entonces le añadiré un fondo temporal a este div anillo. Por lo que voy a añadir color de fondo, rojo. Después de eso, voy a añadir frontera izquierda. Cuatro píxeles, sólidos. Este color gris oscuro. Por lo que ahora se puede ver el div anillo tiene un fondo rojo y un borde izquierdo gris oscuro. Hagamos de este anillo div un círculo. Por lo que volveré aquí y añadiré el radio fronterizo, el por ciento. Y ahora se puede ver que el div anillo es ahora un círculo que tiene un borde izquierdo. Y este borde izquierdo será el anillo que gira alrededor de la palabra cargando. Entonces ya no necesitamos este fondo rojo. Por eso volveré y eliminaré esta línea de código. Ahora, ¿verdad? Ahora puedes ver que tenemos esta frontera izquierda por sí misma. Y así es como creamos el anillo, es sólo un borde lateral de un círculo. Muy bien, Vamos a darle estilo a este texto para que se vea mejor. Voy a apuntar al div con la clase de texto. Y sumaré posición, absoluta, superior, 0, izquierda 0 también. Entonces ancho, 100%, altura 100%. Y con el fin de centrar el texto dentro de él horizontalmente, agregaré texto alinear centro. Entonces para centrarlo verticalmente, añadiré altura de línea, 200 píxeles. Y ahora la carga de palabras está centrada dentro del texto div. Sigamos trabajando. Volveremos aquí y añadiré tamaño de fuente, 22 píxeles, font-weight, negrita. Y por último, el texto se transforma en mayúsculas. Por lo que el texto ahora se ve exactamente como queremos. Nos queda una cosa por hacer, que es rotar el anillo aquí, claro. Entonces hagámoslo. Vuelve a mi CSS y crea una nueva animación. Entonces lo nombraré, rotaré. Entonces dentro de ella al 0% de la duración de la animación, añadiré transformada, giraré 0 grados. Entonces al 100%, agregaré transformada , giraré 360 grados. Por lo que el anillo hará una rotación completa durante la duración de la animación. Entonces subiré aquí dentro del div anillo para agregar esta animación, añadiré animación rotaré, luego duración de animación de 1 segundo, luego lineal. Y finalmente infinito, para que el anillo siga girando alrededor de sí mismo. Y ahora cuando regrese y vuelva a cargar, se puede ver que el borde izquierdo empieza a girar alrededor del texto y nos da el efecto de carga que queremos. 97. 101: efecto de carga de línea utilizando animaciones CSS: Hola a todos. Bienvenidos a esta nueva lección en el curso. En esta lección crearemos este bonito efecto de carga de línea. Y para ver lo que está pasando, bueno, veamos una demo más lenta de este efecto de carga. Voy a recargar la página y se pueden ver las escalas de línea o crece de izquierda a derecha. Después se encoge de izquierda a derecha también. Después vuelve a crecer de derecha a izquierda. Y por último, se encoge de derecha a izquierda también. Este será un efecto interesante, así que veamos cómo podemos crearlo. Iré aquí en mi HTML y añadiré un div. Entonces dale una clase de carga. Entonces iré a mi CSS, apuntaré a esa clase de carga. Y añadiré ancho, 300 píxeles, altura, tres píxeles, color de fondo, blanco. Entonces ahora puedes ver que tenemos nuestra línea aquí, y ahora es el momento de animarla. Volveré atrás y crearé una nueva animación. Denle línea. Y dentro de eso, al 0% de la duración de la animación, añadiré escala de transformación x 0. Por lo que la línea comenzará a crecer a partir de una escala de 0. Y queremos que empiece a crecer de izquierda a derecha. Eso significa que necesitamos cambiar su propiedad de origen transformado. Está centrado por defecto, así que lo haremos a la izquierda. Por lo que voy a añadir transformación origen izquierda. Entonces al 45 por ciento de la duración de la animación, añadiré escala de transformación x 1. Por lo que la línea estará a su ancho completo en el 45 por ciento de la duración de la animación. Se escalará de la nada a su ancho completo en esta duración, desde el inicio de la animación hasta el 45 por ciento de la duración de la animación. Por eso necesitamos mantener el origen transformado tal como está. Por lo que añadiré origen transformado a la izquierda también. Entonces al 50% de la duración de la animación, quiero mantener la escala tal como está. Por lo que voy a añadir escala de transformación x mañana. Entonces añadiré origen transformado. A la izquierda por ahora. Entonces, finalmente, al 100% de la duración de la animación, queremos que la línea se encoja de nuevo. Entonces agregaremos escala de transformación x 0, luego transformaremos origen. fue por ahora otra vez. De acuerdo, Subamos y sumamos esta animación a la línea. Añadiré línea de animación. Y ahora vamos al navegador y recarguemos. Se puede ver que la línea comienza a crecer de izquierda a derecha porque configuramos la propiedad de origen de transformación a izquierda, luego se contrae de derecha a izquierda. Por lo que también se encoge en su punto izquierdo. Porque al encogernos, también establecemos su propiedad de origen de transformación a izquierda. Por lo que se está encogiendo en base a su punto izquierdo de derecha a izquierda. Pero eso no queremos. Queremos que se encoja de izquierda a derecha o hacia su lado derecho. Entonces, ¿cómo podemos hacer eso? Bueno, una vez que esté a plena escala, solo podemos establecer su propiedad de origen de transformación para escribir para que cuando se encoja, se encoja en su punto correcto y nos dé el efecto que queremos. Entonces volveré aquí y ese 50 por ciento de la duración de la animación, cambiaré la propiedad de origen transformado de izquierda a derecha. Y haré lo mismo al 100%. Y ahora cuando regrese y vuelva a cargar, se puede ver que la línea se encogerá en su punto derecho esta vez o de izquierda a derecha. Y ese es el efecto que queremos aunque correcto. Ahora queremos que esta animación siga para siempre. Por lo que regresaremos aquí y agregaremos infinito. Y ahora cuando voy a recargar la página, se puede ver que la animación sigue y sigue y se repite para siempre. Pero hay un problema. Una vez terminado un ciclo de la animación, se corta y comienza de nuevo desde el principio a la izquierda. Pero queremos que se revierta después de terminar. Por lo que después de terminar, queremos volver del final al principio. Y podemos hacer eso yendo justo aquí al lado de la propiedad infinita y agregando alterna. Y si recuerdas, alterna es un valor de la propiedad de dirección de animación. Y simplemente le dice al navegador que haga que la animación comience desde su principio e vaya hasta su fin, y luego desde su fin hasta su principio, y así sucesivamente y así sucesivamente. Por lo que ahora cuando vuelva al navegador y vuelva a cargar, se puede ver que después de que termine la animación, se mueve en reversa. Y este es exactamente el efecto que estamos buscando. 98. 102: línea de crecimiento y animaciones CSS: Hola a todos, bienvenidos a esta nueva lección del curso de animaciones CSS. En esta lección, vamos a crear este bonito efecto de carga. Será una lección muy sencilla. Entonces, empecemos. Empezaremos aquí en mi HTML agregando un div y dándole una clase de carga. Entonces dentro de ella agregaré otro div, le daré una clase de OBJ. Entonces copiaré este div, lo pegaré de nuevo siete veces. Muy bien, vamos a nuestro CSS para crear el efecto de carga. Empezaré por apuntar al div con la clase de 0 j Entonces añadiré ancho seis píxeles, altura 40 píxeles, y fondo blanco. Entonces ahora puedes ver que los ocho divs están sentados uno debajo del otro porque son divs y los devs son elementos de bloque, lo que significa que se muestran uno debajo del otro por defecto. Pero queremos que se sientan uno al lado del otro. Podemos hacer eso fácilmente. No hay problema solo yendo justo aquí en mi CSS y apuntando a su contenedor, que es el div con la clase de carga. Y simplemente agregando flex de pantalla. Por lo que ahora puedes ver que los ocho divs están sentados uno al lado del otro en una fila, y cada uno de ellos tiene un ancho de seis píxeles y una altura de 40 píxeles. Pero queremos agregar algo de espacio entre ellos. Por lo que iré al selector OBJ y sumaré margen 0 de arriba e abajo y tres píxeles de izquierda y derecha. Por lo que ahora puedes ver que nos estamos acercando a nuestro cargador. Basta con hacer las esquinas un poco redondeadas. Por lo que voy a añadir borde radio 10 píxeles. Y aquí vamos. Tenemos el mismo cargador que queremos. De acuerdo, trabajemos en animar ese cargador. La idea detrás de esta animación es realmente fácil. Simplemente cambiaremos la función de escala y para cada uno de esos ocho divs. Haremos que empiece en 0, luego cambiaremos a uno, regresaremos a 0 otra vez. Y usaremos la propiedad de retardo de animación para hacer que ese cambio suceda. Y le pasará a los ocho divs, uno tras otro, dándonos el efecto que queremos. Por lo que voy a crear una nueva animación. Nombralo cargando. Entonces al 0% de la duración de la animación, añadiré escala de transformación y 0, y copiaré eso. Pégalo de nuevo y agrega 50 por ciento. Haré la escala y uno en lugar de 0. Y finalmente, al 100%, volveré a cambiar la escala a 0. Otra vez. Enfriar. Añadamos esta animación a los ocho divs. Subiré aquí dentro del div con la clase de 0 BJ y añadiré animación. Cargando. Entonces duración de animación de 0.8 segundos. Lineal e infinito. Impresionante. Entonces ahora puedes ver que los ocho divs se están haciendo más grandes, luego más pequeños, luego más grandes otra vez. Y seguirán haciendo esto indefinidamente. Ahora, para obtener el efecto que queremos, necesitamos usar la propiedad de retardo de animación en cada div. Entonces vamos a apuntar a cada div individualmente. Voy a ir justo aquí y decir, oh, BJ colon nth niño a, para apuntar al segundo div. Entonces dentro de ella, añadiré retardo de animación, 0.1 segundos. Entonces copiaré todo esto. Pégalo de nuevo seis veces. Entonces para el tercer div, añadiré retardo de animación 0.2 segundos. Después para los 4.3rd 0 segundos y para los 5.4th 0 segundos. Y por los 6.50 segundos, por los 7.6 0 segundos. Y finalmente por los 8.7 0 segundos. Y así, puedes ver que los divs están animados para mover uno tras otro, dándonos este efecto realmente bonito que queríamos. Y podemos obtener otro efecto cool agregando solo una línea de código. Iré dentro del div OBJ y añadiré fondo de origen de transformación. Y eso sólo hace que la escala de línea desde el punto inferior, no su punto central, lo que nos da otro efecto fresco que puedes usar en tus proyectos. 99. 103: cargar con animaciones CSS: Hola a todos. En esta lección vamos a crear este bonito efecto de carga usando animaciones CSS. Se puede ver que tenemos un pequeño círculo blanco en el centro. Después tenemos un anillo amarillo que gira a su alrededor. Después uno verde en el medio y otro rojo que los rodea. Y también se puede ver que los rojos y amarillos están girando en la misma dirección mientras que el verde está girando en dirección opuesta, crearemos estos anillos giratorios usando bordes. Entonces veamos cómo podemos crearlos. Iré aquí en mi HTML y añadiré un div, le daré una clase de Loader. Entonces dentro de eso, añadiré otro div, le daré una clase de exterior. Por lo que esta será la frontera roja que los rodea a todos. Entonces añadiré otro div y le daré una clase de media. Y esta será la frontera verde en el medio que gira en dirección opuesta. Después otro div con la clase de Enter para crear el anillo amarillo interior. Y por último, un div con la clase de datos para crear el punto blanco o un círculo en el centro. Entonces iré a mi CSS y div dirigido con la clase de cargador que contiene todas nuestras clases. Entonces añadiré ancho, 200 píxeles, altura 200 píxeles también. Entonces añadiré posición relativa. Entonces apuntaré al div con la clase de exterior y agregaré posición absoluta, que podamos posicionarlo en relación a su padre, el cargador div. Entonces queríamos tomar el mismo ancho y altura que su contenedor. Por lo que vamos a sumar top 0, left , 0, right 0, e bottom. Ya lo adivinaste 0 también. Por lo que esto solo hará que el div externo llene completamente el div cargador y ocupe su ancho y altura completos. Entonces con el fin de crear el borde rojo exterior, añadiré borde izquierdo, cinco píxeles sólidos. Este color rojo. Entonces copiaré eso, lo pegaré tres veces. Entonces cambiaré de izquierda a derecha y dejaré todo lo demás tal como está. Por lo que tendremos una frontera roja de tarifa también. Entonces apuntaré tanto a los bordes superior como inferior. Y hacer que sus colores sean transparentes, no rojos. Por lo que ahora puedes ver tenemos dos fronteras rojas, justo a la izquierda y a la derecha. Y no tenemos bordes superior e inferior porque ponemos el color a transparente para que no aparezcan. Muy bien, volvamos atrás y hacerlos bordes circulares. Iré aquí y le agregaré el radio fronterizo 50 por ciento. Y ahora se puede ver que las fronteras son una circular. Y hemos creado nuestras fronteras rojas exteriores. Para crear los bordes en el medio, solo copiaremos este div, pegado y div dirigido con la clase de media. Entonces solo cambiaremos los valores de arriba, abajo, izquierda y derecha a 30 píxeles en lugar de 0, que este div comience desde 30 píxeles desde el lado izquierdo del contenedor y termine en 30 píxeles desde el lado derecho del contenedor. Por lo que su ancho será de 200 píxeles menos 60 píxeles, que es de 140 píxeles. Y de esa manera será más pequeño. Y lo mismo sucederá con su altura. También será más pequeño que el contenedor div por 60 pixel. Por lo que ahora se puede ver que tenemos estas fronteras medias en el medio. Muy bien, vamos a crear también las fronteras interiores. Copiaré el div medio, lo pegaré, y apuntaré al interno. Entonces solo cambiaré las propiedades de posicionamiento a 60 píxeles en lugar de 30. Por lo que este div iniciará 60 píxeles desde su contenedor la izquierda y terminará en 60 píxeles a la derecha. Y lo mismo en la parte superior e inferior. Por lo que se puede ver que tenemos esto entrar frontera también. De acuerdo, ahora vamos a crear el pequeño círculo que se sienta en el centro de estas fronteras. Iré y apuntaré al div con la clase de punto. Entonces sumaré posición, absoluta. Top 90 pixels, izquierda. 90 pixels, tasa 90 pixels. Y fondo. Así es, 90 píxeles. Por lo que el círculo se colocará a 90 píxeles del contenedor div en todas las direcciones a su alrededor. Entonces le añadiré color de fondo, blanco. Y por último, para que sea un círculo, sumaré radio de frontera 50 por ciento. Por lo que ahora puedes ver tenemos el pequeño círculo blanco que se sienta en el centro del contenedor div. De acuerdo, ahora que hemos creado todos los elementos, empecemos a agregarles la animación. En primer lugar, iré aquí mismo y crearé una nueva animación. Nómbralo, rota. Entonces dentro de eso, al 0% de la duración de la animación, añadiré transformada, rotaré 0. Entonces al 100%, agregaré transformada , giraré 360 grados. Entonces añadiré esta animación a nuestras fronteras. Entonces iré primero dentro del div interno, luego añadiré animación, rotaré, luego duración de animación de 1 segundo, luego lineal e infinita. Entonces copiaré esta declaración de animación y la pegaré dentro de las otras dos dibs. Y ahora puedes ver que los tres divs están girando juntos en la misma dirección, dándonos este efecto. Pero si recuerdas, queremos que la frontera media gire en la dirección opuesta. Entonces lo que podemos hacer es ir justo aquí dentro del div medio y agregar reversa como una propiedad de dirección de animación. Por lo que la animación ocurrirá en la dirección opuesta. Y ahora se puede ver el div en el medio está girando en la dirección opuesta, dándonos este bonito efecto de carga. Y lo único que queda es cambiar los colores de los bordes medio e interior. Por lo que volveré dentro del div medio y cambiaré los colores del borde a un color verde en lugar de rojo. Y también haré lo mismo por las fronteras interiores. Cambiaré su color a amarillo en vez de rojo. Y ahora se puede ver que los bordes medio e interior tienen estos nuevos colores. Y este es el efecto exacto que queremos. 100. 104 4 – descansar cuadrados utilizando animaciones CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de carga usando animación CSS. Se puede ver que tenemos nueve cuadrados que se están desvaneciendo muy bien dándonos este efecto. Y se puede ver la primera columna de la izquierda se desvanece primero, después la segunda, luego la tercera. Tenemos algún pequeño retraso de animación entre cada columna. Entonces, empecemos a crear ese efecto. Iré aquí en mi HTML y agregaré un div, le daré una clase de cargador. Por lo que esta será la clase que contenga las nueve plazas dentro de ella. Entonces sumaré nueve tramos, y cada lapso tendrá una clase de S. Así que de S1 todo el camino a nueve. Por lo que tendremos S1, S2, S3, y estos nueve tramos son los responsables de crear R-cuadrados. Entonces iré a mi CSS y apuntaré al div con la clase de Loader. Entonces añadiré posición, ancho relativo, 90 píxeles, altura 90 píxeles también. Después muestra, flexiona, luego flexiona la columna de dirección para que los nueve divs se alinearán en columnas. Entonces flexiona, envuelve, envuelve que los cuadrados creen una segunda columna si no tienen suficiente espacio en la primera, luego debajo de eso, apuntaré a nuestros tramos. Entonces sumaré ancho 30 píxeles. Altura 30 píxeles también. Entonces le añadiré un fondo temporal rojo. Entonces, por último, posición relativa. Y ahora puedes ver que tenemos esta plaza y en realidad son nuestras nueve plazas. Pero como todos tienen el mismo color de fondo y están sentados tan juntos, aparecen como una plaza grande. ¿ Está bien? Ahora voy a apuntar al pseudo elemento antes de nuestros tramos. Entonces añadiré contenido. Cuerdas vacías. Posición, absoluta, superior, 0, izquierda, 0, ancho, 100%, y altura. Al 100% también. Entonces le añadiré color de fondo, blanco. Y ahora se puede ver el color de las cajas ahora es esperar, porque ahora tenemos nueve ante pseudo elementos y tienen el mismo ancho y altura que las cajas. Por eso están encubriendo la caja está completamente bien. Ahora, volveré y quitaré este fondo rojo porque ya no lo necesitamos. Entonces crearé la animación responsable de nuestro efecto. Por lo que voy a crear una nueva animación. Nombralo cargando. Entonces al 0% de la duración de la animación, sumaré ancho 100% y altura 100%. Entonces al final de la duración de la animación, al 100%, sumaré ancho 0 y altura 0. Entonces subiré aquí dentro de eso antes de un pseudo elemento y añadiré animación. Cargando 1 segundo, lineal e infinito. Y ahora se puede ver que las nueve cajas tienen este efecto donde su ancho y altura se convierte en 0 sobre una duración de animación de 1 segundo. Ahora, lo único que nos queda es agregar algún retraso de animación a la segunda, tercera columnas para darnos el efecto exacto que queremos. Por lo que volveré atrás y apuntaré a los pseudo elementos antes de los tramos mejor colocados en la segunda columna. Y esos son el lapso con la clase de S4. Después el lapso con la clase de S5 o el quinto lapso, luego el lapso con la clase de seis o el sexto lapso. Y dentro de eso, añadiré retardo de transición 0.1 segundos. Entonces copiaré eso. Vuelve a pegarlo. Entonces apuntaré a los pseudo elementos antes del lapso en la tercera columna, que son el lapso con la clase de siete. Entonces como 89. Entonces cambiaré el retardo de animación a 0.2 segundos. Y ahora se puede ver el efecto sucede para la primera columna primero, luego la segunda columna después de eso. Entonces la tercera columna dándonos esta bonita animación de carga. 101. 105: expandir líneas con la animación CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de carga. Se puede ver que tenemos las seis partes coloridas del cargador y tienen este efecto en el que se vuelven más grandes que, más pequeños, que más grandes, y así sucesivamente. Y esto está sucediendo uno tras otro. Entonces veamos cómo podemos crear eso. Iré aquí en mi HTML y añadiré un div. Dale una clase de Loader. Y dentro de ese div, voy a añadir seis tramos. Entonces iré a mi CSS y apuntaré al cargador div. Entonces sumaré ancho 70 píxeles. Y con el fin de mostrarlos lado a lado, voy a añadir display flex. Entonces apuntaré a los tramos dentro del cargador div. Y agrega ancho 10 píxeles. Altura, 60 píxeles, margen, 0 píxeles de arriba e abajo, y un píxel de izquierda y derecha. Entonces finalmente, color de fondo, blanco. Y ahora se puede ver que las seis bandas están sentadas lado lado y tienen un margen de un píxel entre cada una. Volvamos atrás y trabajemos en el efecto de animación. Iré aquí y crearé una nueva animación. Nombralo cargando. Entonces dentro de eso, al 0% de la duración de la animación, añadiré escala de transformación y 0.1. Por lo que los tramos comenzarán a animarse a 0.1 de su tamaño original. Entonces por debajo de eso, al 35 por ciento de la duración de la animación, voy a añadir escala de transformación y volver a una otra vez. Entonces al 60 por ciento y al 100%, añadiré escala de transformación y 0.1 también. Entonces lo que hará esta animación es que hará que nuestro span empiece a animar a 0.1 de su tamaño original. Después se harán más grandes hasta que vuelvan a alcanzar su tamaño original. Entonces del 35 por ciento al 60 por ciento, volverán a encogerse a 0.1 de su tamaño. Y se mantendrán así por un rato del 60 por ciento al 100% de la duración de la animación, luego volverán al tamaño original, y así sucesivamente y así sucesivamente. Seguiremos animando infinitamente. De acuerdo, vamos a añadir esta animación a nuestros tramos y vamos a ir aquí a añadir animación. Cargando. 0.8 segundos. Facilidad de entrada, salida. Y finalmente infinito. Y ahora se puede ver que los tramos tuvieron este efecto de animación donde comienzan a un tamaño pequeño, luego se vuelven más grandes, luego se vuelven más pequeños y se quedan ahí un poco, y luego se vuelven más grandes y así sucesivamente. Ahora tenemos que cambiar el fondo de cada span y también vamos a añadir algunos retardos de animación diferentes a cada tramo para que aparezcan uno tras otro. Por lo que voy a ir aquí y decir expandir nth-child uno para apuntar al primer lapso. Entonces dentro de eso, le añadiré color de fondo. Este color verde, y retardo de animación, 0.2 segundos. Ahora, pausaré el video y dirigiré a todos los demás tramos y añadiré diferentes colores de fondo y retardos de animación a cada tramo. Ya puedes ver he añadido diferentes fondos y retrasos de animación. Y cuando voy y recargo el navegador, puedes ver que los tramos ahora tienen diferentes colores y están animando uno tras otro, dándonos este efecto realmente genial. 102. 106: cajas de fondo: Hola a todos. Bienvenidos a esta nueva lección en el curso. En esta lección, aprenderemos a crear este fondo animado. Para que veas aquí tenemos un texto que dice animación de fondo. Y al fondo tenemos muchas cajas. Y si miras alguna de estas cajas, puedes ver que se mueve desde la parte inferior de la pantalla, eso sale de abajo. Y luego se mueve hacia arriba mientras gira. Y su opacidad disminuye hasta llegar a la parte superior de la pantalla. Y más allá. Entonces, la opacidad se convierte en 0 y se desvanece. Muy bien, empecemos aquí en nuestro HTML y agreguemos un div. Dale una clase de contenedor. Entonces dentro de ese div, añadiremos otro div y le daremos una clase de cuadrado. Por lo que usaremos este div cuadrado para crear nuestras cajas. Pero hay muchas cajas. Entonces copiaremos este div cuadrado y lo pegaremos un número de veces igual al número de cajas que tenemos. Por lo que ahora tenemos 10 divs con la clase de cuadrado que representará las 10 cajas móviles en el fondo. Entonces debajo de eso, agregaré otro div, le daré una clase de texto. Y dentro de ella voy a añadir la palabra animación de fondo. Muy bien, pasemos a nuestro CSS para agregar nuestros estilos. Empezaré con el contenedor div que contiene todos los divs. Por lo que lo apuntaré. Entonces agregaré posición, ancho relativo, 100%, altura, 100% también. Por lo que ocupará todo el ancho y la altura del cuerpo o toda la pantalla. Entonces añadiré desbordamiento oculto. Ahora vamos a darle estilo al texto que tenemos. Por lo que apuntaré al div con el texto de la clase. Entonces queremos centrarlo horizontal y verticalmente. Por lo que vamos a sumar posición, absoluta, top, 50 por ciento, izquierda, 50%. Después transformar, traducir, negativo 50 por ciento y negativo 50 por ciento. Por lo que ahora se puede ver que el texto está centrado horizontal y verticalmente dentro del contenedor div. Y como el contenedor div tiene todo el ancho y la altura del cuerpo, el texto se centra horizontal y verticalmente dentro del cuerpo. Volvamos atrás y hagamos que este texto se vea un poco mejor. Iré aquí y le añadiré color, texto blanco transformado. mayúscula, tamaño de fuente 45 pixels. Entonces bordean los cinco píxeles superiores, blanco sólido. Y borde inferior 50 pixels, blanco sólido también. Por lo que ahora el texto se ve mucho mejor y estamos listos para crear la animación de las cajas o de las plazas. Recuerda, hay 10 plazas, por lo que vamos a sumar todos los estilos que tienen en común primero. Y luego después de eso, vamos a apuntar a cada uno de los 10 individualmente y añadir sus estilos únicos. Entonces vamos a agregar primero los estilos comunes, voy a apuntar al div con la clase de cuadrado. Y sumaré posición absoluta. Entonces con el fin de posicionarlos debajo de la parte inferior del contenedor div, que tiene la misma altura del cuerpo. Eso significa que se moverán por debajo del cuerpo o por debajo de la pantalla. Sumaré fondo, negativo 100 pixels. Entonces le añadiré color de fondo. Este color gris claro. Muy bien, estos son los estilos comunes que tienen todas las cajas. Todos ellos se encuentran debajo de la parte inferior de la pantalla. Y todos ellos tienen el mismo color de fondo. Pero si voy al navegador y recargo, se puede ver nada aparece en la pantalla porque no he establecido ningún ancho ni altura para estos cuadrados. E incluso si vuelvo al editor de códigos y llego aquí dentro del selector de contenedores, entonces elimine esta propiedad oculta de desbordamiento. Después vuelve al navegador y vuelve a cargar. Tampoco se puede ver nada aparece. Por lo que no se esconden debajo de la parte inferior de la pantalla debido a su propiedad de fondo o algo así. Basta con establecer su ancho y su altura para que aparezcan. Y lo haremos por cada cuadrado forma individual porque tienen diferentes anchuras y alturas. Entonces hagámoslo con la primera plaza. Iré aquí y apuntaré a la primera plaza agregando cuadrada nth niño uno. Entonces dentro de eso, estableceré su ancho a 75 píxeles, luego su altura a 75 píxeles también porque es un cuadrado obviamente. Entonces, finalmente, pondré su propiedad izquierda en 7%. Entonces ahora, cuando me desplace hacia abajo, se puede ver que tenemos nuestra primera plaza apareciendo aquí debajo del cuerpo. Y está apareciendo porque le pusimos un ancho y una altura. Y también está sentado a la izquierda porque dijimos que es propiedad izquierda al 7% Muy bien, No queremos que aparezca cuando nos desplazamos. Por lo que volveremos dentro del contenedor div. Y vamos a añadir desbordamiento oculto otra vez. Y ahora ya no es visible, pero sigue ahí ahora. Está bien, trabajemos en animar esta caja. Te acuerdas que las cajas se movieron de abajo a arriba de la pantalla mientras giraban y se desvanecían al mismo tiempo. Entonces crearemos una animación que hará eso. Por lo que crearé aquí una nueva animación. Nombralo casillas. Entonces dentro de ella al 0% de la duración de la animación, o al principio de la misma, vamos a sumar abajo negativo 100 píxeles tal como está. Por lo que partirá desde una posición por debajo de la parte inferior de la pantalla. Entonces al 100% de la duración de la animación, modificaré la propiedad inferior al 100%. Por lo que esto hará que la caja se mueva desde la parte inferior de la pantalla hasta la parte superior. También necesitaremos rotar las cajas y hacer que disminuya su opacidad. Entonces hagámoslo. Añadiré transformación, rotaré 180 grados, luego opacidad 0. Por lo que al final de la duración de la animación, las casillas se girarán 180 grados y su opacidad será 0. Muy bien, agreguemos esta animación a nuestras cajas. Subiré aquí dentro del div con la clase de plaza. Y voy a añadir cajas de animación. Entonces duración de animación de diez segundos. Entonces queremos que la animación siga para siempre. Por lo que vamos a sumar infinito. Y por último, facilidad para entrar, salir. Y ahora cuando voy al navegador y recargo, se puede ver que la caja comienza a moverse desde debajo de la parte inferior de esta pantalla hacia arriba mientras gira. Y su opacidad está disminuyendo hasta que va a la cima y desaparece. Después vuelve a su posición original debajo de la pantalla. Y la animación ocurre una y otra vez porque la hicimos infinita. De acuerdo, entonces ahora hemos creado animación y lo único que queda para terminar esta lección es crear las otras nueve cajas. Por lo que estableceremos diferentes anchuras y alturas para todos ellos. También cambiaremos la propiedad izquierda para ellos para que se sientan uno al lado del otro. Y por último, les vamos a sumar algunos retrasos de animación diferentes para que todos comiencen a moverse en un momento diferente. Y con eso, obtendremos nuestro efecto. Por lo que pausaré el video y añadiré estos diferentes estilos para las otras nueve cajas. Y volveremos de nuevo. Muy bien, ahora he añadido todos los estilos. Por ejemplo, se puede ver en el segundo cuadrado, se establece el ancho y la altura en 65. También fijamos la propiedad izquierda en 15% para que se sienta junto a la primera plaza. Y por último, agregamos un retardo de animación de cuatro segundos, por lo que no comenzará a moverse hasta cuatro segundos después de la recarga de la página. Yo sí agregué diferentes valores para el resto de las cajas así que te dejaré echar un vistazo al ver las fuentes de esta lección. De acuerdo, ahora volveré atrás y recargaré el navegador, y luego las cajas comenzarán a moverse de abajo a arriba en diferentes momentos mientras giran y se desvanecen. Y eso nos da el efecto que queremos. 103. 107: animación de cargadores hexagon: Hola a todos, bienvenidos a esta nueva lección del curso de animación CSS. En esta lección, vamos a crear esta bonita animación de carga hexagonal deslizante. Se puede ver que consta de dos partes, una línea horizontal y la forma hexagonal por encima de ella. La línea está girando de ida y vuelta en su punto central, mientras que el hexágono se mueve de un lado a otro, ida y vuelta también. Y también está girando en su punto central al mismo tiempo. Este será un ejemplo interesante. Entonces veamos cómo podemos hacer eso. Empezaré aquí en mi HTML agregando un div y dándole una clase de línea. Entonces dentro de ella, añadiré otro div y le daré una clase de hexágono. Muy bien, entonces iré a mi CSS para darle estilo a esos divs. Voy a apuntar al div con la clase de línea. Entonces agregaré ancho, 300 píxeles, borde inferior, cuatro píxeles, blanco sólido. Por lo que esta será la línea en la que se mueve el hexágono. Entonces sumaré posición relativa. De acuerdo, Ahora aprenderemos a crear la forma hexagonal. En primer lugar, apuntaré al div con la clase de hexágono. Entonces agregaré posición, absoluta, izquierda, 0, fondo, 0, ancho 50 pixels, altura 30 pixels. Y por último, color de fondo, rojo. Por lo que ahora puedes ver solo tenemos un rectángulo que tiene un ancho de 50 píxeles y una altura de 30 píxeles y un color de fondo rojo. Por lo que la idea detrás de la forma hexagonal es que vamos a crear otros dos rectángulos como este, y vamos a girar uno de ellos 60 grados y el otro por negativo 60 grados. Y esto nos dará la forma hexagonal que buscamos. Entonces, en realidad creemos eso. Para crear los otros dos rectángulos, utilizaremos los pseudo elementos antes y después. Por lo que apuntaré al div con la clase de hexágono y añadiré colon antes. Y voy a añadir contenido cadenas vacías porque no queremos agregar nada aquí. Entonces posición absoluta, top 0, izquierda, 0. Queremos que tenga el mismo ancho y altura que el rectángulo rojo. Por lo que agregaremos ancho, 100%, altura, 100% también. Entonces agregaremos color de fondo, azul por ahora. Está bien, así que ahora puedes ver tenemos el rectángulo azul sentado encima del rojo. Y lo está cubriendo porque tiene la misma altura y anchura que el rectángulo rojo. De acuerdo, ahora vamos a agregar rotación de transformación. Por lo que ahora se puede ver el rectángulo azul ahora está girado 60 grados y el rojo ahora aparece detrás de él. Sigamos trabajando. Copiaremos el pseudo elemento antes, lo pegaremos de nuevo, y cambiaremos antes a, después. Después cambia el color de fondo a verde. Y lo rotaremos en negativo 60 grados, no 60. Y aquí puedes ver tenemos el fondo verde sentado encima del rojo y azul y girarlo en 60 grados negativos. Y esos tres rectángulos están creando la forma hexagonal. Entonces si vuelvo atrás y cambio el color de fondo para todos ellos a blanco, entonces recarga mi navegador. Se puede ver claramente que la forma hexagonal está sentada en la parte superior de la línea, pero necesitamos moverla un poco hacia la parte superior. Entonces volveré al selector de hexágono, y cambiaré de fondo a 14 píxeles en lugar de 0. Y ahora el hexágono en sentarse adecuadamente justo encima de la línea. Ahora bien, ¿verdad? Después de crear la forma hexagonal, ahora necesitamos trabajar en la animación. Si nos fijamos en nuestra demo, quiero que se concentren en la animación hexagonal. Se puede ver que aquí suceden dos cosas. En primer lugar, el hexágono se mueve de izquierda a derecha, luego vuelve de nuevo, y seguirá haciéndolo infinitamente. Y mientras se mueve de izquierda a derecha, se puede ver que el hexágono está girando en su punto central. Y si echamos un vistazo a la línea misma, se puede ver que también está girando alrededor de 30 grados de ida y vuelta junto con el movimiento del hexágono. Entonces volvamos atrás y creemos esas animaciones. En primer lugar, crearemos la animación para el hexágono. Voy a crear una nueva animación. Nómbralo animar hexágono. Entonces al 0% de la duración de la animación, sumaré izquierda 0. Entonces al 50 por ciento, sumaré izquierda 100%. Y finalmente, al 100%, sumaré izquierda. 0 otra vez. Entonces lo que hará esta animación es que hará que el hexágono se mueva de su posición original de izquierda a derecha en un 100% del ancho del contenedor, que es de 300 píxeles, luego volverá de nuevo a su posición original. Entonces agreguemos esta animación al hexágono. Subiré aquí dentro del div hexágono, y añadiré animación. Animar hexágono. Dos segundos, lineales. Y porque queremos que el movimiento suceda indefinidamente, diremos infinito. Por lo que ahora se puede ver que el hexágono se mueve de izquierda a derecha, luego vuelve de nuevo y así sucesivamente. Pero si echamos un vistazo más de cerca a este movimiento, puede ver que cuando el hexágono llega al final de la línea, va un poco más allá por un espacio igual a su ancho. Y esto se debe a que fijamos la tarifa izquierda al 100% aquí. Para evitar eso, debemos restar el ancho del hexágono de este 100% aquí. Para ello, utilizaremos la función de conteo. Entonces iré aquí mismo y añadiré calc, 100% menos el ancho del rectángulo, que es de 50 píxeles. Por lo que esto significa que ahora el hexágono se moverá una distancia igual al 100% de la distancia a la izquierda menos su propio ancho, que es de 50 píxeles. Ahora, cuando regrese y vuelva a cargar, se puede ver que el hexágono se moverá correctamente justo como queremos. Está bien, trabajemos en rotar el hexágono. Queremos hacer que el hexágono gire mientras se mueve. Entonces digamos que queremos rotarlo a ciclos en el camino. Por lo que dos ciclos, o igual a 360 grados multiplicados por dos, que es de 720 grados. Por lo que iré aquí al 50% de la duración de animación a la que estará el hexágono al final de la línea. Y voy a añadir transformar, rotar 720 grados. Y eso significa del 0 al 50 por ciento de la duración de la animación. Es decir, durante la primera mitad de la duración de la animación, el hexágono girará de 0 grados a 720 grados, luego de 50 por ciento a 100%, o durante la segunda mitad de la duración de la animación, el hexágono girará hacia atrás de 720 grados a 0 grados. Por lo que podríamos haber añadido la rotación 0 al principio y al final de la duración de la animación, pero es el valor predeterminado. Por lo que no agregamos nada, y vamos a obtener el mismo resultado. Entonces ahora cuando voy al navegador y recargo, se puede ver que el hexágono está girando mientras se mueve por encima de la línea exactamente como queremos. Gira de 0 grados a 720 grados durante la primera mitad de la duración de la animación, luego gira hacia atrás durante la segunda mitad. Genial. Ahora necesitamos animar la línea misma. Por lo que voy a crear una nueva animación. Nómbralo animar línea. Y al 0% de la duración de la animación, añadiré transformada. Gira 30 grados. Por lo que la línea se girará en 30 grados. Cuando vuelva a cargar la página. Entonces copiaré eso. Vuelve a pegarlo. Y al 25 por ciento de la duración de la animación, cambiaré la rotación de nuevo a 0 grados. Por lo que es rotación será 0 y sólo será una línea horizontal tal como es. Entonces al 50 por ciento. Lo cambiaré a 30 grados negativos. Por lo que rotará 30 grados, pero en la otra dirección, porque tenemos un signo negativo. Y al 75 por ciento, volveré a sumar 0, por lo que vuelve a su posición horizontal. Y finalmente, al 100%, lo volveré a cambiar a 30 grados. Entonces lo que sucederá aquí es que una vez que recarguemos, la línea se girará a la derecha en 30 grados. Entonces a medida que continúe la animación, volverá a 0 grados. Después negativo 30 grados, que es de 30 grados a la izquierda. Después vuelve a 0 rotación, luego 30 grados. Y seguirá haciéndolo para siempre. Muy bien, Vamos a añadir esta animación a nuestra línea. Iré aquí mismo al contenedor div y añadiré animación. Animar línea dos segundos. Y tenga en cuenta que debemos hacer la duración de la animación aquí dos segundos para que coincida con la animación del hexágono. Entonces agregamos lineales e infinitas. Por lo que ahora puedes ver que todo está funcionando perfección y tenemos la animación de carga. Nosotros queremos. 104. 108: ampliando el menú utilizando animaciones CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de menú. Se puede ver cuando paso el cursor sobre los elementos del menú, este efecto sucede donde tenemos una delgada línea roja que entra desde la izquierda y luego se expande para cubrir el enlace, dándonos este efecto cool. Veamos cómo podemos crear eso. Iré aquí en mi HTML y añadiré una URL. Cuando un LI, entonces una etiqueta de anclaje dentro de eso. Y voy a decir en casa. Entonces copiaré este enlace, lo pegaré de nuevo cuatro veces, y diré sobre Servicios, Equipo y contacto. Entonces iré a mi CSS para peinarlos en ti. Voy a darle la vuelta la URL y añadir margen 0, relleno 0 también. Entonces con el fin de hacer que el elemento de lista se sienta uno al lado del otro, voy a añadir display flex. Entonces apuntaré a la LI al estilo de lista. Ninguno. Entonces apuntaré a la etiqueta de anclaje y agregaré posición, relativa. Display. Bloque. Entonces el margen 0 de arriba e abajo y diez píxeles de izquierda y derecha para tener algún espaciado entre los enlaces. Entonces añadiré relleno, cinco píxeles de arriba y abajo, y diez píxeles de izquierda y derecha. Cuándo voy a añadir color. Con color gris oscuro. Tamaño de fuente 30 píxeles. Decoración de texto, ninguna. Transformación de texto. Mayúscula. Cuando finalmente transición 0.5 segundos. Y ahora puedes ver los enlaces de menú están buscando exactamente de la manera que queremos. Ahora, volvamos atrás y creemos la delgada línea que se cruza desde la izquierda. Crearemos eso usando el pseudo elemento antes. Por lo que fui electo y agrego contenido, cadena vacía, una posición, ancho absoluto, 100%, altura, apenas cuatro píxeles. Entonces queremos que esta línea se centre verticalmente. Por lo que sumaré top 50 por ciento. Entonces Transformar, Traducir Y negativo 50%. Entonces para desplazarlo a la izquierda, sumaremos a la izquierda, negativo al 100%. Y color de fondo. Este color rojo. Entonces finalmente transición 0.5 segundos. Y ahora puedes ver tenemos estas líneas delgadas que se sientan junto a los enlaces. Y cuando se cierne sobre los enlaces, queremos que estas líneas se muevan de izquierda a derecha. Entonces se ampliará para cubrir el enlace. Entonces hagámoslo. Iré aquí y crearé una nueva animación. Nómbrala línea. Entonces dentro de eso al 0%, sumaré negativo izquierdo 100% y altura cuatro píxeles. Entonces copiaré este código, lo pegaré de nuevo, y cambiaré a la izquierda a 0. Y dejaré la altura igual a cuatro píxeles tal como está. Entonces nuestra copia este código, pegarlo y cambiar la altura al 100%. Por lo que ocupará toda la altura del enlace. Entonces voy a añadir z-index negativo uno. Entonces lo que pasará aquí es que la línea roja comenzará a moverse desde la posición izquierda. Nos moveremos hasta que tenga un valor a la izquierda de 0. Después de eso se expandirá y su altura aumentará hasta que cubra un parpadeo. Y agregamos el índice z negativo aquí para que el texto aparezca frente a la línea roja. Muy bien, agreguemos esta animación a la línea roja. Al pasar el cursor sobre el enlace, iré aquí y diré, cuando pasemos el cursor sobre la etiqueta de anclaje, seleccionaré el pseudo elemento antes y añadiré animación. Línea 0.5 segundos lineal. Y queremos que la animación se detenga cuando llegue al punto final. Vamos a sumar hacia adelante aquí. Y ahora cuando voy a pasar el rato sobre los enlaces, se puede ver que la línea roja se mueve de izquierda a derecha. Después se expande para ocupar toda la altura del enlace y cubrirlo, dándonos este efecto realmente cool. Lo único que queda ahora es cambiar el color del texto del enlace a blanco al pasar el cursor sobre los enlaces. Entonces iré aquí y diré, cuando pasemos el cursor sobre el enlace, cambiaré el color a blanco. Y también subiré aquí dentro del enlace y añadiré desbordamiento oculto. Y ahora se puede ver la línea roja ahora está oculta. Y cuando vuelvo y paso por encima de los enlaces del menú, la línea roja entra de izquierda a derecha. Después se expande para encubrir el enlace, dándonos el efecto exacto que queremos. 105. 109: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear esta animación de fondo. Se puede ver que tenemos este título que tiene estos textos de animación de fondo. Y tenemos estas cajas que se hacen más grandes mientras giran. Algunas de ellas son rojas y las otras son azules. Y tienen diferentes retrasos de animación. Por eso están apareciendo uno tras otro. Entonces veamos cómo podemos crear este efecto. Iré aquí en mi HTML y agregaré un div, le daré una clase de contenedor. Y dentro de eso, añadiré H2 y diré animación de fondo. Entonces debajo de eso vamos a sumar nuestras cajas. Añadiré un div, le daré una clase de caja. Cuando nuestra copia este div, pegarlo de nuevo cinco veces. Por lo que estas serían las seis cajas que tendrán nuestro efecto. Entonces iré a mi CSS, apuntaré al div con la clase de contenedor, y agregaré posición, relativa, altura, 100 vh y desbordamiento oculto. Entonces apuntaré al H2 y agregaré margen 0, color, blanco, posición, absoluto. Y con el fin de centrarlo, sumaré el top 50 por ciento. Izquierda. 50 por ciento también. Después transformar, traducir, negativo 50 por ciento y negativo 50 por ciento. Entonces añadiré font-size 45 pixels. Transformación de texto, mayúscula. Entonces, finalmente, z-índice 1, para que la caja esté no la cubra. Y ahora se puede ver que el H2 se ve mucho mejor. Volvamos atrás y trabajemos en las cajas. Voy a apuntar al div con la clase de caja. Y sumaré posición, absoluta. Arriba, 80 por ciento, izquierda, 45 por ciento. El ancho. 10 píxeles, altura, 10 píxeles también. Después bordean un píxel. Sólido. Este color azul. Y ahora puedes ver que tenemos esta cajita. Tiene un pequeño borde azul de un píxel. Esto no es sólo una caja, en realidad son las seis cajas, pero estamos sentados uno encima del otro o frente al otro. Por eso estamos apareciendo como una sola caja. Y vamos a cambiar el posicionamiento de cada caja para que se ubicen en diferentes puntos de la página. Entonces volvamos atrás y hagamos eso. Iré aquí y apuntaré al segundo hijo de las cajas. Por lo que apuntaré al div con la clase de caja. Y voy a decir nth-child dos. Y luego sumaré el top 40 por ciento y me dejó el 25 por ciento. También le añadiré un color de borde, rojo. Por lo que ahora puedes ver tenemos una nueva caja sentada aquí en su nueva posición. De acuerdo, volvamos y hagamos lo mismo por las otras cajas. Voy a copiar este div, pegarlo de nuevo cuatro veces. Y eso apuntará al tercer div aquí. Y James arriba al 50 por ciento y se fue al 75 por ciento. Entonces por debajo de eso, apuntaré al cuarto div y cambiaré top al 10 por ciento y lo dejaré al 90%. También voy a agregar color de borde rojo cuando el quinto div cambie top al 85 por ciento y lo dejó al 10 por ciento. Y por último, el sexto hijo y el cambio top 10 por ciento y se fue al 50 por ciento. Después agrega color de borde, rojo. Y ahora puedes ver tenemos nuestras seis cajas por todo el lugar porque cambiamos el posicionamiento de cada una. Ahora, vamos a trabajar en el efecto de animación. Si recuerdas, las cajas se hacen más grandes mientras giran. Por lo que iré aquí y crearé una nueva animación. Nombralo casillas. Y dentro de ella al 0% de la duración de la animación, voy a añadir transformación, escalar 0 y girar 0 grados. Entonces opacidad uno. Y por debajo de eso al 100%, voy a sumar transformación, escala 20, rotar 960 grados y opacidad 0. Entonces lo que sucederá aquí es que la caja comenzará a partir de una escala de transformación de 0, decir de nada en realidad a una escala de transformación de 20. Por lo que se hará 20 veces más grande durante la duración de la animación. Y estará girando de 0 grados a 960 grados mientras hace eso. Y también su opacidad disminuirá hasta que se haga transparente. Muy bien, agreguemos esta animación al cuadro div. Subiré aquí y añadiré cajas de animación. Después una duración de animación de 12 segundos, luego la facilidad cuando es infinita. Por lo que ahora puedes ver que la caja es cada vez más grande mientras gira, dándonos el efecto que queremos. Pero el efecto será mucho mejor si podemos sumar algunos retrasos de animación entre las cajas. Por lo que aparecerán uno tras otro. Entonces volvamos atrás y hagamos eso. Iré aquí dentro del segundo hijo y añadiré retardo de animación dos segundos. Después dentro del tercer hijo, y agrega retardo de animación. Cuatro segundos. Después seis segundos dentro del cuarto hijo. Y ocho segundos dentro del quinto hijo. Y por último, diez segundos dentro del sexto hijo. Y ahora se puede ver que las cajas están animando una tras otra, debido a los diferentes retrasos de animación que agregamos a cada una de ellas. Pero hay un problema, como pueden ver, cuando recargo la página. Por ejemplo, echa un vistazo a esta caja. Se puede ver que está apareciendo y esperando a que termine su retraso de animación. Después inicia el animador. Pero no queremos que aparezca hasta que empiece a animar. Entonces lo que podemos hacer es volver aquí y agregar escala de transformación 0. Y ahora puedes ver la caja es que no aparezcan hasta que comiencen a animar. Y todos ellos se están moviendo, dándonos el efecto que queremos. 106. 110: qué es el trazo de clip CSS y cómo podemos utilizar, crear formas: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a aprender sobre la propiedad de clip-path CSS y cómo podemos usarla para crear las formas. Entonces vamos a crear un triángulo, un círculo, un hexágono a través de una estrella, y forma de mensaje. Se trata de una herramienta muy poderosa y la utilizaremos en las próximas lecciones para crear algunos ejemplos de animaciones creativas. Entonces, en primer lugar, ¿cuál es la propiedad clip-path? Bueno, la ruta del clip es una propiedad CSS que nos permite especificar una parte o región específica de un elemento para mostrar con el resto del elemento siendo oculto. Entonces todos los ejemplos que hemos visto donde sólo se muestra la parte del elemento. Entonces en el ejemplo del triángulo, optamos por mostrar una parte de nuestra imagen que tiene la forma del triángulo. Y el resto de la imagen fuera de esta forma de triángulo estaba oculta. Y esto es cierto también con el resto de las formas. Muy bien, veamos cómo podemos usar la propiedad de la trayectoria de clip para crear esta forma de triángulo. Ya hemos visto en nuestro primer ejemplo. Aquí en mi HTML, solo tengo una imagen. Y en mi CSS he agregado un ancho específico y una altura para esta imagen. Y como puedes ver, la imagen está sentada en medio del navegador. Muy bien, ahora, usemos la propiedad de trazado de clip para crear la forma de triángulo que queremos. Por lo que queremos mostrar sólo esta parte y ocultar o recortar el resto de la imagen. ¿ Cómo podemos hacer eso? Iré aquí dentro del elemento que queremos recortar, que es la imagen. Entonces añadiré polígono de recorte. Y sólo voy a añadir este código aquí mismo. Y como se puede ver, la parte de la imagen que se está mostrando es este triángulo y la región fuera de este triángulo está oculta. Entonces volvamos atrás y expliquemos el código que agregamos aquí. Este código de aquí define el área de la imagen que queremos mostrar. Se puede ver que consta de tres pares, y cada par representa un punto del triángulo. Por lo que el primer par representa este punto del triángulo. El segundo par representa este segundo, y el tercer par representa este último punto. Y estos son los puntos que definen o crean nuestro triángulo. Entonces veamos cómo el valor de cada par representa estos puntos. Antes de recortar la imagen, este era su tamaño, ¿no? Era una plaza. Por lo que sólo saldré de esta plaza como es para ayudarnos a imaginar lo que pasó aquí. El primer par de puntos es de 50 por ciento y 0%. Por lo que este 50 por ciento representa la distancia desde la esquina superior izquierda de la imagen a lo largo del eje x. Y el 0 representa la distancia desde la esquina superior izquierda de la imagen a lo largo del eje y. Por lo que empezamos aquí en la esquina superior izquierda de la imagen. Después nos movimos 50 por ciento a la derecha a lo largo del eje x hasta llegar aquí. Después nos movimos 0% hacia abajo a lo largo del eje y. Entonces 0 por ciento significa que no nos movíamos en absoluto. Entonces este es nuestro primero del triángulo. Entonces el segundo par aquí tiene 0% en el eje x y 100% en el eje y. Y esto es cierto. Aquí se puede ver este punto se encuentra en la esquina inferior izquierda. Por lo que partiendo de la esquina superior izquierda, movimos 0% de distancia a la derecha y 100% de distancia hacia la parte inferior. Y terminamos en este punto. Por último, el tercer par tiene 100% en el eje x y 100% en el eje y. Y está representando este punto, que se encuentra en la esquina inferior derecha. Por lo que partiendo de la esquina superior izquierda, nos movimos 100% a la derecha a lo largo del eje x y 100% hacia abajo a lo largo del eje y con el fin de llegar a este punto. Muy bien, Así que básicamente solo le damos al navegador los puntos que definen nuestra forma. Y luego el navegador dibuja esta forma y muestra lo que está incluido en la forma y oculta o recorta el resto de las partes del elemento fuera de la forma. Entonces digamos que quiero dibujar otro triángulo que muestre esta parte de la imagen y esconda el resto. Entonces básicamente queremos voltear el triángulo boca abajo o hacer la base en la parte superior. Entonces definamos nuestros tres nuevos puntos. El primero se ubicará aquí en la esquina superior izquierda. Entonces básicamente no nos moveremos y ya sea horizontal o verticalmente. Por lo que el primer par será igual a 0, 0%. Pasando a la segunda, se ubicará en la esquina superior derecha. Por lo que nos moveremos 100% a la derecha a lo largo del eje x y 0% a lo largo del eje y. Por lo que tendremos 1000%. Entonces el tercer y último punto estará justo aquí en el centro inferior de la imagen. Por lo que nos moveremos 50 por ciento a la derecha a lo largo del eje x y 100% hacia la parte inferior a lo largo del eje y. Por lo que tendremos el 50 por ciento y el 100% aquí mismo. Y ahora, cuando recargo el navegador, se puede ver que tenemos este nuevo triángulo que se define por estos tres nuevos puntos. Muy bien chicos, entonces es práctica. Quiero que intentes crear esta forma de triángulo donde se encuentra la base en el lado izquierdo de la imagen. Por lo que sólo cambiarás algunos valores aquí para conseguir esta forma. Así que pausa el video y pruébalo por tu cuenta. Muy bien, Ahora quiero hablarles de una herramienta muy bonita que vamos a utilizar a partir de ahora cuando se trabaja con la propiedad de la ruta de acceso del clip. Entonces como habrás notado, será difícil crear formas complejas codificándolo directamente. Será más agradable si contamos con una herramienta que nos pueda ayudar. Y esta herramienta es en realidad un sitio web llamado clippy. Entonces como pueden ver, chicos, aquí tenemos muchas formas que podemos aplicar a nuestros elementos. Entonces tenemos este triángulo y su código está sentado aquí mismo. Por lo que podemos simplemente copiar este código y añadirlo directamente a nuestro elemento. Entonces probemos la forma del círculo. Voy a copiar este código. Vuelve al navegador y pega aquí dentro del selector de imágenes. Y como se puede ver, la imagen ahora se convierte en círculo y las partes fuera del círculo están ocultas. Volvamos atrás y probemos otra forma. Probemos esta nave estelar. Voy a copiar el código. Vuelve a mi CSS y pegarlo. Entonces puedes ver la imagen ahora toma la forma de estrella. Entonces como pueden ver chicos, la propiedad de la ruta del clip es realmente poderosa en la creación de formas a partir de elementos HTML. También podemos controlar qué forma queremos crear. No tiene que ser estas formas específicas aquí. Podemos jugar hasta conseguir la forma que queramos. Por ejemplo, elegiré esta forma trapezoidal aquí. Y como puedes ver, tenemos estos coloridos puntos que podemos usar para movernos y crear cualquier forma que queramos. Entonces digamos que estoy contento con este. Puedo copiar su código desde aquí, pegarlo dentro del selector de imágenes. Y como puedes ver, la imagen ahora tiene esta forma. Entonces quiero que juegues con esta bonita herramienta y te acostumbres a ella porque la vamos a usar mucho en nuestras futuras animaciones, efectos. 107. 111: efecto de carga creativo utilizando la trayectoria de CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este efecto de carga de texto dividido usando animaciones clip-path y CSS. Se puede ver que la palabra cargando se divide en dos partes, o parte superior y una parte inferior. Lo haremos usando la propiedad de ruta de clip. Y también la parte superior entra de derecha a izquierda, mientras que la parte inferior entra de izquierda a derecha. Y se reúnen en el centro formando la palabra cargando. Es un efecto bastante bonito. Entonces, empecemos a crearlo. Empezaré aquí en mi HTML agregando un div y dándole una clase de Loader. Dentro de ella, le agregaré un lapso, le daré una clase de la mitad superior. Y dentro de ella voy a añadir la palabra cargando. Entonces copiaré este lapso, lo pegaré, y cambiaré la clase a la mitad inferior en lugar de la mitad superior. Después moviéndome a mi CSS, apuntaré al div con la clase de cargador. Entonces sumaré ancho 300 píxeles, altura 60 píxeles. Después bordea siete píxeles, sólidos. Este color azul. Y también añadiré un radio de borde de 10 píxeles. Muy bien, vamos a mandar a estos dos tramos. Volveré atrás y agregaré texto alineado, centro, y altura de línea, 60 píxeles. Y por último, sumaré posición relativa. Como puedes ver, los tramos ahora están centrados dentro del div cargador. Volvamos atrás y hagamos que estos tramos se sientan uno por encima del otro. Por lo que volveré aquí y apuntaré al lapso. Entonces sumaré posición absoluta, top 0, izquierda 0 también. Entonces para que tengan el mismo ancho y altura que el cargador div. Añadiré ancho, 100%, altura, 100%. Entonces agregaré tamaño de fuente, 48 píxeles. Transformación de texto, mayúscula. Y por último, el peso de la fuente 600. Y como puedes ver, los tramos ahora son más grandes y están sentados uno encima del otro porque ajustamos el ancho y la altura al 100% de su contenedor. De acuerdo, volvamos y trabajemos en la primera banda que tiene la media clase superior. Yo lo apuntaré. Entonces le añadiré color. Este bonito color rojo. Entonces queremos hacer visible sólo la mitad superior de este lapso y alta la mitad inferior, porque la mitad inferior estará representada por el segundo lapso. Por lo que haríamos eso usando la propiedad de ruta de clip. Iré a Clippy y elegiré la forma trapezoidal. Entonces arrastraré estos círculos hasta obtener exactamente la mitad superior de nuestro elemento. Igual que eso. Entonces copiaré el código, volveré a mi CSS, y lo pegaré en el lapso con la clase de la mitad superior. Entonces apuntaré el lapso con la clase de la mitad inferior. Después agrega color, nuestro color azul. Entonces queremos mostrar sólo la mitad inferior. Por lo que volveré a Clippy y moveré estos puntos para conseguir la mitad inferior. Sólo. Entonces copiaré el código. Vuelve atrás y pega dentro del medio lapso inferior. Y así como esos chicos, se puede ver que sólo tenemos la mitad superior del primer lapso visible mientras que la parte inferior está oculta o recortada. Y lo mismo para la parte inferior. Y porque están sentados uno encima del otro y tienen el mismo tamaño de fuente. Aparecen como si fueran un elemento, pero no lo son. Muy bien, Finalmente, vamos a crear la animación que hace el movimiento hasta que se conozcan. Voy a crear una nueva animación. Nómalo, split. Entonces dentro de ella al 0% de la duración de la animación, agregaré transformada, traduciré X 100%. Entonces copiaré eso. Pégalo de nuevo tres veces. Y al 40 por ciento, volveré a cambiar el valor de la transformación a 0. Entonces al 60%, lo haré 0 también. Entonces al 100%, lo cambiaré a negativo 100%. Por lo que al mirar esta animación, se puede ver que el elemento, comenzaremos en el 100% de su ancho desde la derecha. Después se moverá a la izquierda hasta que regrese a su posición original con 0 translate. Después del 40 por ciento al 60 por ciento de la duración de la animación, se mantendrá en su posición en 0 translate. Entonces se moverá de nuevo a la izquierda en un 100%. Por lo tanto, agreguemos esta animación al medio lapso superior. Iré aquí mismo y añadiré animación. Dividir, luego animación duración de cuatro segundos, luego lineal, y finalmente infinito. Entonces ahora se puede ver que la parte superior se mueve desde la derecha, luego se queda un poco en el centro, luego se mueve hacia la izquierda y sigue haciendo eso. Añadamos también esta animación a la parte inferior. Volveré a copiar la línea de animación de código, pegarla, y al final solo agregaré reversa. Por lo que este es un valor de dirección de animación que hará que el elemento se anime en dirección inversa del 100% al 0%. Entonces empezaremos por la izquierda e iremos a la derecha, no de derecha a izquierda. Y finalmente, subiré aquí dentro del cargador div. Y añadiré desbordamiento oculto para que los tramos no aparezcan fuera de un cargador div. Y ahora se puede ver la parte inferior también se anima en la otra dirección. Y juntos están creando este efecto realmente bonito. 108. 112: efecto wavy creativo utilizando la pista de clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto ondulado usando animaciones CSS y la propiedad de ruta de clip. Es un ejemplo bastante cool y veremos cómo podemos animar la propiedad de la ruta del clip con el fin de obtener un efecto tan cool. Entonces empezaré aquí en mi HTML agregando un div y dándole una clase de onda. Entonces dentro de ella voy a añadir un H2 y decir ola. Copiaré este H2 y lo pegaré de nuevo. Y como pueden ver, sólo tenemos dos encabezamientos colocados uno encima del otro. Vayamos a nuestro CSS y empecemos a peinar. Entonces. Voy a apuntar su div contenedor que tiene la clase de onda. Y sumaré posición relativa. Después ancho de 500 píxeles, y altura 500 píxeles. Entonces apuntaré al propio rumbo y agregaré posición absoluta para que ambos se posicionen en relación con los contenedores de onda uno encima del otro. Y con el fin de centrarlos horizontal y verticalmente, agregaré text-align, center, luego altura de línea, 500 pixels. Entonces hagamos que la fuente sea más grande agregando tamaño de fuente 170 píxeles. Entonces, por último, el texto se transforma en mayúsculas. Y ahora puedes ver que nuestros encabezados son más grandes y están sentados uno encima del otro y centrados horizontal y verticalmente dentro del navegador. Sigamos adelante. Voy a volver aquí y decir t2 int niño uno para apuntar al primer rumbo. Entonces dentro de eso, voy a añadir color. Este color azul claro. Como se puede ver, nada cambió porque el segundo encabezamiento está sentado encima y cubriéndolo. Muy bien, vamos a apuntar a este segundo rumbo. Diré h2 nth niño dos. Y dentro de ella, le añadiré color a este color azul más oscuro. Y como puedes ver, tiene un fondo azul y encubre el primer rubro. Entonces, por ejemplo, si recortamos la parte superior del segundo encabezamiento, veremos la parte superior del primero debajo de él. Entonces hagámoslo rápidamente. Iré a la copia del sitio web y me limitaré mover estos puntos hasta obtener sólo la mitad inferior visible. Entonces copiaré el código y volveré al selector de segundo encabezamiento y añadiré eso. Y como se puede ver, ahora se recorta la parte superior del segundo encabezamiento, y la mitad superior que aquí se ve con este color azul más claro. En realidad el primer rubro. Por lo que ahora sabemos que el segundo rubro está apareciendo encima del primero. Muy bien, solo eliminaré esta línea de código de clip-path. Y ahora tenemos el segundo rubro visible de nuevo. A continuación, queremos crear la animación ondulada del segundo encabezamiento. Por lo que volveré a mi CSS para crear una nueva animación. Y lo llamaré onda. Entonces dentro de ella, crearé tres etapas de animación. El primero está al 0%, luego el segundo está al 50 por ciento. Y el final está al 100%. Entonces volveré a la página web de Clippy. Y como puedes ver aquí, tenemos lo que se llama polígono personalizado. Y eso solo nos permite crear cualquier forma que queramos añadiendo puntos. Por lo que trataré de crear una forma ondulada como se puede ver agregando algunos puntos y moviéndolos alrededor. De acuerdo, así que esto se ve bien. Voy a copiar el código. Vuelve a mi CSS y pegarlo aquí al 0% de la duración de la animación. Y aquí al 100%. Entonces volveré de nuevo al sitio y traté de crear otra ola en la otra dirección. Por lo que sumaré algunos puntos y trataré de conseguir la forma ondulada. Entonces copiaré el código y lo pegaré aquí al 50% de la duración de la animación. Entonces lo que sucederá, chicos, es que el segundo rubro tendrá la forma de la primera ola. Entonces se animará a la segunda ola al 50%. Entonces volverá a la primera ola nuevamente al 100%. Y todo esto sucederá sin problemas, dándonos un bonito efecto ondulado. Por lo que subiré aquí dentro del segundo encabezamiento y añadiré animación. Onda. Dos segundos, facilidad para entrar, salir. Entonces finalmente infinito. Y como se puede ver, el segundo rumbo ahora tiene la forma de la ola. Y se está animando desde la primera forma. La segunda forma, dándonos este bonito efecto ondulado. Y se puede ver el primer encabezamiento con el color azul claro es visible aquí debajo del efecto de onda. También podemos crear otro efecto fresco volviendo al interior del primer encabezado y cambiando el color a transparente en lugar de azul claro. Entonces debajo de eso, agregaré trazo de texto webkit a píxeles y el mismo color azul. Y ahora se puede ver el color del primer rubro ahora es transparente. Y tenemos un derrame cerebral a su alrededor. Y se ve muy bonito. 109. 113: efecto de hacedor de imagen utilizando la pista de clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de desplazamiento de imagen utilizando la propiedad de ruta de clip. Para que veas aquí tenemos tres imágenes y están divididas de esta manera. Y cuando se cierne sobre cualquiera de ellos, se hace más grande y ocupa todo el espacio del contenedor. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un div y dándole una clase de contenedor. Y luego dentro de eso, añadiré otro div y le daré una clase de recortado y otra clase de recortado. Entonces copiaré esa clase, pegaré de nuevo dos veces, y cambiaré clip uno al Clip 2. Entonces el clip tres. Después de eso, iré a mi CSS y apuntaré al contenedor div. Entonces agregaré posición, ancho relativo, 800 píxeles, altura, 500 píxeles. Entonces finalmente, color de fondo. Este color gris oscuro. Por lo que ahora puedes ver tenemos este fondo gris oscuro. Entonces apuntaré al div con la clase de clip. Entonces agregaré posición, absoluta, superior, 0, izquierda, 0, ancho 100%, y altura 100%. Entonces finalmente, transición o 0.5 segundos. Por lo que esta es una clase general que se aplica a los tres dibs. Acabamos de establecer el ancho y la altura de los divs a ancho y altura completos del contenedor. Muy bien, empecemos a segmentar cada div individualmente. Voy a apuntar al div con la clase del Clip 1. Después añadiré URL de fondo, primera imagen, y encontrarás todas las imágenes en el archivo de recursos. Entonces agregaré tamaño de fondo, cubierta, luego posición de fondo, centro. Y ahora puedes ver aquí tenemos esta primera imagen de fondo, y está ocupando todo el ancho y la altura del div contenedor. Entonces copiaré este div, lo pegaré de nuevo, apuntaré al segundo div, y usaré mi segunda imagen como fondo. Entonces lo volveré a pegar. Segmenta el tercer div esta vez y usa la tercera imagen. Y ahora se puede ver que las imágenes están sentadas uno encima del otro. Entonces esta imagen de aquí es la tercera, y está sentada encima de las otras dos. De acuerdo, ahora recortemos las imágenes para que tengan la forma que queremos. Iré a la página web de Clippy y comenzaremos con la tercera imagen. Queremos que aparezca la parte correcta de la tercera imagen. Entonces solo puedo mover estos puntos hasta conseguir la forma que quiero. Digamos esta forma. Entonces copiaré el código. Vuelve a mi CSS y pegarlo en el tercer div. Y ahora se puede ver el tercer div está recortado y sólo esta parte aquí del lado derecho es visible. De acuerdo, vamos a trabajar en el segundo al sitio y mover los puntos hasta que consiga una forma en el centro. Por lo que voy a jugar hasta llegar donde quiera. De acuerdo, ahora copiaré el código. Vuelve a pegarlo en el segundo div. Y ahora se puede ver también está recortado y la parte media es visible. Recortemos rápidamente el primer div. Por lo que volveré al sitio y quiero que aparezca el lado izquierdo. Entonces moveré los puntos hasta obtener la forma que quiero. Entonces de nuevo, copiaré el código y añadiré dentro del primer div. Y así, se puede ver que el primer div también está recortado y la parte del lado izquierdo es visible. Muy bien, ahora queremos trabajar en el efecto hover. En primer lugar, voy a ir aquí mismo y decir, cuando se cierne sobre el contenedor, quiero hacer algunos cambios sucedieron a los tres divs. Por lo que apuntaré al clip div. Entonces lo que quiero hacer es que quiero ocultar todas las partes de los clips cuando se cierne sobre el contenedor. Por lo que iré al sitio Clippy y arrastraré todos los puntos a la derecha para que se oculten. Copiaré el código, volveré al editor de códigos y lo pegaré aquí. Y ahora cuando voy a pasar el rato sobre el contenedor, puedes ver que todos los divs se encogen hasta que desaparecen. Pero eso no queremos. Queremos que la imagen que pasamos por encima se expanda hasta que ocupe todo el ancho y la altura. Entonces eso es lo que vamos a hacer a continuación. Voy a ir aquí y decir, cuando se cierne sobre el clip div. Y como queremos que las imágenes se amplíen al ancho completo, volveré al sitio Clippy y moveré los puntos hasta obtener visible el ancho y la altura completa. Entonces iré y copiaré el código, volveré de nuevo y lo pegaré aquí mismo. Por lo que este bloque de código sólo significa que al pasar el cursor sobre cualquiera de las tres imágenes, eso se expande hasta ocupar todo el ancho y la altura. Entonces vayamos al navegador y probemos eso. Se puede ver que al pasar el cursor sobre cualquier imagen, se expande y ocupa todo el espacio, cubriendo las otras imágenes. Y ese es el efecto que queremos. 110. 114: efecto emergente creativo utilizando la pista de clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de desplazamiento emergente. Se puede ver que aquí tenemos un pequeño círculo. Y cuando pasamos sobre él, este div aparece y contiene un encabezado y un párrafo. Por lo que la idea detrás de este efecto es muy simple. Crearemos nuestro div, luego solo mostraremos el pequeño círculo a la derecha y ocultaremos el resto del div. Entonces cuando se cierne sobre él, mostraremos todo el div. Muy bien, empecemos a hacer eso. Aquí en mi HTML, voy a añadir un div, darle una clase de tarjeta. Entonces dentro voy a añadir una H y decir información. Entonces añadiré un párrafo y añadiré algo de texto aleatorio aquí. Entonces iré a mi CSS para empezar a trabajar en esos. Voy a apuntar al div con la clase de tarjeta. Entonces estableceré su ancho en 500 píxeles y su altura en 250 píxeles. Entonces pondré su color de fondo a este bonito color azul claro. Después añadiré relleno, 20 píxeles desde arriba, y 80 píxeles desde la derecha, luego 20 píxeles y 20 píxeles desde la parte inferior y la izquierda. Entonces añadiré borde radio 10 pixeles para hacer las esquinas un poco redondeadas. Entonces finalmente transición o 0.5 segundos. Y ahora puedes ver que teníamos esta tarjeta div y contiene un encabezado y un párrafo. Está bien, sigamos adelante. Voy a apuntar a la H1. Después agrega margen, inferior 20 píxeles. Entonces apuntaré al párrafo y estableceré su tamaño de fuente en 18 píxeles. Está bien, Eso se ve mejor. Ahora, trabajemos en recortar este div en el pequeño círculo que se sienta en la esquina superior derecha. Iré a la página web de Clippy. Entonces elegiré la forma del círculo aquí abajo abajo. Entonces haré este círculo más pequeño y trataré de posicionarlo en la esquina superior derecha. Está bien, eso se ve bien. Voy a copiar este código CSS. Vuelve a mi CSS y pegarlo en la tarjeta div. Y como pueden ver, ahora tenemos este pequeño círculo sentado aquí mismo, y el resto de la tarjeta ahora está oculto. De acuerdo, al pasar el cursor sobre la tarjeta, queremos redimensionar la carta a su tamaño completo. Por lo que volveré al sitio Clippy, elijo de nuevo la forma del círculo. Y aumentaré el tamaño del círculo hasta que muestre el tamaño completo del div. Entonces copiaré ese código. Vuelve a mi CSS y di, al pasar el cursor sobre la tarjeta, pegaré este código. Y ahora cuando vuelvo y vuelvo sobre el pequeño círculo, puedes ver que vuelve a su tamaño completo, mostrando el encabezado y el párrafo. Y todo esto sucede sin problemas porque agregamos aquí una transición de 0.5 segundos. Muy bien chicos, así que eso es todo por este efecto. Fue realmente sencillo, pero se ve bien. 111. 115: negro a blanco y blanco y negro utilizando la trayectoria del clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de desplazamiento de texto usando la propiedad de trazado de clip. Se puede ver aquí tenemos este texto donde la mitad es la palabra blanco y la otra mitad es la palabra negro. Y cuando pasamos por encima de la parte negra, aparece la palabra negra completa y la palabra blanca se hace más pequeña hasta que desaparece. Y lo mismo sucede cuando se cierne sobre la palabra blanca. Aparece completamente mientras desaparece la palabra negra. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un div y dándole una clase de Maine. Entonces dentro de ella añadiré un H1 y añadiré la palabra negro dentro de ella. Después otro debajo de eso, y agrega la palabra blanco. Entonces iré a mi CSS para apuntar al div principal y agregar posición, relativa y ancho 800 píxeles. Entonces voy a apuntar al H1, sumar posición, absoluta, top 50 por ciento, izquierda, 50% también. Después transformarse, traducir negativo 50 por ciento y negativo 50 por ciento. Entonces añadiré margen 0, relleno 0, y ancho. 100%. Alinear texto, centro, tamaño de fuente, 220 píxeles. Y por último, el texto se transforma, mayúscula. Y ahora se puede ver que las dos palabras están sentadas una encima de la otra. Muy bien, Sigamos trabajando. Iré aquí y apuntaré al segundo que tiene dentro la palabra blanco. Por lo que voy a decir H1 enésima hijo dos. Entonces añadiré color blanco, luego transición 0.5 segundos. Ahora se puede ver la palabra blanco está sentada encima de la palabra negro. Y queremos hacer visible sólo la mitad de ella. Por lo que iremos a la página web de Clippy. Después elige la forma trapezoidal. Mueve los puntos hasta obtener la forma que quiero mostrar para la palabra blanca. Después copia el código. Vuelve atrás y pega dentro del selector para la palabra blanco. Y ahora se puede ver la palabra blanco ahora está dividida. Y esta es la única parte que es visible mientras que la otra parte está oculta. Pero como puedes ver, la palabra negro es visible detrás de la palabra blanco, y eso no queremos. Entonces lo que podemos hacer es añadir un color de fondo similar al color de fondo del cuerpo. Y ocultará la parte que es visible. Entonces volveré y haré eso. Iré aquí y le añadiré color de fondo. Este color. Es del mismo color que el fondo del cuerpo. Y ahora puedes ver este color de fondo se aplica y tenemos la forma exacta que queremos. Está bien, vamos a trabajar en el efecto de flotar sobre la palabra blanco. Queremos que ocupe el tamaño completo y encubra la palabra negro. Por lo que voy a decir H uno-nth-child to. Y al rondar sobre eso, volveré a la página web de Clippy y haré que la palabra blanca vuelva a su tamaño completo. Por lo que voy a mover los puntos hasta obtener el tamaño completo de la nave. Y luego copiaré el código, regresaré y lo pegaré. Y ahora se puede ver cuando paso sobre la palabra blanco, se hace más grande y vuelve a su tamaño completo, cubriendo la palabra negro. Muy bien, ahora queremos hacer lo mismo por la palabra negro. Cuando se cierne sobre él. Queremos que se haga más grande y vuelva a su tamaño completo, cubriendo la palabra blanco. Por lo que seleccionaré el primer encabezamiento que tiene la palabra blanco agregando uno, enésimo hijo uno. Y al rondar sobre eso, quiero hacer que le pasaran algunos cambios al que se sienta directamente al lado. Entonces esta línea de código aquí sólo significa que cuando pase el cursor sobre la palabra blanco, haré cambios sucedidos a la palabra negro. Por lo que este selector aquí sólo apunta al elemento H1 que se sienta directamente después de este elemento. Por lo que volveré a la página web de Clippy y quiero hacer que el encabezado blanco encoja hasta que desaparezca para que el elemento negro pueda aparecer y convertirse en su tamaño completo. Entonces voy a mover el baile hasta conseguir la forma que quiero, que no es ninguna forma básicamente. Entonces volveré a mi CSS y añadiré este código aquí. Entonces esto sólo significa que cuando pase el cursor sobre el primer H1, que es la palabra negro, la segunda se encogerá hasta que desaparezca. Y esto nos dará el efecto que queremos. Y ahora cuando voy a pasar el rato sobre la palabra negro, se puede ver que la palabra blanco se encoge hasta que desaparece y hace que la palabra negro vaya a su tamaño completo, dándonos el efecto que queremos. 112. 116: imagen para cerrar utilizando la propiedad de trazado de clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este efecto de desplazamiento de tarjeta usando la propiedad de clip CSS. Se puede ver que tenemos esta imagen y cuando se cierne sobre ella, se encoge hasta que se convierte en un pequeño círculo. Y aquí tenemos algún contenido que aparece debajo de la imagen. Entonces tenemos h1, h2, o un párrafo y una etiqueta ancla. Crearemos este efecto cool usando la propiedad V clip-path. Entonces hagámoslo. Iré aquí en mi HTML y añadiré un div, le daré una clase de tarjeta. Entonces debajo de eso, añadiré otro div. Darle una clase. Entonces este sería el div que contiene nuestra imagen. Entonces añadiré nuestra imagen dentro de ella. Entonces debajo de ese div, añadiré otro. Dale una clase de contenido. Entonces dentro de eso, sumaré un H2 y diré título. Después un párrafo después de eso. Y voy a añadir algo de texto ficticio Lorem Ipsum. Y por último, voy a añadir una etiqueta de ancla y decir leer más. Está bien, iré a mi CSS para darle estilo a eso. Voy a apuntar al div con la clase de tarjeta. Entonces agregaré posición, ancho relativo, 335 píxeles, altura, 500 píxeles. Entonces después de eso, apuntaré al div con la clase de imagen y agregaré posición absoluta, top 0, left 0 también. Entonces queremos que ocupe todo el ancho y la altura de la tarjeta. Por lo que agregaremos ancho 100% y altura 100% también. Entonces finalmente, vamos a sumar transición o 0.5 segundos. Está bien, sigamos adelante. Voy a apuntar a la imagen misma que se sienta dentro de nuestro div y añadir ancho 100%. Y ahora puedes ver que la imagen tiene el mismo ancho que su contenedor. Ahora, queremos hacer que la imagen se encoja y convertirnos en un pequeño círculo cuando se cierne sobre ella. Entonces hagámoslo. Diré que al pasar el cursor sobre el div que tiene la clase de tarjeta, quiero hacer algunos cambios en el div con la clase de imagen. Y voy a ir a la página web Clippy para crear la forma de círculo que queremos. Intentaré crear el tamaño exacto del círculo que quiero en la posición exacta que quiero. Entonces copiaré el código. Vuelve de nuevo y pegarlo aquí. Entonces volveré de nuevo a la página web de Clippy y haré que este círculo ocupe el tamaño completo para que podamos mostrar el tamaño completo del elemento. Entonces volveré a copiar el código. Vuelve y ve aquí mismo dentro de la imagen div, y pega el código aquí dentro del div con la clase de imagen. Entonces, lo que esto hará es cuando pasemos el cursor sobre la tarjeta, el div con la clase de imagen cambiará de esta propiedad de ruta de clip a esta propiedad de ruta de clip donde será un círculo más pequeño. Y ahora se puede ver cuando paso el cursor sobre la tarjeta, la imagen se encoge hasta que se vuelve más pequeña. Y al alejarse, se remonta para cubrir todo el tamaño de la tarjeta. Muy bien, volvamos atrás y sigamos trabajando. Trabajaremos en el contenido. Por lo que apuntaré al div con la clase de contenido. Y voy a añadir posición absoluta, izquierda, 0, inferior 50 píxeles porque queremos posicionar el texto por encima del borde inferior por 50 píxeles. Después para alinear el texto en el centro, agregaré texto alinear centro. Ahora se puede ver el contenido se encuentra en la parte inferior de la tarjeta div. Sigamos adelante. Voy a apuntar al H2. Entonces añadiré relleno y margen 0 también. Entonces añadiré transformación de texto, mayúsculas. Entonces apuntaré al párrafo y agregaré margen inferior 25 píxeles. Entonces el tamaño de fuente, 16 píxeles, y el texto se transforma. Capitalizar. Entonces apuntaré a la etiqueta de anclaje. Agregar display, inline-block. Decoración de texto. Ninguno. Color de fondo, color negro, blanco. Acolchado, cinco píxeles de arriba y abajo, y diez píxeles de izquierda y derecha. Entonces finalmente, voy a añadir texto transformado capitalizar. Muy bien, ahora tenemos el estilo de contenidos de la manera que queremos. Sigamos adelante. Queremos que este contenido se oculte y aparezca sólo cuando pasemos el cursor sobre la tarjeta. Entonces iré aquí y apuntaré al H2, al párrafo, y a la etiqueta de anclaje. Entonces añadiré opacidad 0, luego transición 0.3 segundos. Y voy a añadir transformar traducir Y 20 pixels. Establecemos aquí el Traducir Y a 20 píxeles porque queremos que estos elementos se muevan de abajo a su posición original mientras se desvanece. Cuando pasemos el cursor sobre la tarjeta, será un efecto más bonito que solo fallar. Entonces, por último, cuando se cierne sobre la tarjeta, queremos que estos elementos vuelvan a aparecer y se desvanezca muy bien. Por lo que diré cuando pasemos el rato sobre la tarjeta, haré algunos cambios al H2. Entonces copiaré eso, lo pegaré, y apuntaré al párrafo esta vez. Entonces también apuntaré a la etiqueta de anclaje. Entonces dentro de eso añadiré opacidad una de nuevo para que estos elementos vuelvan a aparecer en el hovering. Después Transformar, Traducir Y 0 para que se muevan de abajo a su posición original. Y por último, retraso de transición 0.5 segundos. Y ahora cuando vuelvo y vuelvo sobre la imagen, puedes ver que se encoge hacia abajo para convertirse en un círculo. Y el contenido aquí se desvanece muy bien mientras se mueve de abajo a su posición, dándonos este efecto realmente genial. 113. 117: efecto de revelación de imagen usando la trayectoria de un clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este bonito efecto de desplazamiento de imagen usando la propiedad de ruta de clip. Se puede ver cuando paso el cursor sobre la imagen, se encoge desde la esquina inferior izquierda hasta la esquina superior derecha. Y tenemos este texto que aparece debajo de él. Y este texto contiene un H2, un párrafo, y un enlace. Entonces veamos cómo podemos crear este efecto. Empezaré aquí en mi HTML agregando un div y dándole una clase de tarjeta. Entonces dentro de ella, añadiré otra con la clase de contenido. Y dentro de este contenido div, voy a añadir un H2 y decir imagen efecto hover. Después añadiré un párrafo y añadiré algo de texto Lorem Ipsum. Entonces por fin, voy a añadir una etiqueta de ancla y decir leer más. Entonces iré a mi CSS target el div con la clase de tarjeta. Cuándo voy a agregar posición anchura relativa, 400 píxeles, altura, 400 píxeles también. Y finalmente, color de fondo, negro. Por lo que aquí puedes ver tenemos un fondo negro con un ancho y una altura de 400 píxeles sentados en el navegador. Está bien, sigamos adelante y regresaremos aquí y div dirigido con la clase de contenido. Entonces sumaré posición, ancho absoluto, 60 por ciento, Top, 50 por ciento, izquierda, 50 por ciento también. Entonces para centrar el contenido, agregaré transformar, traducir, negativo 50 por ciento y negativo 50 por ciento. Entonces le añadiré color, blanco. Y por último, el texto alinear centro. Y ahora se puede ver el contenido div está centrado dentro de la tarjeta. Sigamos trabajando y volveremos a mi CSS y apuntaremos al H2. Entonces añadiré margen, inferior 20 píxeles y texto transformado. Capitalizar. También apuntaré al párrafo. Agregar margen inferior 30 píxeles. Y el texto se transforma. Capitalizar. Entonces apuntaré a la etiqueta de anclaje. Agregar pantalla. Bloque en línea, relleno, 10 píxeles de arriba e abajo, y diez píxeles de izquierda y derecha. Después frontera. Un píxel. Blanco sólido. Decoración de texto, ninguna. Color. Blanco. Transición 0.5 segundos. Entonces, finalmente, el texto se transforma. Capitalizar. De acuerdo, ahora, al pasar el cursor sobre el enlace, queremos cambiar el color a negro y añadir un fondo blanco. Entonces hagámoslo. Iré aquí y diré cuando se cierne sobre el enlace, cambiaré su color a negro. Y voy a añadir color de fondo blanco. Y ahora cuando paso el cursor sobre el enlace, tenemos este efecto donde el color de fondo cambia a blanco y el color del texto cambia a negro. Ahora, agreguemos la imagen que se sienta encima del contenido. Volveré a mi HTML, iré aquí abajo del div de contenido, y añadiré una etiqueta de imagen. Entonces añadiré nuestra imagen. Lo encontrarás en los recursos para esta lección. Entonces como puedes ver, esta imagen está por todo el lugar. Volvamos a CSS y arreglemos eso. Yo lo apuntaré. Después agrega posición, absoluta, superior, 0, izquierda 0 también. Ancho 100%, y altura 100%. Cuando un objeto se ajusta cubierto. Y finalmente, transición 0.5 segundos. Por lo que ahora puedes ver nuestra imagen ahora está sentada encima del contenido y encubriéndola. Ahora queremos crear un efecto hover. Entonces, al pasar el cursor sobre la imagen, queríamos encogernos desde la esquina inferior izquierda hasta la superior derecha. Por lo que iré aquí a decir cuando se cierne sobre la imagen. Después iré a la página web de Clippy y elegiré la forma trapezoidal. Entonces moveré este punto aquí desde la esquina inferior izquierda hasta la superior derecha. Después copia el código y vuelve a mi CSS y pegarlo. Después volveré a la página web de Clippy y haré que la imagen vuelva a su tamaño completo. Otra vez. Copia el código, y vuelve a mi CSS y pegarlo aquí dentro de la etiqueta de imagen. Por lo que esto solo le dirá al navegador que al pasar el cursor sobre la imagen, queremos que cambie de este tamaño completo a este tamaño donde estará completamente oculto, moviéndose de la esquina inferior izquierda a la superior derecha. Entonces cuando voy a pasar el cursor sobre la imagen, se puede ver que tiene exactamente el mismo efecto que queremos. Se encoge desde la esquina inferior izquierda hasta la esquina superior derecha. Y en realidad podemos cambiar eso con bastante facilidad. Por ejemplo, digamos que queremos que se encoja desde la esquina superior izquierda hasta la inferior derecha. Podemos hacerlo fácilmente volviendo a la página web de Clippy. Y moveré este punto aquí desde la esquina superior izquierda hasta la inferior derecha. Entonces copiaré el código. Vuelve al selector de imágenes, y pegarlo aquí al pasar el cursor sobre la imagen. Y ahora cuando pase el cursor sobre la imagen, se puede ver que se contrae desde la esquina superior izquierda hasta la inferior derecha, dándonos este efecto fresco. 114. 118: efecto lectivo creativo utilizando la pista de acceso CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear este cool y luego se cursor del efecto usando la propiedad de ruta de clip. Se puede ver cuando paso el cursor sobre los enlaces en el menú, este efecto sucede donde tenemos una línea horizontal que se mueve a través de los enlaces en especie de los divide en dos mitades, la mitad superior y la mitad inferior. Y se puede ver que la mitad superior se mueve un poco hacia el lado superior derecho y la mitad inferior se mueve hacia el lado inferior izquierdo. Entonces, empecemos a crear este efecto. Iré aquí y añadiré una UL entonces, y luego una etiqueta de anclaje dentro de eso. Y voy a decir en casa. Entonces iré aquí y agregaré datos, texto y diré a casa también. Más adelante descubrirás por qué agregamos el atributo de texto de datos aquí. Entonces copiaré este ítem de lista, lo pegaré de nuevo cuatro veces. Y decir sobre los servicios, equipo y contacto. De acuerdo, iré a mi CSS y apuntaré a la UL. Entonces añadiré margen 0, relleno 0 también. Entonces apuntaré a la LI y sumaré posición. Relativo, estilo lista, ninguno. Y por último, margen, diez píxeles de arriba e abajo y 0 píxeles de izquierda y derecha. Muy bien, apuntaré a la etiqueta de anclaje y agregaré posición relativa. A continuación, mostrar bloque, texto, alinear, centro, margen, 0. Acolchado, cinco píxeles de arriba e abajo, y diez píxeles de izquierda y derecha. Entonces voy a añadir transformación de texto. Mayúscula, transición, 0.5 segundos. Tamaño de fuente, 16 pixels, font-weight, 900. Y por último, decoración de texto. Ninguno. Y ahora se puede ver que los enlaces están buscando exactamente de la manera que queremos. A continuación, queremos dividir los eslabones en dos mitades para que cuando la línea pase por ellos. El efecto de división sucederá, y lo haremos usando la propiedad de trazado de clip. Entonces primero, apuntaré al pseudo elemento antes de la etiqueta ancla y agregaré contenido, un texto de datos TTR. Entonces lo que esto hará es agarrar el texto que tenemos en el atributo de texto de datos y ponerlo en el contenido del pseudo elemento antes de cada enlace. Por lo que el pseudo elemento antes del primer enlace tendrá un contenido de casa. El segundo enlace tendrá un contenido de sobre, y así sucesivamente. Muy bien, a continuación queremos que este contenido quede perfectamente encima del texto original del enlace. Por lo que sumaré posición, absoluta, superior, 0, izquierda, 0, ancho 100%. Entonces añadiré relleno, cinco píxeles de arriba e abajo, y 0 píxeles de izquierda y derecha. Entonces le añadiré color. Este color gris oscuro caja dimensionamiento border-box transición, 0.5 segundos. Por lo que ahora se puede ver que los pseudo elementos antes están sentados perfectamente encima de los enlaces y tienen este color gris oscuro. Muy bien, ahora el pseudo elemento antes será la mitad superior. Entonces vayamos a la página web de Clippy y creemos el código responsable de eso. Por lo que elegiré la forma trapezoidal y moveré los puntos hasta que representen exactamente la mitad superior. Entonces copiaré el código de vuelta al pseudo elemento antes y lo pegaré. Por lo que ahora puedes ver la mitad superior del pseudo elemento antes es visible mientras que la parte inferior está oculta. De hecho, volvamos atrás y hagamos transparente el color de los enlaces. Iré dentro del selector de enlaces y agregaré color. Transparente. Y ahora lo puedes ver con claridad, la mitad superior es visible y la inferior está oculta. De acuerdo, hagamos lo mismo para el pseudo elemento after. La única diferencia es que esconderemos la mitad superior y mostraremos la de abajo. Por lo que voy a copiar el pseudo elemento antes, pegarlo de nuevo. Y lo único que cambiará es la propiedad de la ruta del clip. Por lo que volveré a la página web de Clippy y moveré los puntos para apuntar a la mitad inferior, no al de arriba. Entonces copiaré el código, regresaré y lo pegaré dentro del pseudo elemento after. Y ahora se puede ver el pseudo elemento después ahora aparece en la mitad inferior. ¿ Está bien? Al pasar el cursor sobre los enlaces, queremos que el pseudo elemento antes se mueva a la esquina superior derecha y el pseudo elemento después se mueva a la parte inferior izquierda. Entonces hagámoslo. Diré que al pasar el cursor sobre la etiqueta de anclaje, haré algunos cambios al pseudo elemento antes, que es la media hora superior, cambiaré el color a este color rojo. Y añadiré transformada, traduciré 10 píxeles. Por lo que se moverá diez píxeles a la derecha a lo largo del eje x, los negativos 3 píxeles. Por lo que se desplazará hacia la parte superior por tres píxeles. Entonces volveré a copiar eso. Y cambia esto a 10 píxeles negativos y tres píxeles positivos. Y ahora cuando paso el cursor sobre cualquier enlace, puedes ver la mitad superior y la mitad inferior se están moviendo y dándonos nuestro efecto de split fresco y también sus cambios de color. Para leer. Lo único que queda ahora es la línea horizontal que pasa por los eslabones y los divide. Crearemos eso usando el pseudo elemento antes de los ítems de la lista. Por lo que lo apuntaré. Entonces dentro de eso voy a contenido cuerdas vacías. Posición, absoluta. Entonces para centrarlo verticalmente, sumaré el top 50 por ciento. Entonces Transformar, Traducir Y negativo 50 por ciento. Entonces queremos que ocupe todo el ancho del elemento de lista. Por lo que vamos a sumar ancho, 100%. Entonces altura, sólo un píxel. Y color de fondo. Este color gris oscuro. Entonces queremos que venga del lado izquierdo al lado derecho. Por lo que sumaré izquierdo negativo 100%. Y finalmente transición 0.5 segundos. Y ahora puedes ver tenemos esta delgada línea que se sienta en el lado izquierdo de los ítems de la lista. Y cuando pasemos el cursor sobre los elementos de la lista, queremos que esta línea se mueva a la derecha a través de los enlaces. Por lo que diré al pasar el cursor sobre los elementos de la lista, quiero hacer algunos cambios en el pseudo elemento antes. Estableceré la propiedad izquierda en 100% en lugar de negativo 100%. Y ahora, cuando pase el cursor sobre los enlaces, puede ver que la línea se mueve a través de los enlaces, dándonos este efecto de división fresco. Volvamos atrás y ocultemos la línea fuera del enlace. Volveré aquí dentro del elemento de lista y añadiré desbordamiento oculto. También queríamos dividir efecto para tener algún retraso y pasar un poco después de que las líneas comienzan a moverse. Por lo que iré dentro de la mitad superior y agregaré retardo de transición 0.25 segundos. Y haré lo mismo para la mitad inferior también. Y ahora se puede ver la línea horizontal ahora está oculta. Y cuando pasamos sobre el eslabón, la línea se mueve y la escupe, dándonos el efecto exacto que queremos. 115. 119: efecto creativo utilizando la trayectoria de un clip CSS: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección vamos a crear otro efecto de botón usando la propiedad de trazado de clip. Se puede ver este botón se divide de esta manera en dos partes, una parte blanca y una parte morada. Y al pasar el cursor sobre la parte blanca, el color de fondo del botón se expande y se vuelve blanco. Y de igual manera, al pasar el cursor sobre la parte morada, también se expande y el fondo del botón se vuelve morado. Entonces vamos a crear este efecto. Empezaré aquí en mi HTML agregando una etiqueta ancla. Entonces dentro de eso, voy a añadir un lapso y decir botón. Entonces otro lapso por debajo de eso. Y decir botón también. De acuerdo, entonces iré a mi CSS y apuntaré a la etiqueta de ancla. Después agrega posición, ancho relativo, 180 píxeles, altura 60 píxeles. Entonces apuntaré a los tramos dentro del enlace y agregaré posición absoluta para que podamos posicionarlo en relación con la etiqueta de anclaje. Entonces vamos a sumar top 0, izquierda 0 también. Ancho, 100%, altura, 100% también. Por lo que los dos giros tendrán el mismo ancho y altura que el enlace. Entonces añadiré color, blanco, color de fondo, este color morado. Entonces centremos el texto. Añadiré text-align, center y line-height, 60 pixels. Entonces añadiré transformación de texto, espaciado de letras mayúsculas a píxeles. Entonces finalmente, tamaño de fuente, 22 píxeles. Y ahora se puede ver que los dos tramos se sientan uno encima del otro y están ocupando todo el ancho y la altura de la etiqueta de anclaje. Está bien, Ahora quiero apuntar al segundo lapso. Por lo que voy a decir span nth child para apuntar al segundo lapso. Entonces dentro de eso, cambiaré el color de fondo a blanco y el color a nuestro color morado. Entonces sumaré transición 0.5 segundos. Por lo que ahora se puede ver el segundo lapso tiene un fondo blanco y el color del texto es morado. Pero debajo de eso se sienta el primer lapso con el fondo morado y el texto blanco. Y la razón por la que el segundo lapso está apareciendo encima del primero es simplemente porque vino después del primero en el marcado HTML. Pero si recortamos esta parte específica del segundo lapso, la primera aparecerá debajo de ella, y eso es lo que voy a hacer a continuación. Iré a la página web de Clippy y escogeré la forma del punto izquierdo esta vez. Entonces moveré los puntos hasta obtener la forma que quiero. Por lo que trataremos de que muestre la mitad del lapso. Entonces copiaré su código. Vuelve a mi CSS y pegarlo. Y ahora se puede ver que sólo esta parte de la derecha es visible en el segundo lapso mientras que la parte izquierda estaba recortada. Y por eso la primera banda ahora aparece debajo de ella. De acuerdo, ahora, cuando se cierne sobre el segundo lapso, que es la parte blanca, queremos que se vuelva más grande y retome el tamaño completo del enlace. Entonces iré aquí y diré span nth-child también, para apuntar al segundo lapso. Y al pasar el cursor sobre eso, quiero mostrar el tamaño completo del segundo lapso. Por lo que volveré a la página web de Clippy y moveré los puntos a la izquierda hasta que muestre el tamaño completo del elemento. Entonces copiaré el código, regresaré y lo pegaré aquí dentro sobre el segundo lapso. Y ahora cuando vuelvo y vuelvo sobre la parte blanca, se puede ver que se expande hacia la izquierda y ocupa el tamaño completo del enlace. Por lo que su tamaño cambia desde el primer caso en el que la parte derecha sólo es visible al segundo caso donde es de tamaño completo es visible. Muy bien, Ahora, cuando se cierne sobre la parte morada, queremos que la parte blanca se encoja y desaparezca para que el primer lapso o la parte morada aparezca por completo. Entonces hagámoslo. Voy a ir aquí y decir span nth-child. Uno para apuntar al fondo morado. Y cuando se cierne sobre eso, queremos hacer que pasen algunos cambios al lapso que viene directamente después de él, que es el fondo blanco. Después volveré a la página web de Clippy y moveré todos los puntos a la derecha para que el fondo blanco se encoja y desaparezca por completo. Entonces copiaré este código, regresaré y pegaré aquí. Y ahora cuando vuelvo sobre la parte morada, puedes ver que la parte blanca se contrae completamente hacia la derecha, permitiendo que la parte morada vuelva a aparecer. Y cuando se cierne sobre la parte blanca, crece hacia la izquierda hasta que ocupa el tamaño completo del enlace. Y que todo el mundo es el efecto exacto que queremos. 116. Efectos de javascript: Muchos de ustedes me pidieron que creara algunas lecciones de efecto Javascript. Así que aquí estamos en esta sección donde aprenderemos a usar animaciones Javascript y CSS juntas para crear algunos efectos realmente interesantes que son imposibles de crear usando solo CSS. Entonces aquí están los ejemplos que vamos a crear juntos. 117. Efecto de animación de texto colorido: Hola a todos. Bienvenidos a otra nueva lección del curso. En esta lección en particular, vamos a crear este efecto de desplazamiento de texto realmente genial Puedes ver cuando pasamos el cursor sobre este texto, este efecto ocurre como puedes ver, el texto brilla de izquierda a derecha, y todas las letras tienen diferentes colores Cuando nos alejamos, este efecto de iluminación se desvanece. Crearemos este efecto usando HTML, CSS y un poco de ayuda de Javascript. Empecemos a crear este efecto. Iré en mi HTML y agregaré una H dos, le daré una clase de texto. Después dentro de ella agregaré texto Javascript. Después iré a mi CSS y apuntaré al cuerpo. Agregar display, flex, justificar contenido, centrar una línea, centro de artículos, altura mínima, fondo 100 VH, este color gris oscuro. Entonces por debajo de eso, apuntaré a la H dos y agregaré posición relativa tamaño de fuente tres. E M, espaciado entre letras, 0.05 M. Cursor texto predeterminado transformar mayúsculas, luego finalmente, peso de fuente 500. Ahora se puede ver que la H dos se ve mucho mejor. Bien, ahora vamos al archivo Javascript. Lo que queremos hacer a todos, es que queremos envolver cada letra del texto H dos en un lapso separado. La letra J se envolverá dentro de un lapso, luego la letra a, luego la letra, y así sucesivamente y así sucesivamente. Entonces empezaremos a estilizar estos vanos. Lo haremos usando Javascript. Hagámoslo, y espero que entiendas a lo que me refiero. Comenzaré aquí seleccionando el H dos y almacenarlo en una variable. Voy a crear una variable, nombrarla texto, y decir selector de consulta de documento y apuntar a la H dos que tiene una clase de texto. Ahora comencemos a envolver cada letra en un lapso. Voy a crear un nuevo nombre de variable que abarca. Entonces pondré eso igual al texto intext. Lo que hará el método innertext es que extraerá el texto dentro de la H dos solo para ver lo que estamos haciendo Paso a paso, iré aquí y agregaré vanos de registro de consola. Ahora cuando abrimos la consola, se puede ver que tenemos huellas de texto Javascript, que es el texto dentro de la H dos. Bien, Ahora queremos recuperar cada letra individualmente para que podamos envolverla dentro de un lapso. Y podemos hacer eso usando la función split. Iré aquí y agregaré split, y agregaré cadenas vacías dentro de él. La propiedad split se usa en cadenas para dividirlas, y devuelve en una matriz que contiene la palabra o letras divididas, y las cadenas vacías aquí es el separador. Por ejemplo, si agregamos un espacio aquí dentro de las cadenas vacías, puedes ver que nuestra cadena se divide en dos palabras en el espacio aquí. Pero como queremos separar todas las letras, aquí vamos a eliminar este espacio. Ahora puedes ver que tenemos una gran matriz que contiene todas las letras como los elementos de la matriz. Bien, ahora queremos recorrer estas letras en la matriz y comenzar a envolverlas dentro de vanos Y lo haremos usando el método map. Iré aquí y agregaré mapa aquí como primer parámetro, agregaré letra en el segundo parámetro, agregaré para índice. El método map es básicamente un método que recorre la matriz, crea una nueva matriz basada en llamar a una función en cada elemento de la matriz original. El primer parámetro aquí son los elementos de la matriz. En nuestro ejemplo, carta aquí serán las letras dentro de nuestro array spans Aquí está el índice del elemento. Para la primera iteración de bucle, la letra aquí será la letra J y yo seré cero Entonces para la iteración del segundo bucle, la letra será la segunda letra a, y el índice será uno Y así sucesivamente y así sucesivamente. Entonces crearé la función del método map dentro de él. Diré regreso. Entonces abriré un literal de plantilla, agregaré una etiqueta span, luego cerraré la etiqueta span dentro de ella. Añadiremos cada letra. Lo haremos agregando un signo de $1, luego la letra dentro de llaves rizadas Lo que va a pasar aquí, todo el mundo es que el método map recorrerá la matriz de letras, agregará cada letra dentro de un lapso, luego devolverá una nueva matriz de eso. Al igual que ves aquí, tenemos esta gran matriz y cada elemento es una etiqueta span con una letra dentro de él. Bien, ahora para terminar esto, queremos extraer todos los elementos de la matriz y convertirlos nuevo a cadena normal para poder inyectarlos fácilmente en nuestro HTML. Y podemos hacerlo con bastante facilidad usando el método join. Voy a ir aquí y añadir join entonces, y cadenas vacías como separador. Ahora bien, si miras la variable spans en la consola, puedes ver que se muestran como una cadena Y ahora podemos insertarlos fácilmente dentro del encabezado HTML yendo aquí y agregando texto innerHTML es igual a spans Ahora todos, cuando inspeccionamos la H dos, se puede ver que ahora tiene todos estos vanos Cada letra está envuelta dentro de un lapso. Ahora vamos a nuestro CSS y seleccionemos vanos dentro de la H dos y agreguemos color Este color gris más claro, luego transita 0.25 segundos. Entonces por debajo de eso, diré al flotar sobre la H dos, apuntaré al lapso y agregaré color, este color verde claro Entonces para obtener el efecto brillante, agregaré sombra de texto, este valor. Ahora cuando voy y vuelo el cursor sobre la H dos, se puede ver que tenemos este bonito efecto resplandeciente Ahora queremos agregar algo de retraso de transición a las letras. Volvamos a Javascript. Vaya aquí dentro del span y agregue retardo de transición de estilo. Después usaremos literales de plantilla para insertar algún código. Después agregue I veces 40, luego milisegundos. Hemos utilizado el índice aquí para hacer que el retraso de transición sea único. Para cada lapso, será cero por 40 milisegundos para la primera letra, una por 40, luego dos por 40, y así sucesivamente y así sucesivamente Ahora cuando pasamos el cursor sobre la H dos, se puede ver que las letras brillan una tras otra Cambiemos también el color de cada letra usando la propiedad filter CSS. Voy a ir aquí y agregar filtro rotar I veces 30 grados. Esto hará que cada tramo tenga un color diferente. Al igual que puedes ver aquí. Todas las letras ahora tienen diferentes colores fríos. Con eso todos, tenemos este efecto realmente genial, brillante. 118. Menú de navegación circular con javascript: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este efecto de alternancia de menú circular. Se puede ver cuando hago clic en este botón de alternar, aparecen esos seis enlaces circulares. Puedes ver que se colocan alrededor del botón de alternar, y al hacer clic de nuevo, vuelven y se esconden detrás del botón de alternar. Usaremos script Java para crear este efecto. Comenzaré aquí en mi HTML agregando un di y dándole una clase de contenedor. Después dentro de él agregaré otro div y le daré una clase de toggle. Este será el botón de alternar. Después dentro de ella queremos agregar el icono del botón de alternar. Y obtendremos esos íconos de un sitio web llamado Ion icons. Para incluir los iconos, iré al uso y copiaré este código aquí. Después pegarlo en nuestro HTML. Después para seleccionar el icono de alternar, voy a dar clic en los iconos, luego seleccionar y copiar este código aquí. Después regresa y pegarlo aquí dentro del toggle dif. Entonces por debajo de eso queremos agregar los elementos del menú. Voy a agregar una UL, luego una L I. Dentro de ella, queremos usar variables CSS. Aquí, agregaré el estilo dos y agregaré uno. Esta variable será igual a uno para este primer elemento de la lista. Entonces dentro de eso, agregaré una etiqueta de anclaje dentro de ella. Queremos agregar el icono de inicio. Volveré aquí y buscaré eso. Entonces copia este código, vuelve a pegarlo aquí. Ahora puedes ver que tenemos el botón de alternar y el enlace de inicio. Bien a todos, voy a pausar la grabación y agregar los otros enlaces, igual que he hecho con este. Como puedes ver, hemos agregado seis iconos aquí y aumentamos la variable 1-6 y están todos aquí. Bien, vayamos a nuestro CSS y apuntemos al cuerpo. Después agregue altura mínima, 100 VH Display flex, justifique el centro de contenido, alinee elementos, centro de fondo, gradiente lineal 45 grados de este color púrpura a este color rojo. Entonces por debajo de eso, apuntaré al div contenedor. Agrega ancho 270 pixeles, alto 270 pixeles. Luego, muestre flex, justifique el centro de contenido, alinee los elementos, la posición central relativa y un fondo rojo temporal. Ahora puedes ver que tenemos el ícono de tago y los otros enlaces sentados uno al lado del otro Bien, vamos a trabajar en el botón de alternar. Yo lo apuntaré. Agrega ancho 70 pixeles, alto 70 pixeles. Entonces fondo blanco radio de borde 50% color este color gris oscuro. Después para centrar el icono dentro del círculo, agregaré display Flex, Justificar centro de contenido, alinear elementos al centro, luego tamaño de fuente 30 pixeles. Puntero del cursor índice z 20. Después finalmente la transición 0.3 segundos. Ahora vamos a trabajar en el efecto click. Al hacer clic en el botón de alternar, queremos que gire para ser un signo x, no un signo más. Al hacer clic en este botón, queremos agregar una clase en el div contenedor y darle estilo al botón de alternar. En base a esta clase, iré al archivo Javascript y comenzaré seleccionando el div contenedor. Diré que el contenedor sea igual al selector de consultas de documentos y seleccione el contenedor. Entonces por debajo de eso, apuntaré rápidamente al toggle div. Entonces voy a ir aquí y decir toggle Agregar oyente de eventos. El evento que queremos escuchar es click. Entonces agregaré nuestra función. Dentro de eso, agregaré lista de clases de contenedor, alternaré y agregaré una clase llamada active. Eso es todo para el script Java, todos. Básicamente, cuando hacemos clic en el botón de alternar, se agrega una clase llamada active al contenedor. Vamos a probar eso. ver cuando hago clic en el botón de alternar, esta clase activa se agrega aquí. Al volver a hacer clic, se elimina. Bien, volvamos a nuestro CSS y seleccionemos el contenedor Div. Entonces cuando el contenedor tenga una clase de active, apuntaremos a la clase toggle y agregaremos transform rotate 45 grados. Ahora puedes ver cuando hago clic en el botón de alternar, gira 45 grados y se convierte en un signo x. Al volver a hacer clic, regresa debido a la eliminación de la clase activa. Bien, vamos a seguir adelante. Trabajemos en la UL que contiene todos los elementos de la lista. Tiene una clase de menú. Voy a apuntar eso y agregar posición absoluta superior cero, izquierda cero, luego ancho 100% alto 100% Luego apuntaré la L I dentro del menú y agregaré posición absoluta top 00, ancho 100% alto 100% Luego finalmente apuntaré eventos. Ahora puedes ver que todos los elementos de la lista están posicionados en la esquina superior izquierda. Debajo de eso, apuntemos a la etiqueta de anclaje dentro del elemento de la lista. Dentro de eso, agregaré ancho 55 pixeles, alto 55 pixeles. Colorea este fondo de color gris oscuro, radio de borde blanco 50% tamaño de fuente 22 pixeles. Después voy a añadir display flex justify content center, un centro de líneas de artículos. Entonces con el fin de posicionar los enlaces debajo del botón Toggle, agregaré posición absoluta top 50% left 50% Transformar traducir negativo 50% y negativo 50% Puedes ver que los enlaces ahora están ocultos detrás del botón toggle. También agregaré eventos puntero visibles, luego transitaré 0.3 segundos. Al hacer clic en el botón de alternar, queremos que los botones vuelvan a aparecer. Seleccionaré el contenedor cuando el contenedor tenga una clase activa. Es decir, cuando hacemos clic en el botón, seleccionaré las etiquetas de anclaje y agregaré a cero. Ahora al hacer clic en el botón de alternar, puedes ver que los enlaces se mueven hacia arriba. Al volver a hacer clic, retroceden y se esconden detrás del botón de alternar. Ahora lo único que queda es hacer que los enlaces giren alrededor del botón de alternar. Iré aquí dentro de los elementos de la lista y agregaré transform rotate. Ya que tenemos seis elementos de lista, agregaré calc 360 grados por seis veces v, que es la variable que agregamos a nuestro HTML El primer LI se rotará 360 grados dividido por seis por uno, que es 60. El segundo se girará 120 grados, y así sucesivamente y así sucesivamente hasta que el último se rotará 360 grados. Ahora puedes ver cuando hacemos clic en el botón de alternar, tenemos los seis iconos repartidos alrededor del botón de alternar. Pero como puedes ver, los íconos se rotan para invertirlos. Podemos ir aquí y agregar transformar, traducir negativo 50% y negativo 50% luego rotar negativo 360 grados dividido por seis veces la variable I. Esto revertirá todos los enlaces girados nuevo a cero grados. Ahora puedes ver al hacer clic en el botón, puedes ver que los enlaces ahora están mirando exactamente de la manera que queremos, pero solo necesitamos eliminar el fondo rojo. Eso es todo para todos, para esta lección. Espero que lo hayas disfrutado y te veré en la siguiente. 119. Efecto de paralaje para sitios web con javascript: Hola a todos, Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear un genial efecto de sitio web de paralaje Puedes ver que tenemos este encabezado que tiene un logo y una barra de navegación. También tenemos esta imagen de fondo y este encabezado que dice sitio web de paralaje También tenemos algún contenido ficticio aquí debajo del encabezado. Como puede ver, sólo un encabezamiento y un párrafo. Pero mira más de cerca, cuando nos desplazamos hacia abajo, puedes ver que tenemos este genial efecto de paralaje en el que el encabezado aquí se mueve hacia abajo mientras se desplaza Además, esta hoja de árbol aquí en la esquina superior derecha se mueve hacia la parte superior derecha. A medida que este cerro de aquí se mueve hacia el fondo, estos dos cerros se mueven en diferentes direcciones, una a la derecha y otra a la izquierda, dándonos este efecto realmente genial. Empecemos aquí en nuestro HTML agregando un encabezado dentro de él, agregaremos un H dos y digamos logo. Entonces por debajo de eso, agregaré un elemento nav y le daré una clase de navegación. Después dentro de ella, agregaremos los enlaces. Voy a añadir una etiqueta de ancla y decir casa. Entonces agregaré rápidamente las otras etiquetas de anclaje. Como puedes ver, tenemos el logo y la barra de navegación. Bien, vayamos a nuestro CSS y seleccionemos el cuerpo y agreguemos fondo, este color gris claro, luego altura mínima, 100 VH. Entonces por debajo de eso, apuntaré al encabezado y agregaré posición cero superior absoluta, cero a la izquierda con el 100% luego llenando 30 píxeles de arriba y abajo y 100 píxeles de izquierda y derecha. Después agregaré display flex. Entonces queremos que el logo y la barra de navegación estén en el lado izquierdo. Voy a añadir Justify Content Flex. Inicie Alinear elementos en el centro para asegurarse de que el encabezado sea visible. No importa qué elementos agreguemos, agregaré índice z 100. Ahora puedes ver que tenemos el logo y la barra de navegación a la izquierda. Volveré y apuntaré al logo. Después voy a añadir tamaño de fuente dos, color M, este color verde. Entonces para tener algún espaciado entre el logo y el menú de navegación, agregaré margen, derecha, 270 pixeles, tal como ves aquí. Bien, trabajemos en el menú de navegación. Apuntaré las etiquetas de anclaje dentro la navegación y agregaré decoraciones de texto, no color, este relleno de color verde, seis píxeles de arriba y abajo y 15 píxeles de izquierda y derecha. Después agregaré radio de borde 20 píxeles de margen, cero desde arriba e abajo, y diez píxeles de izquierda y derecha. Después peso de la fuente 600, finalmente transición 0.5 segundos. Ahora puedes ver que los enlaces se ven mucho mejor. Voy a ir aquí y decir al pasar el cursor sobre esos enlaces, agregaré fondo, nuestro color verde y color blanco Ahora puedes ver que los enlaces tienen este bonito efecto de flotar. Bien, ahora vamos a trabajar en las imágenes que usaremos para crear el efecto de paralaje Puedes ver aquí tenemos siete imágenes que cuando se juntan, nos darán nuestro fondo completo. Tenemos cinco imágenes para los cerros y una imagen para la hoja, y otra para la planta. Por supuesto, encontrarás todas estas imágenes adjuntas en el archivo de recursos. Iré aquí en mi HTML y agregaré una nueva sección, le daré una clase de paralaje Después dentro de ella, agregaré una imagen, luego agregaré la primera imagen que es colina uno. También le daré una identificación de hill one para que lo apunte en el archivo Javascript. Entonces agregaré rápidamente todas las demás imágenes. Ahora puedes ver que hemos agregado ocho imágenes, Todas las imágenes de nuestro fondo y las ves aquí en el navegador. También agregaré una H dos, le daré una identificación de texto y diré sitio web de paralaje Bien, ahora volveré a mi CSS y apuntaré al div de paralaje que contiene todas las imágenes y agregaré position relative display flex Entonces justifica el centro de contenido, Alinear el centro de elementos también. Altura 100 VH. Ahora puedes ver que todas las imágenes se agregan una al lado de la otra. Sigamos trabajando. Volveré y agregaré desbordamiento oculto para obtener la forma exacta que queremos. Seleccionaremos las imágenes dentro div de paralaje y agregaremos posición absoluta Entonces superior cero, izquierda, cero ancho 100% Finalmente, eventos puntero, ninguno. Ahora se puede ver que tenemos estos antecedentes. Eso es simplemente todas nuestras imágenes juntas, forman este fondo. La razón por la que esto está sucediendo tan perfectamente es porque todas estas imágenes están diseñadas para este propósito. Es como si esta fuera solo una vista que se dividió en múltiples imágenes. Bien, vamos a trabajar en los dos que tenían una identificación de texto. Lo apuntaré y agregaré posición. Tamaño de fuente absoluto cinco, color EM blanco. Entonces el texto sombrea este valor. Ahora se puede ver que la H dos se ve exactamente de la manera que queremos. Bien, agreguemos algo de contenido. Para tener una barra de desplazamiento, iré a mi HTML y agregaré una nueva sección con una clase de contenido Entonces dentro de ella agregaré una H dos y diré sitio web de desplazamiento de paralaje Después por debajo de eso agregaré un párrafo y agregaré algún texto ficticio Ahora puedes ver que tenemos este contenido. Vamos a agregar rápidamente algunos estilos aquí. Volveré a mi CSS, Target the content, luego agrego position relative background, este color verde padding 100 pixeles. Entonces apuntaré la H dos dentro ella y agregaré tamaño de fuente tres, E, M color blanco margen inferior diez píxeles. Después seleccionaré el párrafo y agregaré tamaño de fuente uno M color blanco peso de fuente 300. Ahora puedes ver que el div de contenido se ve mucho mejor. Te habrás dado cuenta de que hemos elegido este color verde oscuro para coincida con el fondo de nuestro fondo aquí, están muy cerca el uno del otro. Increíble. Ahora que hemos terminado el HTML y CSS de este ejemplo, es el momento de trabajar en el script Java. Iré al archivo Java Script, después comenzaré seleccionando los elementos que queremos animar o cambiar Diré que deje documento de texto, obtenga elemento por ID. Seleccionaré el elemento con el ID de texto, que son los dos. Después seleccionaré rápidamente los otros elementos que usaremos en nuestro archivo Javascript. Se puede ver que hemos seleccionado otros cuatro elementos, imagen de creencias y tres imágenes de los cerros. Bien, vamos a trabajar en el efecto. Iré aquí y diré ventana, agregaré scroll de oyente de eventos Entonces crearé una función de devolución de llamada. Básicamente, este código significa que cualquier código que agreguemos aquí dentro de esta función de devolución de llamada se ejecutará cada vez que nos desplazemos por la página Bien, dentro de la función, crearé una nueva variable llamada value y estableceré su valor en window scroll. Esta será la distancia vertical que la página haya desplazado Si volvemos al navegador y nos desplazamos un poco, será esta distancia aquí. Bien, entonces vamos a trabajar en los elementos para cambiar su posición usando el valor variable aquí. Trabajemos primero en la H dos que tiene el ID de texto, diré estilo de texto margin top. Eso será igual a. Vamos a utilizar literales de plantilla aquí. Al agregar estos dos símbolos, agregaremos el signo de dólar y abriremos llaves curley para agregar un código ejecutable dentro Entonces diré valor veces 2.5 Luego fuera de las llaves, agregaré píxeles Lo que va a pasar aquí todos es cada vez que nos desplazamos por la página, Javascript agarrará el valor del desplazamiento y, luego lo multiplicará por 2.5 El resultado se establecerá como un margen superior para los H dos Siempre que nos desplazemos hacia abajo por el margen, valor superior aumentará, haciendo que los H dos se muevan hacia abajo. Intentemos eso muy rápido. Se puede ver cuando me desplazo hacia abajo, la H dos se mueve hacia abajo. Al desplazarse hacia arriba, se moverá nuevamente a la parte superior. Bien, vamos a trabajar en la hoja aquí. Queremos que se mueva a la esquina superior derecha fuera de la página al desplazarse hacia abajo. Entonces diré top de estilo de hoja igual a, usaré literales de plantilla también y multiplicaré valor por negativo 1.5 Esta vez esto establecerá top a un valor negativo, haciendo que la hoja se mueva hacia arriba Por ejemplo, si voy a mi navegador, puede ver al desplazarse, la hoja se mueve hacia arriba Bien, volvamos a moverlo también a la derecha. Duplicaré este código, luego cambiaré de arriba a izquierda, y solo cambiaré negativo 1.5 a 1.5 Así como así. Cuando me desplazo hacia abajo en la página, se mueve hacia la parte superior derecha. Ahora, no sólo la cima. Creo que ya tienes la idea. Rápidamente agregaré el otro código para las imágenes restantes. Como pueden ver, básicamente hice lo mismo con las imágenes de Three Hills. Acabo de cambiar su posición. Cambié la posición de este a la derecha ya que agregué un valor positivo a la izquierda. En cuanto a éste, se moverá hacia la izquierda ya que tiene un valor negativo a la izquierda. Para el último aquí, se moverá al fondo ya que tiene un valor superior positivo. Como pueden ver aquí todos, cuando me desplace hacia abajo los elementos que seleccionamos, se mueven y cambian su posición. Tenemos estos dos cerros en el centro que se separan entre sí, mientras que este cerro aquí se mueve al fondo a todos. Eso es todo por el efecto paralaje. Se puede ver que la idea detrás de ella es muy sencilla. Espero que lo hayan disfrutado y los veré en la siguiente lección. 120. Diseño de tarjetas expandibles con javascript: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear esta tarjeta de perfil animada. Puedes ver que tenemos esta tarjeta, y cuando hacemos clic en este botón de alternar, puedes ver que la tarjeta se expande y aparece esta imagen. Además, observe que el botón de alternar gira de apuntar hacia abajo a apuntar hacia arriba cuando hacemos clic en él. Veamos cómo podemos crear esta tarjeta. Iré aquí en mi HTML agregando un div con una clase de tarjeta. Después iré a mi CSS y seleccionaré la tarjeta div. Después agrega posición ancho relativo, 350 pixeles, alto 85 pixeles fondo. Este radio de borde de color marino 20 pixeles. Finalmente transición 0.5 segundos. Ahora se puede ver que teníamos este fondo marino. Volvamos a nuestro HTML. Queremos crear el botón de alternar. En la parte inferior, voy a añadir un, darle una clase de toggle. Después dentro de ella agregaré un lapso. Después volveré y apuntaré al toggle div. Esta será la parte en la parte inferior. Voy a agregar posición, ancho absoluto 70 pixeles, alto 60 pixeles, fondo blanco. Después para colocarlo en la parte inferior, agregaré abajo negativo 60 píxeles. La izquierda 50% transforma traducir x negativo 50% Luego agregaré borde inferior izquierdo radio 35 píxeles y borde inferior derecho radio 35 píxeles también. Entonces finalmente puntero del cursor. Ahora puedes ver que tenemos esta parte blanca en la parte inferior. Pero si echamos un vistazo a nuestro ejemplo, se puede ver que la curva aquí es más suave. Regresemos y creemos eso. Usaremos el pseudo elemento antes. Para ello, seleccionaré el pseudo elemento before del toggle div y agregaré contenido cadenas vacías posicion ancho absoluto 35 pixeles, alto 35 pixeles Después fondo un fondo rojo temporal. Después agregaré negativos a la izquierda 34 píxeles, luego bordearé el radio superior derecho 35 píxeles. Entonces por debajo de eso agregaré sombra de cuadro 11 píxeles como un desplazamiento horizontal. Luego, diez píxeles negativos como desplazamiento vertical, cero como valor de desenfoque, y diez píxeles como valor de dispersión, luego un color verde. Ahora puedes ver que tenemos este color verde que agregamos usando la propiedad box shadow. Bien, iré aquí y cambiaré el color rojo a transparente. Entonces queremos crear la misma parte en el lado derecho. Voy a copiar ese bloque de código, pegarlo y cambiar de izquierda aquí a derecha. Después cambia de borde a la izquierda. También cambie el desplazamiento horizontal aquí a negativos 11 píxeles. Ahora puedes ver que lo tenemos aquí a la derecha. Entonces iré aquí dentro de la inmersión de toggle y cambiaré el color de fondo del blanco al color azul marino oscuro. También cambia el color de la sombra de caja a Navy en lugar de verde. Ahora ya pueden ver que tenemos esta parte de la Marina en la parte inferior. Bien, ahora vamos a crear la flecha que se posicionará en esta parte de la Marina. Lo crearemos usando el span dentro del dip de toggle. Seleccionaremos esa posición sumar, ancho absoluto diez pixeles, alto diez pixeles. Después bordea los tres píxeles inferiores, blanco sólido. Entonces agregaremos borde derecho también. Después para centrarlo, agregaremos top 50% izquierda, 50% Luego transformar traducir negativo 50% negativo 70% Luego para rotarlo, agregaremos rotar 45 grados. Después agregaré transición 0.5 segundos. Bien, ahora al hacer clic en este botón de alternar, queremos que este lapso gire y apunte hacia la parte superior. Lo haremos usando Javascript. Iré al archivo Javascript y comenzaré apuntando a la tarjeta. Crearé una nueva variable, nombraré y seleccionaré la tarjeta. También apuntaré al toggle div. Entonces debajo de eso, al hacer clic en el toggle div, queremos agregar una clase al div de la tarjeta, luego darle estilo al span en función de esa clase. Entonces al volver a hacer clic, queremos eliminar esta clase. Básicamente, alternaremos una clase al hacer clic en el botón de alternar. Voy a ir aquí y decir toggle, Agregar oyente de eventos, y escuchar el evento click A continuación vamos a crear una función de devolución y decir la lista de tarjetas toggle, y el nombre de la clase activa Ahora al inspeccionar el div de la tarjeta, al hacer clic en el toggle dive, se puede ver que se agrega una clase activa al div de la tarjeta Al volver a hacer clic, se elimina. Bien, ahora al hacer clic en el botón de alternar, queremos rotar la flecha. Iré a mi CSS y apuntaré a la tarjeta. Cuando la tarjeta tenga una clase activa, seleccionaremos el span dentro del div toggle. En su interior agregaremos transformar, traducir negativo 50% y negativo 70% luego giraremos y cambiaremos el grado de rotación a 225 grados. Ahora puedes ver que la flecha gira al hacer clic en el botón de alternar. Bien, sigamos adelante. Iré aquí y apuntaré la tarjeta cuando la tarjeta tenga una clase activa, agregaré altura, 420 pixeles. Ahora al hacer clic en el botón de alternar, se puede ver que la tarjeta se expande y su altura aumenta. Al volver a hacer clic, se encoge. Vamos a nuestro HTML dentro del auto, agregaré otro div con una clase de contenido dentro de él. Vamos a añadir otro div con una clase de cuadro de contenido. Dentro de eso, voy a añadir una H dos y decir Paul Smith. Luego agrega una etiqueta BR, luego un span, digamos Desarrollador creativo. Después volveré a mi CSS y apuntaré al div de contenido. Luego agrega posición, recuadro absoluto, desbordamiento oculto. Entonces por debajo de eso, apuntaré al cuadro de contenido div y agregaré posición relativa padding, 20 píxeles, texto align center, z index ten, display flex, justifique centro de contenido un centro de líneas de artículos. Entonces por debajo de eso, apuntaré a los dos. Después agregue color, peso de fuente blanco 500, tamaño de fuente 1.25 M. El texto transforma el espaciado entre letras mayúsculas 0.05 M, luego altura de línea 1.1 M. Luego por debajo de eso, apuntaré el lapso dentro de la H dos y agregaré tamaño de fuente 0.75 M, peso de fuente 400 Después el texto transforma mayúscula. Ahora puedes ver el texto aquí se ve mucho mejor. Bien, volvamos a nuestro HTML. Y debajo de la H dos, agregaré una nueva, le daré una clase de cuadro de imagen, luego volveré a nuestro CSS y apuntaré al cuadro de imagen. Después agregue posición anchura relativa, 250 píxeles de alto. Fondo de 250 pixeles blanco. Entonces para posicionar el contenido verticalmente, iré aquí arriba dentro del cuadro de contenido div y agregaré columna flex direction. Entonces voy a ir aquí y agregar margen top 20 pixeles. Entonces caja sombra negativa diez píxeles, diez píxeles, diez píxeles. Entonces este color luego finalmente bordea cinco píxeles, blanco sólido. Entonces voy a quitar este fondo. Entonces volvamos a nuestro HTML y dentro del cuadro de imagen div, agregaré una imagen y agregaré nuestra imagen. Después volveré a nuestro CSS y apuntaré a esta imagen. Después agrega posición, agrega soluto, top zero left zero width 100% height 100% then object fit cover. Ahora puedes ver la imagen aquí está mirando exactamente de la manera que queremos. Por último, agreguemos el botón en la parte inferior. Volveré a nuestro HTML y agregaré un botón, luego diré contratarme. Después volveré a nuestro CSS y apuntaré al botón. Después agrega margen relativo de posición, top 20 píxeles, relleno de diez píxeles y 35 píxeles. Entonces radio de borde 25 píxeles, n contorno puntero no cursor, tamaño de fuente uno M. Transformación de texto, espaciado entre letras mayúsculas, 0.1 M, peso de fuente 500 color color gris. Entonces agregaremos esta sombra de caja aquí. Ahora todos los que puedan ver tenemos este botón. Y al hacer eso, hemos creado este diseño genial. Espero que les guste esta lección y los veré en la siguiente. 121. Sin título: Hola a todos. otra nueva lección para ti en el curso. En esta lección, crearemos este genial efecto de animación de ruta de clip. Se puede ver que tenemos este encabezado grande en el centro de la página y estos dos círculos en las esquinas superior izquierda e inferior derecha. Cuando desplazamos la página, esos dos círculos se hacen más grandes hasta que cubren el encabezado. Lo genial es que las partes de la cabecera cubiertas por los círculos tienen este bonito trazo alrededor de ellos. A medida que nos desplazamos hacia arriba, el encabezado se vuelve blanco. Nuevamente, usaremos el script Java para cambiar el valor de la ruta del clip al desplazarse Empecemos a crear este efecto. Iré aquí en mi HTML y agregaré una sección. Entonces dentro de ella agregaré nuestro H dos y diré pergamino. Entonces debajo de él agregaré un div con una clase de círculo uno, otro div con una clase de círculo dos. Después iré a mi CSS y apuntaré al cuerpo y agregaré en altura 200 VH para tener una barra de desplazamiento, tal como se ve aquí Entonces por debajo de eso, apuntaré la sección y agregaré arriba cero izquierda, cero ancho, 100% altura, 100 H. Luego fondo este color gris oscuro. Ahora puedes ver que la sección tiene una altura de 100 VH. Pero cuando nos desplazamos, puedes ver nos desplazamos hacia la derecha por la sección. Pero queremos que se quede con nosotros incluso cuando nos desplazamos. Podemos hacer eso yendo a nuestro CSS y agregando posición fija. Ahora se puede ver por mucho que nos desplazemos, la sección se queda justo donde queremos que se fije en su posición. Volveré a mi CSS y apuntaré a los dos. Luego agrega posición absoluta arriba 50% Luego transformar Traducir negativo 50% ancho 100% texto, alinear centro color blanco. Entonces finalmente tamaño de fuente 18 EM. Ahora se puede ver que la H dos se ve mucho mejor. Bien, vamos a trabajar en los círculos. Ahora apuntaré al primer div con la clase de círculo. Después agrega posición ancho absoluto, 100 alto, 100% fondo. Este color verde. Ahora puedes ver tenemos este fondo verde que está cubriendo todo el cuerpo, ya que tiene un ancho y una altura del 100% Ahora queremos acortar este fondo verde para que la única parte que es visible sea el círculo en la esquina superior izquierda. Volveré aquí y agregaré círculo de trayectoria de clip 150 píxeles como radio. Después a 0.00 en el eje x y cero en el eje y, que eventualmente será la esquina superior izquierda. Así como así, todos los que puedan ver la parte visible del fondo verde es este círculo verde. Bien, rápidamente hagamos lo mismo para el círculo inferior derecho. Voy a copiar ese código, pegarlo y apuntar al círculo dos div. Entonces solo cambia el color de fondo a este color naranja. Y también cambiar la posición de la parte recortada al 100% y al 100% para que aparezca en la esquina inferior derecha Ahora puedes ver que tenemos este círculo naranja aquí en la esquina inferior derecha. Bien, ahora al desplazarnos por la página, queremos que esos círculos se hagan más grandes Vayamos a nuestro archivo script Java y hagamos eso. Comenzaré seleccionando el primer círculo. Entonces voy a decir, vamos círculo un documento igual, obtener selector de consultas. Y apuntaré al primer círculo que tenga una clase de círculo uno. Entonces duplicaré eso y apuntaré al segundo círculo esta vez. Entonces iré aquí y diré Ventana Agregar oyente de eventos. Entonces voy a escuchar el evento de pergamino. Entonces crearé una función de devolución de llamada dentro de ella. Voy a crear una nueva variable, nombrarla, valor de desplazamiento. Y voy a establecer eso igual al desplazamiento de ventana Y. Básicamente, este valor es la distancia desde la barra de desplazamiento hasta la parte superior de la ventana. A medida que nos desplazamos hacia abajo, este valor aumenta. Pero cuando nos desplazamos hacia arriba, disminuye. Es un valor variable y lo usaremos para cambiar el radio de los círculos Cuando nos desplazamos por la página, voy a ir aquí y decir círculo un estilo de ruta de clip igual. Después crearé un nuevo literal de plantilla para agregar el valor de la ruta de recorte. Entonces agregaré círculo. Después abre un bloque de código. Y 150 más el valor de desplazamiento variable multiplicado 0.75 píxeles a 0.0 Como pueden ver todos, el valor de ruta de clip del primer círculo al desplazarse por la página será de 150 píxeles, que es su valor inicial, más el valor de desplazamiento de la página multiplicado por 0.75 Como sabemos, el valor de desplazamiento de la página aumenta siempre y cuando nos desplazemos por la página Eso conducirá a un aumento general en el valor del radio del círculo. Vamos a probar eso. Como puedes ver, cuando nos desplazamos hacia abajo, aumenta y cuando nos desplazamos hacia arriba disminuye. Fresco. Realmente rápido. Hagamos lo mismo con el círculo naranja. Volveré aquí y copiaré este código. Pégalo y selecciona el segundo círculo. Entonces solo cambia la posición del círculo para que quede en la esquina inferior derecha al 100% y al 100% Ahora cuando regrese y me desplace por la página, puedes ver que el círculo naranja también se hace más grande. Bien, Ahora queremos hacer transparente la H bicolor y tener un trazo alrededor de las letras. Voy a ir a mi HTML y voy copiar y pegar la H dos dentro de los dos divs Después volveré a mi CSS y apuntaré la H dos dentro de la primera inmersión circular. Entonces apuntaré a la H dos dentro del segundo círculo div. Dentro de eso agregaré color, texto web transparente, cinco píxeles, y este color gris. Cuando vuelvo y me desplace hacia abajo, se puede ver una vez que los círculos se cruzan con los H dos, el H dos tiene este efecto que está sucediendo porque agregamos este trazo alrededor de los H dos dentro de los círculos El blanco H dos en el centro aquí es el que está fuera de los dos círculos. 122. Animación en scroll con javascript 1: Hola a todos. Bienvenido a otra nueva lección del curso. En este curso, vamos a crear una animación sobre el efecto scroll usando Javascript. Puedes ver que tenemos esta página web que contiene múltiples secciones. Al desplazarse por la página, se puede ver que tenemos un encabezado y un párrafo en cada sección que se anima en la página Una vez que llegamos al punto de esa sección también cuando paso la sección, su contenido vuelve a desaparecer. Una vez que me desplazo hacia arriba y paso, el contenido aparece una vez más. Esta es una forma muy común de animar elementos en un sitio web Aprendamos cómo podemos hacerlo. En primer lugar, puedes ver aquí en nuestro HTML que tenemos cinco secciones. Cada sección tiene una clase única sec uno, sec dos, sec tres, y así sucesivamente hasta la sec cinco. Como puedes ver, las secciones 1-4 tienen un contenido muy sencillo, solo una H dos y un párrafo. Y todos los encabezamientos y párrafos de cada sección tienen una clase de animación Entonces aquí, en la quinta sección, tenemos un div con una clase de imágenes. En su interior, tenemos tres imágenes. Cada imagen tiene una clase de animación, igual que los párrafos y los encabezados dentro de las otras secciones Entonces en nuestro CSS, tenemos algunos estilos básicos para que la página se vea mejor. Establecemos la altura mínima de cada sección a 100 VH para que ocupe toda la altura de la ventana gráfica También centramos el contenido y agregamos algunos estilos básicos como algunos colores de fondo y diferentes colores para cada sección. Tienes los archivos de recursos de esta lección. Descárgalos y echa un vistazo a esos estilos. Bien, ahora pongamos a trabajar en el efecto scroll. Iré a mi archivo script Java. Y antes que nada, apuntemos a todas las secciones. Entonces voy a crear una variable nombre It secciones. Después voy a establecer eso igual al selector de consultas de documentos. Todo voy a apuntar a las secciones. Entonces por debajo de eso voy a decir ventana scroll igual a voy a crear una nueva función. Esta función aquí se ejecutará cada vez que nos desplazemos por la página. Dentro de esa función, queremos recorrer todas las secciones una por una y afectarlas usando código Javascript. Diré secciones. Para cada bucle aquí voy a sec. Recorreremos las secciones. Cada sección será nombrada sec. Entonces crearé una función de devolución de llamada. Dentro de ella, voy a crear una nueva variable llamada scroll distance Set that equal to window scroll y. esta variable, todos, es la distancia desplazada Es la distancia desde la parte superior de la barra de desplazamiento hasta la parte superior de la página. Entonces debajo de eso crearé una nueva variable, nombraré sec distancia, y la estableceré igual a secsettp Esta propiedad de desfase superior es la distancia desde el borde exterior de las secciones, el borde superior de su padre, que es el cuerpo en este caso. Tomemos la segunda sección aquí como nuestro ejemplo. La parte superior desplazada de la segunda sección es la distancia desde el borde superior de la segunda sección hasta la parte superior de la página. En realidad, es igual a la altura de la primera sección. En cuanto a la tercera sección, la parte superior desplazada será igual a la altura de la primera y segunda secciones juntas. Bien, continuemos. Volvamos al navegador. Y lo que queremos hacer aquí a todos, es al desplazarse por la página, una vez que lleguemos a una, por ejemplo, la segunda sección aquí mismo, queremos agregar algunos estilos a esa sección que van a crear el efecto de animación que queramos Y cuando lo pasemos, se eliminarán estos estilos. Lo mismo ocurre con la tercera sección, justo aquí, y la cuarta, y así sucesivamente. Queremos usar las variables que creamos aquí para ayudar al navegador a detectar cuando golpeamos una clase específica. Luego agrega los estilos que queremos. Hagámoslo. Voy a ir aquí y decir si distancia de desplazamiento es mayor o igual a la distancia seg, diré clase sec, lista agregar. Voy a añadir una clase llamada Show Animate. Como puedes ver a todos, si la distancia desplazada es igual a la distancia desde la sección hasta la parte superior de la página Esta sentencia if se ejecutará, pero vayamos al navegador y veamos cuándo ocurre esta condición. La distancia de sección es un valor fijo, como dijimos para el segundo tramo, es igual a la altura de la primera sección. Nunca cambia a menos que cambiemos la altura de la primera sección. Mientras tanto, la distancia de desplazamiento es un valor cambiante. Cambia mientras desplazamos la página en algún momento cuando esos dos valores son exactamente iguales. Aquí es donde la condición si se vuelve verdadera. Eso sucederá cuando nos desplazemos hasta que el borde superior de la segunda sección toque el borde superior del navegador. En este caso, la distancia de desplazamiento es igual a la distancia desde la sección hasta la parte superior de la página. Inspeccionemos la página. Quiero que todos echen un vistazo de cerca aquí a la segunda sección. Se puede ver una vez que golpeo la parte superior de la segunda sección, la condición if se vuelve cierta. Y se agrega una nueva clase llamada show animate a la segunda sección Una vez que llegamos a la tercera sección, también se le agrega la clase. Eso le pasa a todas las secciones como puedes ver. Bien, esta es la idea principal, todos. Utilizaremos esta clase para diseñar las secciones. Volveré aquí en mis elementos CSS y objetivo con la clase de animate. Recuerden a todos, Todos los encabezados, párrafos e imágenes en nuestro HTML tienen una clase de animación Básicamente, todos los elementos tienen esta clase. Bien, volvamos a nuestro CSS. Y dentro del div animado, agregaré opacidad cero Filtra el desenfoque, cinco píxeles, luego la transición 0.5 segundos. Ahora puedes ver que todos los elementos están ocultos, ya que agregamos opacidad cero a todos ellos. Ahora cuando nos desplazamos a una sección, queremos hacerlos visibles nuevamente. Volveré a mi CSS y diré cuando la sección tenga una clase de show animate. Y como saben, esto sucede una vez que nos desplazamos a la sección. Voy a apuntar al div animado y agregar opacidad uno. Después filtra desenfoque cero píxeles. Ahora al volver atrás y desplazarte por la página, puedes ver una vez que llegamos a una sección, el contenido se desvanece y es visible Vamos a la parte superior de la página y recarguemos la página. Se puede ver cuando recargamos, el contenido de la primera sección es invisible Pero queremos que aparezca cuando recarguemos. No queremos esperar hasta que nos desplazemos por la página. Podemos hacerlo yendo a nuestro HTML y agregando una clase de show animate a la primera sección aquí Ahora cuando voy a recargar la página, se puede ver que el contenido es visible Ahora todos, podemos agregar algunos efectos diferentes a cada sección. Vamos a probar eso. Iré a mi CSS y apuntaré a la clase animada dentro de la segunda sección Después agregue transform translate x 100% Entonces rápidamente duplicaré eso. Cuando la segunda sección tenga una clase de show animate, voy a cambiar el translate x de nuevo a cero Vuelve a su posición. Ahora cuando voy y me desplace a la segunda sección, se pueden ver las diapositivas de contenido de derecha a izquierda. Gracias a la propiedad translate cambiamos. Bien, agreguemos más estilos a las otras secciones. Copiaré ese código, lo pegaré y apuntaré a la tercera sección aquí. Aquí. Entonces cambiaré la función translate a scale y agregaré un valor de 0.7 Entonces aquí agregaré escala uno a uno. Después pegaré eso otra vez y apuntaré a la cuarta sección. Entonces voy a poner rotar aquí a 30 grados, luego aquí de nuevo a cero grados. Después pegaré de nuevo el código y apuntaré a la quinta sección que contiene las imágenes. Deja traducir x como 100% aquí. Luego agrega rotar negativo 90 grados. Entonces vuelve a ponerla a cero grados aquí. Ahora cuando vuelvo a cargar y desplazarse por la página, puede ver cuando llegamos a una nueva sección, los elementos aparecen sin problemas, dándonos este efecto realmente genial Ahora este efecto es sutil y puedes usarlo de esta manera. Pero en la siguiente lección, veremos algunos trucos más simples que podemos agregar para que este efecto sea aún más dinámico. Pero por ahora, quiero que juegues y pruebes diferentes efectos de animación sobre los elementos. Prueba todos los diferentes efectos que hemos aprendido lo largo de este curso. Que se diviertan. 123. Animación en scroll usando javascript 2: En la última lección, creamos esta animación sobre el efecto de desplazamiento. Se puede ver que el contenido aparece muy bien mientras se desplaza hacia abajo. Pero como puedes ver cuando nos desplazamos hacia arriba, el contenido no está animado. Tiene los efectos de animación sólo una vez. Si inspeccionamos la página, puede ver al desplazarse por la página, se agrega la clase show animate Y una vez que se agrega, no se quita. Probemos algo en nuestro script Java. Voy a ir aquí y decir otra cosa, luego voy a copiar eso, pegarlo, y quitar la clase. Esta vez lo que esto hará es cuando la distancia desplazada sea menor que la distancia de sección, se eliminará la clase Eso sucede cuando nos desplazamos hacia arriba y pasamos la parte superior de la sección. Vamos al navegador y veamos que voy a inspeccionar la página. Y cuando me desplace hacia abajo, se puede ver que se agrega la clase. Y al desplazarse hacia arriba, se puede ver que se elimina la clase, se eliminan los elementos de la página Ahora bien, este es un efecto mucho más fresco. Bien, intentemos otra cosa. Simplemente agreguemos algo de retraso de transición a los párrafos para que aparezcan ligeramente después de los encabezamientos. Iré a mi CSS y seleccionaré el párrafo que tenga una clase de animate, que es básicamente todos los párrafos de la página Después agregaré retardo de transición 0.2 segundos. Ahora puedes ver cuando nos desplazamos por la página, los párrafos aparecen ligeramente después de los encabezados. También agreguemos algún retraso de transición a las imágenes para que aparezcan una tras otra. Iré a mi CSS y apuntaré la segunda imagen dentro de la quinta sección. A continuación, agregue retardo de transición 0.2 segundos. Después duplique este código y cambie el retardo de transición a 0.4 segundos. Ahora cuando regrese y me desplace por la quinta sección, se puede ver que las imágenes aparecen una tras otra, dándonos el efecto que queremos. Pero si notaste que los elementos no aparecen hasta llegar a la parte superior de la sección, será mucho mejor si podemos hacerlos aparecer un poco antes para que no tengamos que desplazarnos hasta el borde superior de la sección. Podemos hacerlo sumando la clase. Antes de llegar al borde superior de la sección, iré a mi Javascript. Vaya aquí y diga cuando la distancia de desplazamiento sea mayor o igual a la distancia de sección -150 se agregarán las Cs, la clase se agregará 150 píxeles por encima del borde superior de la sección Así como así todo el mundo se puede ver los elementos aparecen un poco antes. Y con eso, hemos terminado este ejemplo. Espero que te haya gustado y te aconsejo que intentes implementar lo que has aprendido en este ejemplo y lo utilices para crear tus propias ideas. 124. Animación de carreteras en modo nocturno con javascript: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear esta interesante animación vial. Se puede ver que tenemos esta escena que contiene un fondo, un sol, y dos autos que se mueven uno contra el otro. El fondo también es conmovedor, dándonos esta sensación realista. Si hacemos clic en el sol, puedes ver que se convierte en luna y la escena se vuelve oscura. Esto es básicamente un modo oscuro, y lo implementaremos usando Javascript. Creo que este es un ejemplo realmente genial, y espero que les guste. Empecemos aquí en nuestro HTML agregando una sección, dándole una clase de escena. Después dentro de ella, agregaré otro div, la clase de sol. Debajo de eso, agregaré otro con una clase de BG. En su interior, agregaremos las imágenes del auto. Voy a añadir la primera imagen y darle una clase de auto uno. Entonces por debajo de eso agregaré la segunda imagen y le daré una clase de auto dos. Estas imágenes las encontrarás en los archivos de recursos para esta lección. Ahora puedes ver que solo tenemos estas dos imágenes de autos de policía sentadas en nuestro cuerpo. Bien, vayamos a nuestro CSS y apuntemos a la sección de escena. Voy a añadir posición altura relativa, 100 VH desbordamiento oculto el gradiente lineal. Entonces agregaré este color azul claro. Después agregaré blanco y blanco. Ahora puedes ver que tenemos este bonito degradado desde un color azul claro en la parte superior hasta el blanco en la parte inferior, dándonos una escena cercana al cielo. Bien, trabajemos en la creación del Sol. Voy a apuntar al Div con la clase de sol. Agregar posición, ancho absoluto 100 pixeles, alto 100 pixeles fondo, radio de borde blanco 50% Entonces arriba 100 pixeles a la izquierda, 55% Ahora puedes ver tenemos este circulo blanco aqui sentado en la parte superior de nuestro cuerpo. Vayamos aquí y agreguemos transform, traduzcamos x negativo 50% para desplazarlo un poco hacia la izquierda. Después caja sombra 0050 píxeles como valor de desenfoque y blanco como su color Después transición 0.2 segundos. Por último, puntero del cursor. Ahora el sol consigue esta sombra borrosa. Vamos a trabajar en el fondo div. Voy a apuntar al div con la clase de B, G y agregar posición, ancho absoluto, 100% del div de escena. Entonces altura sólo 280 pixeles. Y para colocarlo en la parte inferior, voy a sumar el cero inferior. Después agregaré URL de fondo. Y voy a añadir esta imagen de fondo que puedes ver aquí. Lo encontrarás en los recursos para esta lección, puedes ver que tenemos este fondo aquí en la parte inferior con una altura de 280 pixeles. Regresemos y agreguemos tamaño de fondo 1,500 pixeles. Después fondo repita, repite. Ahora puedes ver que la imagen de fondo se ve mucho mejor. Bien, vamos a animarlo. Voy a crear una nueva animación. Nómbrelo, anima BG dentro de él. Al 0% agregaré posición de fondo x cero píxeles. Entonces al 100% voy a cambiar la posición de fondo x valor a negativo 1,500 píxeles. Para que la imagen se moviera hacia la izquierda. Entonces voy a subir aquí dentro del div BG y agregar animación animar G 25 segundos lineal, infinito Ahora se puede ver la posición del fondo a lo largo de la línea horizontal cambia, dándonos esta sensación de que la imagen se está moviendo. Bien, ahora vamos a trabajar en estilizar las imágenes del auto. Apuntaré al primer auto y agregaré 20 píxeles para desplazarlo un poco al ancho máximo superior 200 píxeles, luego índice z uno. Ahora se puede ver que el primer auto ahora es más pequeño y se posiciona en la esquina inferior izquierda de la carretera. También agregaré algunos estilos al segundo auto. Lo seleccionaré, agregaré posición, fondo absoluto. 50 pixeles para desplazarlo un poco por encima del primer auto. Entonces ancho máximo 200 píxeles también. Ahora se puede ver la segunda imagen también está sentada justo aquí en la esquina inferior de la carretera. Bien, volvamos y cambiemos sus posiciones. Queremos que aparezca el primer auto del lado izquierdo de la carretera. Volveré aquí y agregaré 200 píxeles negativos. Queremos que la segunda imagen aparezca del lado derecho. Voy a añadir negativo derecho 200 píxeles. Ahora se puede ver que los dos autos ya no son visibles ya que el primero se movió a la izquierda fuera de la carretera, y el segundo se movió a la derecha fuera de la carretera. Ahora vamos a crear la animación que los hará moverse en el camino. Voy a crear una nueva animación, ponerle nombre car one. Entonces al 0% de la duración de la animación, agregaré transform translate x zero pixels. Después al 90% y al 100% voy a añadir traducir x calc 100 V más 200 pixeles El primer auto se moverá de la izquierda todo el camino a la derecha hasta cruzar la carretera y salir de la carretera. Voy a subir aquí dentro del primer auto y agregar animación auto uno, 18 segundos lineal, infinito. Ahora se puede ver que el primer carro viene de la izquierda, fuera de la carretera, se mueve por el camino hasta que cruza la carretera. Rápidamente hagamos lo mismo para el segundo auto. Voy a copiar esa animación, pegarla y cambiar el nombre de la animación a auto dos. Entonces dejaré el valor de traducir tal como está, pero agregaré rotar y 180 grados para que la imagen sea girada 180 grados a lo largo de su eje y. Es decir, se volteará verticalmente. Entonces aquí voy a cambiar el valor de traducir x a negativo 100 VW -200 pixeles Se moverá desde el lado derecho todo el camino a lo largo de la carretera hacia el lado izquierdo, luego cruzará también el lado izquierdo. Iré aquí dentro del segundo auto y agregaré animación. Auto dos, 12 segundos lineal, infinito. Ahora se puede ver que el segundo auto viene del lado derecho y se mueve todo el camino hacia el lado izquierdo. Y ambos autos se encuentran en medio de la carretera, dándonos este efecto realmente genial. Ahora es el momento de trabajar en cambiar la escena al modo nocturno. Al hacer clic en el buceo de sol, tog por debajo de la clase que creará el modo noche Iré al archivo Javascript, crearé una nueva variable, nombraré Sun y agregaré el selector de consultas de documentos. Y selecciona el div con la clase de Sun. Entonces duplicaré eso y apuntaré a la sección de escena. Debajo de eso diré Sun Add Event oyente. Voy a escuchar el evento click. Después agregaré una función de devolución de llamada que se ejecutará cada vez que hagamos clic en el Sol Entonces dentro de eso voy a decir Sun class List Toggle. Y agregaré una clase llamada Noche. Ahora si inspecciono la página y empiezo a hacer clic en el Sol, puedes ver que la clase nocturna se agrega y se elimina cada vez que hacemos clic en el div Sol. Bien, ahora vamos a nuestro CSS y comencemos cambiar los estilos de la página en base a esta clase. Iré aquí y apuntaré a la sección de escena. Entonces cuando la sección de escena tenga una clase de noche en su interior eso agregaré fondo, este color azul marino oscuro. Ahora cuando regrese y haga clic en el Sol, pueden ver los cambios de color de fondo a este color Navy. Bien, volvamos y dupliquemos el objetivo selector, el sol. Después agrega izquierda 45% en vez de 55% se mueve un poco hacia la izquierda. Entonces queremos quitar la sombra de caja que tiene. Entonces pondré todos sus valores a cero. Ahora se puede ver al hacer clic en el Sol, éste se mueve hacia la izquierda y se elimina la sombra en la parte inferior. Bien, ahora queremos convertirlo en forma de Luna. Duplicaré este selector una vez más. Entonces apunta al pseudo elemento antes del div sol y agrega contenido cadenas vacías posiciona absoluto top negativo 20 píxeles para desplazarlo un poco hacia arriba, luego dejó 20 píxeles para desplazarlo hacia la izquierda Después agregaré con 100% de altura, 100% el fondo, un fondo rojo temporal. Entonces finalmente radio de borde 50% Ahora cuando regrese y haga clic en el Sol, verá que tenemos este círculo rojo que cubre una gran parte del sol. Si cambiamos el color de este círculo rojo al mismo color que el fondo, obtendremos la forma de luna. Voy a volver y rápidamente hacer eso. Y ahora al hacer clic en el buceo al sol, puedes ver a todos. Se convierte en forma de luna y toda la escena se convierte en una escena nocturna, dándonos el efecto exacto que queremos. 125. Banner animado de un sitio web con javascript: Hola a todos, bienvenidos a otra nueva lección de nuestro curso. En esta lección, vamos a crear este efecto. Se puede ver que tenemos algún texto grande que está flotando en la página dentro este círculo que la rodea. En el fondo, tenemos esta enorme cantidad de estrellas que están brillando y moviéndose lentamente, dándonos este efecto realmente genial. Crearemos esas estrellas automáticamente usando Javascript. Empecemos dentro de mi HTML. Voy a añadir una sección, después dentro de ella voy a añadir una H dos y dar la bienvenida a nuestro. Después agregaré una etiqueta BR, luego un span y diré. Después iré a mi CSS, Target la sección y agregaré Display, Flex, Justifique, Content Center, Alinear elementos, altura central, fondo 100 VH, este color marino. Entonces para crear el círculo alrededor del texto, usaremos el pseudo elemento B four de esta sección Seleccionaré eso y agregaré contenido cadenas vacías, posición absoluta con 30 VW de altura, 30 V también. Después bordea cinco, B sólido. Este color naranja. Entonces radio de borde 50% Ahora puedes ver que tenemos este círculo naranja en el centro. Agreguemos el anillo blanco a su alrededor. Agregaré box shadow 0001v como propiedad de propagación, luego el mismo color azul marino que el fondo Entonces duplicaré eso y cambiaré el spread a 1.3 V, luego cambiaré el color a blanco. Y ahora se puede ver que tenemos este anillo blanco rodeando el círculo naranja. Bien, agreguemos algunos estilos al encabezado. Ahora lo seleccionaré y agregaré posición absoluta tamaño de fuente ocho, color blanco peso de fuente 400. Después texto una línea centro, altura de línea dos, E M, z índice cinco, transformar sesgo y negativo siete grados. Ahora puedes ver que tenemos el texto centrado y sesgado un poco en el eje y Entonces para tener la forma de texto que queremos, necesitaremos agregar alguna sombra de texto. Entonces agregaré sombra de texto. Este valor, si nos fijamos en este valor, es simplemente aumentar gradualmente los valores de sombra de texto de un píxel a cinco píxeles con este color gris claro. Y como pueden ver, se ve mucho mejor. Bien, vamos a darle estilo al span, que es la palabra sitio. Lo apuntaré, luego agregaré el peso de la fuente 700 para que sea más audaz Entonces tamaño de fuente tres, M. Finalmente sombra de texto, este valor que contiene un aumento en el valor de sombra se dividió en diez incrementos de un píxel a diez píxeles Eso son diez aumentos. Ahora se puede ver que la H dos se ve exactamente de la manera que queremos. Ahora es el momento de crear la animación flotante de la H dos. Voy a crear una nueva animación. Flotando en su interior al 0% y al 100% voy a añadir transformar sesgo negativo siete grados como es Después traduzco y negativo 20 pixeles, voy a duplicar eso. Y al 50% voy a cambiar traducir a 20 pixeles. Entonces iré hasta aquí y agregaré animación flotante 5 segundos, facilidad hacia fuera infinita. Ahora puedes ver que el texto está animado de arriba a abajo y moviéndose exactamente de la manera que queramos. Bien, ahora es el momento de crear las estrellas de fondo. Lo haremos usando Javascript. Voy a ir allí y antes que nada, voy a apuntar a la sección diciendo let section equal document query selector section. Entonces por debajo de eso crearé una nueva variable llamada J y la pondremos igual a cero. Entonces voy a crear un bucle while y decir mientras j es menor que 200. Dentro del bucle, crearemos las estrellas. Empezaré por crear una nueva variable llamada estrella, y diré documento. Crear elemento, acabamos de crear una etiqueta. Después crearemos algunas variables que usaremos más adelante. Para darle estilo a las estrellas, crearé una variable llamada x y la estableceré igual a matemáticas piso matemáticas punto aleatorio veces ancho de ventana. Ventana en ancho aquí devuelve el ancho interior de la ventana en píxeles. Entonces tomamos este valor y lo multiplicamos por el resultado del método aleatorio matemático. Que devuelve un número mayor o igual a cero, menor que uno. Entonces tomamos el resultado de eso y lo redondeamos a un entero. Usando el método del piso, usaremos cualquier valor que obtengamos de aquí para posicionar las estrellas. Diré estilo estrella izquierda igual a x píxeles. Usaremos el valor x para posicionar las estrellas a la izquierda. Entonces duplicaré esas dos líneas de código. Cambia el nombre de la variable a y, luego cambia la ventana de ancho a alto interior para obtener un valor basado en la altura de la ventana. Entonces aquí voy a cambiar de izquierda a arriba y x a y Entonces vamos a crear el ancho y alto de las estrellas. Voy a crear una nueva variable, le nombraré tamaño y estableceré igual a punto matemático aleatorio multiplicado por cuatro. Entonces usaremos ese tamaño para establecer el ancho y alto de las estrellas. Diré estilo de punto estrella, ancho de punto, uno más píxeles de tamaño. Observe que debemos agregar uno aquí porque el valor de tamaño en realidad puede ser cero. Dado que las matemáticas aleatorias aquí pueden devolver un 0.0 veces cuatro es cero. El tamaño en este caso será cero y el ancho será cero. Eso no es bueno. Para evitar esta situación, necesitamos agregar uno aquí. Genial, duplicaré eso y cambiaré el ancho a alto. Ahora que hemos establecido el posicionamiento y las dimensiones de las estrellas, vamos a añadirlas a nuestra sección Voy a ir aquí y decir sección anexar niño. Y añadiremos el elemento estrella. Entonces al final del bucle, diremos J plus, para que el bucle continúe creando elementos hasta que j aquí sea igual a 200, lo que a su vez creará 200 elementos. Ahora bien, si vamos e inspeccionamos nuestra página y apuntamos a la sección, puedes ver dentro de ella, tenemos todas estas etiquetas oculares que creamos. En realidad hay 200 de ellos y todos tienen estilos aleatorios como puedes ver. Bien, para poder verlas en la página, vayamos a nuestro CSS y empecemos a peinarlas. Seleccionaré las etiquetas oculares dentro la sección y agregaré posición. Fondo absoluto, radio de borde blanco 50% Ahora puedes ver que las estrellas son visibles ahora. Bien, usemos la propiedad de sombra de caja para hacerlos brillar. Agregaré sombra de caja, luego agregaré este valor en el que el valor de desenfoque aumenta gradualmente. Ahora se puede ver que las estrellas brillan. Bien, ahora vamos a trabajar en el efecto de animación de las estrellas. Voy a crear un nuevo nombre de animación que protagoniza. Después dentro de ella, al 0% de la duración de la animación, agregaré opacidad cero Después al 10% voy a agregar opacidad uno. Entonces duplicaré eso. Al 90% voy a dejar la opacidad tal como está. Entonces al 100% lo volveré a cambiar a cero. Entonces iré hasta aquí y agregaré estrellas de animación. Lineal, infinito. Como puedes ver, no pasó nada porque no fijamos una duración de animación. Hagámoslo usando Javascript para obtener valores aleatorios para cada estrella. Iré aquí dentro del archivo Javascript y crearé una nueva variable, nombra duración. Y lo pondremos igual a matemáticas aleatorias veces dos. Entonces por debajo de eso, agregaré duración de animación de estilo estrella igual a duración de un segundo. Así como así todos los que puedas ver las estrellas están ahora animados, ya que aquí establecemos una duración aleatoria de animación para cada una de ellas. 126. animación de navegación en la pestaña de javascript: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear esta sencilla pestaña de navegación. Se puede ver que tenemos este círculo que tiene este signo más dentro de él. Al hacer clic sobre él, gira hasta que el signo más se convierte en un signo x. Además, aparece esta sencilla navegación horizontal. Observe que la navegación aparece en dos pasos. Primero, esta parte circular se mueve hacia abajo por debajo del círculo. Después se expande y se convierte en el menú de navegación. Al volver a hacer clic, el menú se contrae primero. Entonces la parte circular se mueve hacia arriba y desaparece. También, tenemos aquí este espacio que separa el círculo y la navegación. Aprenderemos a crear eso. Esto probablemente parezca un ejemplo sencillo, pero créanme, tiene algunos trucos realmente geniales. Empecemos a crearlo. Iré aquí en mi HTML y agregaré un, le daré una clase de navegación. Después dentro de él agregaré otro div con una clase de toggle. Después iré a mi CSS y apuntaré al div de navegación. Entonces sólo voy a añadir posición relativa. Entonces por debajo de eso apuntaré a la clase toggle y agregaré la posición de ancho relativo, 75 pixeles. 75 píxeles también. Fondo este color rosa. Luego puntero del cursor, luego vamos a crear el icono más dentro usando el pseudo elemento before Lo apuntaré y agregaré contenido. El signo más luego posiciona tamaño de fuente absoluto tres, EM color blanco. Después transición 1.5 segundos. Ahora se puede ver que teníamos este signo más. Bien, para centrarlo, iré aquí dentro del tundlativo y agregaré display, Flex, justify, content center, una línea, items center, así como así Se puede ver que está centrada. Ahora al hacer clic en este div, queremos que gire hasta que el signo más se convierta en una x como siempre. Lo haremos alternando una clase al hacer clic en el toggle y darle estilo basado en esa clase Iré a mi archivo script Java y crearé una nueva variable, nombra toggle. Entonces rápidamente apuntaré al div con la clase de togle Entonces por debajo de eso voy a decir toggle add event listener. Entonces voy a crear una función de devolución de llamada Dentro de ella, diré toggle class list, Toggle y una clase llamada Active Ahora cada vez que hago clic en el toggle div, aquí puedes ver que se agrega una clase llamada active y luego se elimina de la inmersión toggle. Bien, entonces volveré a mi objetivo CSS, el Toggle Div. Cuando contiene una clase llamada active, seleccionaré el pseudo elemento B fore, que es el signo más Voy a añadir transformar rotar 225 grados. Ahora cuando voy y hago clic en el toggle di, puedes ver que el signo más gira y se convierte en una x ya que ahora se agrega la clase activa. Entonces al volver a hacer clic, se elimina la clase activa y de ahí que el código aquí no funcione. Por eso la x vuelve a girar a un signo más. Bien, trabajemos en el menú que aparece al hacer clic en la inmersión de alternar. Voy a ir a mi HTML y debajo del toggle div, voy a añadir otro div con una clase de menú. Ahora tenemos dos divs dentro del div de navegación. Después iré a mi CSS y seleccionaré el menú div. A continuación, agregue ancho 60 píxeles. Altura 60 píxeles también. Después fondo blanco. Ahora puedes ver que tenemos este fondo blanco. Ahora subiré aquí dentro del div de navegación y agregaré display Flex, Justify Content Center, Align Items Center. Ahora puedes ver que están sentados uno al lado del otro. Queremos posicionar el fondo blanco relativo al piquín Ya que el pinkue tiene un valor de posición de relativo, iré aquí dentro del menú y agregaré posición absoluta Y como puedes ver, ahora está posicionada con relación al fondo rosa. Bien, también agregaré radio de borde 50% Luego agregaré transform translate y negative 30 pixels para desplazarlo a la parte superior. Entonces voy a subir aquí dentro de la palanca, bucear y agregar radio de borde 70 pixeles. Después transformar traducir Y negativo 30 píxeles también. Para que el círculo rosado aparezca encima del blanco, agregaré el índice z diez. Bien. Ahora al hacer clic en la inmersión de alternar, queremos volver a mostrar el menú. Iré aquí y apuntaré al toggle div cuando tenga una clase activa. Seleccionaré el menú de buceo usando este selector que selecciona los hermanos de los elementos HTML. Entonces dentro de eso agregaré ancho 360 píxeles, 70 píxeles. Después transforma traducir Y cero para que vuelva a su posición. Ahora cuando hago clic en el toggle div, puedes ver que el menú aparece aquí con este nuevo ancho y alto. Bien, queremos que el menú aparezca sin problemas. Volveré aquí dentro del menu div y agregaré transition transform 0.5 segundos. Con 0.5 segundos luego altura 0.5 segundos también. Quizás se esté preguntando por qué no solo usamos 0.5 segundos para todas las propiedades. Pero hicimos lo que hicimos para facilitarnos el control del retraso de transición de cada propiedad para ayudarnos a crear nuestro efecto. Para entender eso, iré aquí y agregaré retardo de transición 0 segundos para la propiedad transform. Esta línea aquí ocurrirá inmediatamente al hacer clic en el toggle di. Después 0.5 segundos para la propiedad de ancho y 0.5 segundos para la altura también. Ahora cuando voy y hago clic en la inmersión de maraña, puedes ver primero que el círculo se mueve hacia abajo Entonces su anchura y altura se hacen más grandes al mismo tiempo, dándonos el efecto que queremos. Pero al volver a hacer clic, todo se derrumba al mismo tiempo Podemos dejarlo como está, o podemos agregar algunos retrasos en la transición para que sea más agradable. Vamos a probar eso. Iré aquí dentro del menú div y agregaré retardo de transición 1 segundo para la transformación, luego 0.5 segundos para el ancho y alto. Cuando se elimina la clase activa, se aplicará esta propiedad de retardo de transición. El ancho y la altura esperarán 0.5 segundos antes de encogerse, entonces la transformación ocurrirá después de eso, tal como se puede ver aquí Ahora queremos crear la parte que separa la inmersión Toggle y el menú. Subiré aquí dentro de la inmersión Toggle y agregaré borde diez píxeles sólidos y del mismo color que el cuerpo. Ahora puedes ver que las dos partes están separadas usando este borde. Bien, ahora agreguemos los iconos que deberían aparecer en el menú. Iré al sitio web de Ion icons que usamos en una lección anterior, luego haré clic en Uso. Ven aquí y copia este código. Después pegarlo en mi HTML antes del final de la etiqueta body. Después dentro del menu div, agregaré una U, L, luego una L I dentro de él, y agregaré estilo I igual a 0.1 segundos. Usaremos esta variable en la propiedad de retardo de transición, luego agregaré una etiqueta de anclaje. Entonces lo duplicaré cinco veces. Voy a hacer el tercer LI uno. Solo lo necesitaremos para propósitos de estilo. También cambiaré la variable a 0.2 segundos en el segundo LI y también en el cuarto LI. Después iré al sitio web de íconos y buscaré casa, copiaré su código. Vuelve atrás y pegarlo aquí dentro de la primera etiqueta de anclaje. Después haré una pausa en la grabación y agregaré rápidamente los otros íconos. Ahora puedes ver que hemos agregado los otros íconos y están aquí en el navegador. Bien, vamos a nuestro CSS y seleccionemos la UL dentro del menú. Agregar posición, visualización relativa, flexionar, justificar centro de contenido un centro de líneas de artículos luego brecha 35 píxeles. Por último, altura de línea 80 píxeles. Entonces por debajo de eso seleccionaré la L I dentro la UL y agregaré estilo de lista no cursor puntero transformar traducir Y negativo 30 píxeles. Después voy a añadir transición 0.25 segundos, luego opacidad cero y finalmente retardo de transición var I. Luego por debajo de eso voy a decir cuando el toggle div tiene una clase de active o en otras palabras, cuando hacemos clic en el toggle div, los seleccionaré en, luego seleccionaré los elementos de la lista Entonces dentro de eso agregaré opacidad una transformada, traduciré Y cero píxeles Como puedes ver, al hacer clic en el toggle div, los iconos aparecen aquí, pero queremos que aparezcan solo después de que aparezca el menú. Volveré aquí y agregaré retardo de transición, calc 0.75 segundos más la variable Se retrasará un poco, tal como se ve aquí. Bien, vamos a darle estilo a esos íconos muy rápido. Primero, queremos agregar algo de espaciado aquí en el centro. Seleccionaré el tercer hijo de los elementos de la lista que hicimos vacíos. Después agregaré ancho 30 pixeles. Entonces debajo de eso apuntaré las etiquetas de anclaje dentro del LI y agregaré el tamaño de fuente del bloque de visualización 1.7 EM, decoración de texto n, y finalmente colocaré este color gris por debajo de eso. Al pasar el cursor sobre el LI, seleccionaré la etiqueta de anclaje y agregaré color nuestro color rosa Ahora puedes ver que los íconos se ven mucho mejor y al pasar el cursor sobre su color cambia a rosa Con eso, todos, hemos terminado este efecto genial. Espero que aprendas algunos consejos geniales de esto, y te veré en el próximo. 127. mover una imagen de fondo en scroll usando javascript: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este efecto. Se puede ver que tenemos este contenido en el centro y este fondo. Cuando nos desplazamos por la página, se puede ver que el fondo se mueve de izquierda a derecha. Al desplazarse hacia arriba, retrocede de derecha a izquierda. Este es un efecto muy chulo que puedes usar en tus proyectos. Veamos cómo podemos hacerlo. Comenzaré aquí en mi HTML y agregaré un div. Dale una clase de BG. Entonces por debajo de eso, agregaré otro div con una clase de contenido. Después dentro de ella agregaré una H dos, digamos Fondo, moviéndose sobre scroll. Entonces por debajo de eso, agregaré un párrafo y agregaré este texto. Después iré a mi CSS y apuntaré al Div con la clase de BG. Después agrega posición fija, luego arriba cero izquierda, cero ancho, 100% alto, 100% URL de fondo. Después agregaremos la imagen del patrón. Después voy a añadir vuelta repetición redonda. Repita el tamaño del fondo, 700 píxeles. Ahora puedes ver que la imagen de fondo se ve exactamente como queremos que lo haga. Entonces apuntaré al div con la clase de contenido y agregaré posición anchura relativa 1,000 píxeles. Luego margen 100 píxeles desde arriba e abajo, y auto desde izquierda y derecha. Después agregaré índice z uno, relleno blanco de fondo, 50 pixeles. Entonces box shadow 010 pixels, 30 pixels, R Gb00 00.1 Bien, Entonces apuntaré a la H dos dentro del div de contenido y agregaré tamaño de fuente dos M, luego marcharé los 20 pixeles superiores Entonces apuntaré a los párrafos dentro del div de contenido y agregaré tamaño de fuente 1.2 M, altura de línea 1.6 M. Muy bien, vamos al archivo Javascript y comencemos creando una nueva variable, denombrarle patrón y apuntar al BG div dentro de nuestro HTML. Entonces por debajo de eso voy a decir ventana. Agregar oyente de eventos. Y voy a escuchar el evento de pergamino. Entonces voy a crear una función de devolución de llamada. Dentro de eso, voy a decir patrón estilo fondo posición y establecer que igual a ventana scroll y píxeles. Lo que eso hará es cuando nos desplazemos por la página, la propiedad de posición de fondo aumentará un valor igual a la distancia scroll y. Vamos a probar eso. Se puede ver al desplazarse por la página, la imagen de fondo se mueve mientras nos desplazamos, y cuando nos desplazamos hacia arriba se mueve en la dirección inversa 128. Efecto de desplazamiento de texto de desenfoque y enfoque: Hola a todos. Bienvenidos a otra nueva lección del curso. En esta lección, vamos a crear este bonito efecto. Se puede ver que tenemos este rumbo en el centro y un fondo borroso en la parte posterior. Al pasar el cursor sobre el rumbo, ocurre este efecto. El encabezado se hace más grande y se vuelve borroso, mientras que el fondo retrocede y se vuelve claro Cuando nos alejamos, el encabezado vuelve a enfocarse mientras el fondo vuelve a su estado borroso Este es un efecto realmente genial y realmente simple. Veamos cómo podemos crearlo. Iré aquí en mi HTML y agregaré una sección. Después dentro de ella voy a añadir una H dos y decir enfoque. Entonces por debajo de eso voy a agregar una imagen. Solo agrega nuestra imagen. Eso es todo para el HTML. Vamos a nuestro CSS y apuntemos la sección, la posición de agregar, ancho relativo, 100% altura, 100 VH para ocupar toda la altura del cuerpo. Luego mostrar Flex, justificar, Centro de contenido, Alinear elementos. Entonces finalmente desbordamiento oculto. Entonces apuntaré a la imagen y agregaré posición, ancho absoluto 140% alto 140% el superior negativo 20% e izquierdo negativo 20% también Entonces para tener este efecto borroso en la imagen, agregaremos desenfoque de filtro, diez píxeles Entonces finalmente, agregaré transición 2 segundos. Ahora puedes ver que la imagen está borrosa, tal como queremos. Bien, volvamos y apuntemos a los dos. Luego agrega color relativo de posición. Fuente blanca tamaño diez, texto EM transforma mayúsculas, luego sombra de texto 05 píxeles, 25 píxeles, luego este color. Entonces por debajo de eso, agregaré el peso de la fuente 800 para que el encabezado aparezca frente a la imagen. Vamos a añadir el índice z dos. Por último, transicion 2 segundos, Ahora puedes ver que tenemos nuestro rumbo. Bien, vamos a trabajar en el efecto flotando del rumbo. Diré al pasar el cursor sobre el encabezado, agregaré desenfoque de filtro, diez píxeles Entonces por debajo de eso voy a agregar transform scale 1.2 Ahora puede ver cuando pase el cursor sobre este encabezado, este efecto sucede Se hace más grande y borrosa gracias al código, lo agregamos aquí Después de terminar el encabezado, vamos a crear el efecto de flotar de la imagen de fondo Diré al pasar el cursor sobre la imagen, seleccionaré la imagen usando este selector, lo que nos hace seleccionar a los hermanos de nuestro elemento En este caso, la imagen es un hermano de la H dos. Entonces dentro de eso voy a agregar top zero, left zero width 100% height 100% then finally filter blur zero pixels. Y ahora se puede ver cuando vamos y pasamos el cursor sobre el encabezado, la imagen se hace más pequeña ya que reducimos su altura y ancho de 140% a 100% Además, el efecto borroso se ha ido ya que lo cambiamos a cero en lugar de Eso sucede junto con el efecto de rumbo, dándonos el efecto exacto que íbamos por. 129. Enfoque de texto y efecto de desenfoque: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este efecto de texto genial. Se puede ver que tenemos este texto que es borroso. Cuando pasamos el cursor sobre cualquier letra de la palabra, la letra entra en foco y la podemos ver claramente Además, tenemos estos cuatro bordes alrededor de las letras que aparecen al flotar y desaparecen al flotar lejos. Empecemos y veamos cómo podemos crear este efecto. Iré aquí en mi HTML y agregaré una H dos. Después dentro de él, agregaré un span, una etiqueta dentro de ese lapso. Usaremos esa etiqueta para crear los cuatro bordes alrededor de cada letra. Después agregaré la primera letra. Después copiaré y pegaré eso cuatro veces y cambiaré las letras para formar la palabra foco. Después iré a mi CSS y apuntaré al cuerpo. Después agregue Display Flex, Justificar, contenido, Alinear elementos al centro en altura 100 VH. Después agregaré gradiente lineal de fondo 45 grados, este color azul a este color amarillo. Ahora puedes ver que teníamos este color degradado fresco. Entonces por debajo de eso apuntaré a la H dos y agregaré posición relativa display flex gap 15 pixeles con el fin de separar las letras por 15 pixeles. Después color blanco tamaño de fuente cuatro, E, M, puntero del cursor. Entonces finalmente el texto transforma mayúsculas. Entonces por debajo de eso, apuntaré los vanos dentro de la H dos y agregaré posición relativa Ahora vamos a crear los cuatro bordes alrededor de las letras. Lo haremos usando el elemento dentro de los vanos. Voy a apuntar a los cuatro pseudo elementos del add content. Cadenas vacías, posición absoluta w, dos pixeles altura ocho pixeles, fondo blanco. Ahora puedes ver que tenemos esta pequeña línea blanca en la esquina superior izquierda de cada letra. Sigamos adelante. Volveré y sumaré a cero, dejaré cinco píxeles negativos. Ahora después de crear la línea vertical, vamos a crear la línea horizontal. Seleccionaré el pseudo elemento after del elemento y agregaré contenido cadenas vacías posición absoluta con ocho pixeles altura dos pixeles fondo blanco Después agregaré cero superior a la izquierda, cinco píxeles negativos. Ahora puedes ver que tenemos esta línea horizontal. Al hacer eso, hemos creado la esquina superior izquierda. Ahora vamos a crear las otras tres esquinas. Lo haremos duplicando este borde superior izquierdo usando la propiedad box shadow Iré aquí dentro del pseudo elemento antes y agregaré caja sombra cero como valor horizontal, 53 píxeles como valor vertical, y blanco Ahora puedes ver que tenemos esta línea vertical en la esquina inferior izquierda. Vamos a crear su línea vertical. Voy a copiar eso. Pégalo aquí y cambie 53 píxeles a 60 píxeles. Y ahora se puede ver que hemos duplicado el borde en la esquina superior izquierda a la esquina inferior izquierda. Bien, rápidamente agregaré los otros valores de sombra de caja. Iré aquí y agregaré 37 píxeles como valor horizontal, 53 píxeles como valor vertical, y blanco. Entonces aquí agregaré 30 píxeles como valor horizontal y 60 píxeles como el valor vertical, blanco. Ahora puedes ver que tenemos el borde en la esquina inferior derecha. También agreguemos el borde final en la esquina superior derecha. Iré aquí y agregaré 36 píxeles como valor horizontal, cero como valor vertical, y blanco. Entonces abajo aquí, y agregue 30 píxeles como valor horizontal, luego cero como valor vertical, y blanco. Ahora puedes ver que las cuatro fronteras se ven exactamente de la manera que queremos. Creamos todos ellos usando la propiedad box shadow. Vamos a crear el efecto de flotación. Ahora. Iré aquí y agregaré opacidad aquí también Entonces iré aquí y diré al flotar sobre los vanos, seleccionaré el pseudo elemento antes del elemento También haré lo mismo para el pseudo elemento after y agregaré opacidad uno Ahora puedes ver que los cuatro bordes están ahora ocultos, y cuando pasamos el cursor sobre cualquier letra, puedes ver que vuelven a aparecer Ahora vamos a trabajar en el efecto de desenfoque. Iré aquí dentro de los vanos y agregaré desenfoque de filtro, cinco píxeles Entonces por debajo de eso voy a decir al pasar el cursor sobre los vanos y agregar filtro desenfoque cero Ahora cuando voy y vuelvo el cursor sobre cualquier letra, se puede ver que la letra sobre la que pasamos el cursor entra en foco y se vuelve muy clara Por último, agreguemos algunas transiciones. Voy a ir aquí dentro de los vanos y agregar transición 0.5 segundos. Entonces aquí al pasar el rato, agregaré transición 0 segundos, para que la transición ocurra solo cuando se aleje de las letras, no cuando se cierne sobre ella, como se ve aquí Eso es todo, a todos los que puedas ver, hemos creado este efecto realmente simple, pero muy genial. 130. Efecto de animación de glassmorfismo creativo: Hola a todos, bienvenidos a otra nueva lección del curso. En esta lección, vamos a crear esta genial animación de morfismo de vidrio Se puede ver que teníamos este círculo semitransparente en el centro. Tenemos un cuadrado rojo y un círculo blanco que se mueven a través del círculo semitransparente. Si nos enfocamos solo en el círculo blanco aquí, puedes ver que se mueve de izquierda a derecha detrás del círculo semitransparente y se vuelve borroso mientras cruza el círculo Al retroceder de derecha a izquierda, se mueve frente al círculo semitransparente y vuelve a ser visible. Eso también le pasa al cuadrado rojo. Pero el momento es diferente. Este es un ejemplo realmente genial. Empecemos a crearlo. Voy a ir aquí dentro de mi HTML y añadir un Di y darle una clase de cargador. Después dentro de ella agregaré tres vanos. Utilizaremos estos vanos para crear las tres formas diferentes en nuestro efecto Después iré a mi CSS y seleccionaré el Body Add, Display, Flex, Justifique, content center, Alinear items, center in height, 100 VH, el fondo, este color azul marino oscuro. Entonces por debajo de eso, seleccionaré la inmersión del cargador que contiene los tres vanos y agregaré posición de ancho relativo, 150 píxeles Altura 150 pixeles. Después un color de fondo rojo temporal. Ahora puedes ver que tenemos esta plaza roja sentada en el centro de la ventana. Bien, volvamos y seleccionemos los vanos dentro del cargador Bucear y agregar posición absoluta con el fin de posicionarlos en relación con el div cargador. El ancho 100% altura 100% ocupa todo el ancho y altura de la inmersión cargadora. Después un color de fondo azul temporal. Ahora puedes ver que tenemos este cuadrado azul que está tapando el rojo. En realidad, estos son tres cuadrados azules. No uno, sino que están apilados uno encima del otro. Entonces volveré aquí y agregaré radio de borde 50% para hacer de estos tres vanos un círculo como ves ahora Bien, ahora vamos a trabajar en el círculo semitransparente en el centro. Seleccionaré al primer hijo de los vanos y agregaré fondo, este color semitransparente, para poder verlo con claridad Voy a subir aquí y quitar este fondo azul, este fondo rojo. Ahora puedes ver que tenemos este círculo semitransparente. Bien, trabajemos en el cuadrado rojo que se mueve a través del círculo semitransparente. Ahora lo crearemos usando el segundo span dentro del div loader. Voy a apuntar eso y agregar fondo, nuestro color rojo, luego borde radio cero para hacer un cuadrado. Nuevamente, ya que hicimos todos los círculos de span agregando radio de borde 50% aquí dentro del selector de span. Ahora puedes ver que tenemos este cuadrado rojo que está cubriendo el círculo semitransparente. Bien, vamos a crear el efecto de morfismo de vidrio para el círculo semitransparente Voy a subir aquí y añadir filtro de fondo desenfoque, diez píxeles, luego z índice dos que cubra el fondo rojo con el fin de ver el efecto claramente voy a ir aquí dentro del fondo rojo y añadir transformar traducir negativo 50 píxeles y negativos 50 píxeles. Ahora se puede ver que la parte del cuadrado rojo que está detrás del círculo está borrosa y el círculo ahora tiene forma de morfismo de vidrio Bien, volvamos y quitemos eso. Entonces trabajemos en el efecto de animación del cuadrado rojo. Voy a crear una nueva animación, nombrarlo animar dentro de ella. Al 0% de la duración de la animación, agregaré Transformar traducir negativo 150 píxeles en el eje x y 50 píxeles en el eje y. Después escala 0.4 para hacerlo más pequeño. Entonces finalmente rotar cero grados. Entonces voy a copiar eso, pegarlo, y al 50% de la duración de la animación. Cambiaré la propiedad translate a 150 píxeles en el eje X y a 50 píxeles negativos en el eje Y. Por lo que se moverá hacia el lado superior derecho. También cambiaré el grado de rotación a 180 grados, por lo que girará mientras se mueve a través del círculo. Entonces finalmente, por debajo de eso, al 100% de la duración de la animación, volveré a mover de nuevo a su posición original. Y voy a cambiar rotar a 360 grados. Bien, voy a subir aquí dentro del cuadrado rojo y agregar animación animar 4 segundos como duración de animación Entonces facilidad adentro hacia fuera e infinito. Ahora se puede ver que el cuadrado rojo está animado y moviéndose a través del círculo semitransparente. Y se puede ver cuando cruza el círculo, se vuelve borrosa a medida que se mueve detrás de él. Ahora cuando regrese, queremos que vuelva a ser visible en parte superior del círculo, no borrosa Entonces podemos hacerlo yendo aquí al inicio de la animación y agregando el índice Z uno. Entonces al 50% lo pondremos en uno también. Lo que esto hará es que hará que el cuadrado rojo se vuelva borroso en la primera mitad de la animación Entonces voy a copiar todo eso. Pégalo, y al 50.000 1% sólo voy a cambiar el índice Z a tres. También al 100% agregaré índice Z tres también. Lo que esto hará es que hará que el cuadrado rojo aparezca en la parte superior del círculo, no esté borroso durante la segunda mitad de la animación, tal como se ve aquí Es borroso para la primera mitad, ya que el índice Z es uno, que es menor que dos, el valor del círculo No es borrosa en la segunda mitad ya que tiene un valor de índice Z de tres el cual es mayor que el del círculo. Fresco. Ahora después de entender esto, podemos crear fácilmente el círculo blanco que también se mueve a través del círculo semitransparente. Yo sólo voy a copiar el círculo rojo. Pégalo y selecciona el tercer tramo. Entonces cambiaré el color de fondo a blanco y eliminaré esto, así que sigue siendo un círculo. Ahora puedes ver que tenemos este círculo blanco que se mueve junto con el cuadrado rojo. Vayamos aquí y agreguemos retardo de animación. Negativo 2 segundos. Elegimos 2 segundos porque es la mitad de la duración de la animación, que es de 4 segundos. Para que los dos vanos se muevan uno al otro con una sincronización perfecta Al igual que se ve aquí cuando uno de ellos está a la izquierda, el otro está a la derecha, y se encuentran en el centro, dándonos este efecto de morfismo de vidrio realmente genial 131. Efecto de desplazamiento de cartas apiladas: Hola a todos. Bienvenidos a esta nueva lección en nuestro curso. En esta lección, vamos a crear este efecto donde tenemos tres cartas que se apilan una encima de la otra, dentro de ese círculo. Y al flotar sobre cualquiera de ellos, aparecen aquí, uno al lado del otro Entonces comencemos a crear este ejemplo. Iré aquí en mi HTML y agregaré un div con la clase de contenedor. Después dentro de ella agregaré otro div con la clase de tarjeta. También agregaré estilo, declararé una variable, pongamos su valor en negativo. Después copiaré y pegaré otros dos divs con la misma clase y solo cambiaré el valor de la variable a 0.1 Luego iré a mi CSS Seleccione el cuerpo y agregue Display Flex, Justificar, Centro de contenido, Alinear elementos, altura mínima, fondo 100 VH, este color púrpura oscuro luego transición 0.5 segundos. Entonces por debajo de eso, apuntaré al pseudo elemento antes del cuerpo para crear el círculo grande y agregar contenido Cadenas vacías posición absoluta superior cero izquierda cero ancho 100% alto, 100% índice z negativo dos fondo, esta transición de color amarillo 0.5 segundos. Ahora puedes ver que tenemos un fondo amarillo que está llenando toda la ventana. Ya que su altura y anchura son 100% del cuerpo. Volvamos y hagamos un círculo. Añadiré círculo de trayectoria de clip 250 píxeles como radio. Entonces en el centro como su posición. Ahora puedes ver la única parte que se muestra desde el fondo amarillo es este círculo en el centro. Entonces apuntaré al div contenedor que está envolviendo Todas las tres tarjetas, agregaré posición ancho relativo 1,100 píxeles, altura 400 píxeles, y un fondo rojo temporal Ahora ves este fondo rojo que está sentado encima del círculo amarillo. Bien, vamos a seleccionar las tarjetas. Apuntaré a los divs con una clase de tarjeta y agregaré ancho 300 píxeles, alto 400 píxeles Fondo, posición blanca absoluta a calc 50% -200 pixeles Para que quede centrada verticalmente. Después dejó el 50% y el radio del borde diez pixeles. Entonces para centrarlo horizontalmente, agregaremos transform translate x negative 50% Ahora puedes ver que las cartas están sentadas dentro del fondo rojo, pero están apiladas una encima de la otra y por eso aparecen como un div. Pero volvamos a ver nuestras tres cartas. Voy a ir aquí y añadir traducir Y 50 píxeles por la variable. Recuerdo que los valores de las variables son negativos 10.1 Eso significa que la primera tarjeta se moverá hacia la parte superior lo largo del eje y 50 píxeles, ya que su valor será negativo uno por 50, que es negativo 50. Además, el segundo se quedará como está, ya que su valor será cero por 50, que es cero. Por último, la tercera carta se moverá al fondo por 50 píxeles. Bien, también agreguemos rotar 40 grados para las tres tarjetas. Ahora se puede ver que las tres cartas se rotan y la primera se ha movido a la parte superior. El segundo está en el centro, y el tercero está en la parte inferior. Al igual que le expliqué, rápidamente vayamos y quitemos nuestro fondo rojo. También regresemos y agreguemos sesgo negativo 20 grados en el eje x y diez grados negativos en el eje y Entonces finalmente, escala 0.6 Ahora puedes ver que casi tenemos el efecto que queremos. Lo único que queda ahora es agregar un poco de sombra de caja para separar las cartas. Voy a agregar caja sombra 25 pixeles, 20 pixeles, 100 pixeles, este color gris. Y ahora están separados. Pero como puedes ver, el tercer div está en la parte superior, luego el segundo, luego el primero, pero revés. Queremos que el primer div esté arriba, luego el segundo y después el tercero. Podemos hacerlo fácilmente usando la propiedad del índice Z. Volveré y agregaré índice z negativo una vez la variable para el primer div, eso será negativo uno por uno negativo, que será uno para el segundo, será cero para el tercero, será negativo uno por uno que es negativo uno. Tendrá el índice z más bajo y estará en la parte inferior de la pila, tal como se puede ver aquí. Entonces finalmente, agregaré transición 0.5 segundos. Agreguemos algo de transparencia a la segunda y tercera carta para que tengan un bonito efecto tres D. Seleccionaremos la segunda carta y agregaremos opacidad 0.8 luego la tercera carta y cambiaremos la opacidad a 0.6 Ahora puedes ver que se ven mucho mejor Bien, vamos a trabajar en el efecto flotando. Ahora voy a ir aquí y decir al pasar el cursor sobre el contenedor, que es recordar el fondo amarillo, apuntaré a las cartas y agregaré posición absoluta z índice uno, opacidad Después transformar traducir x negativo 50% y eso anulará todas las transformaciones que vimos arriba aquí. Y sólo aplica esta función de traducir aquí, la rotación, el sesgo, todo eso se eliminará Y eso significa que las cartas se apilarán una encima de la otra, nuevo, como ves aquí. Bien, ahora queremos agregar algo de espaciado entre ellos. Digamos que queremos sumar 350 píxeles entre cada tarjeta. Podemos volver aquí y sumar, luego junto a este negativo 50% agregaremos más calc 350 píxeles por la variable Y lo que esto hará a todos es que agregará 350 píxeles negativos a la primera carta, cero a la segunda carta, por lo que permanecerá en su posición y 350 píxeles a la tercera carta. Y eso a cambio separará cada uno de ellos por 350 píxeles, tal como se puede ver aquí. Ahora es el momento de agregar algo de contenido a estas tarjetas. Volveré a mi HTML dentro del div de la tarjeta y agregaré otro div con una clase de contenido. Voy a añadir estilo. Después agregaré una variable J con un valor de uno. Entonces dentro de ese div, agregaré una H dos y diré tarjeta uno. Después agregaré un párrafo y agregaré algún texto en su interior. Después voy a copiar ese contenido Div, pegarlo de nuevo y cambiar la variable J a dos y la tarjeta uno a la tarjeta dos. Entonces lo pegaré aquí también. Y cambiar J a tres y tarjeta uno a tarjeta tres. Puedes ver que tenemos el contenido aquí dentro de las tres cartas. Vamos a nuestro CSS. Iré aquí dentro del auto y agregaré display, Flex, Justify content center, una línea, items center. Y ahora se puede ver que el contenido está centrado dentro del carro Div. Vamos a seguir adelante. Seleccionaré el contenido y agregaré relleno relativo de posición, 25 píxeles color este color gris oscuro, transición 0.5 segundos, luego opacidad cero Entonces por debajo de eso diré al pasar el cursor sobre el contenedor Div, apuntaré al contenido y agregaré opacidad uno Después retardo de transición 0.2 segundos por la variable J. El primer div de contenido tendrá un retardo de transición de 0.2 segundos. El segundo se retrasará 0.4 segundos. Y el tercero se retrasará 0.6 segundos, tal como se puede ver aquí. Con eso, hemos terminado esta lección. Espero que te haya gustado y te veré en la siguiente. 132. Efecto de suspensión: 4 líneas usando CSS: Oigan, ahí todo el mundo. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de hover de botón Se puede ver que el botón tiene cuatro líneas a su alrededor. Y cuando pasamos el cursor sobre él, las cuatro líneas se juntan y se encogen hasta que desaparecen Entonces este fondo resplandeciente escala hacia arriba hasta que cubre el botón Aprenderemos cómo podemos crear este resplandor de fondo usando la propiedad box shadow. Empecemos. Comenzaré aquí en mi HTML agregando un div y dándole una clase de contenedor. Entonces dentro de eso agregaré una etiqueta de anclaje. Después dentro de ella agregaré cuatro vanos para las cuatro líneas. Voy a ir justo aquí y decir Button. Después copiaré esta etiqueta de anclaje y la pegaré de nuevo para crear otro botón. Después iré a mi CSS. Empezaré por agregar algunos estilos de reajuste generales. Voy a agregar margen cero relleno, cero tamaño de caja, caja de borde, familia de fuentes, Sands, serafín Después apuntaré al cuerpo y agregaré display Flex, justify, content center para centrar el contenedor div horizontalmente en el body. Después agregaré una línea de artículos, la centraré verticalmente. Después agregaré altura mínima, 100 VH. Entonces finalmente fondo este color gris oscuro. Después apuntaré al div contenedor y agregaré display Flex para controlar la alineación de los botones. Después voy a añadir gap 150 pixeles para separar los botones. Por último, flexionar, envolver, envolver. Ahora apuntaré a las etiquetas de anclaje y agregaré posición relativa para posicionar las cuatro líneas relativamente a la etiqueta de anclaje. Entonces agregaré decoración de texto ninguno texto transformar relleno en mayúsculas, 20 píxeles de arriba y abajo y 35 píxeles de izquierda y derecha. Después voy a añadir borde dos píxeles sólidos. Este bonito color azul, luego colorea nuestro color azul tamaño de fuente 20 pixeles. Espacio entre letras cuatro píxeles, finalmente transición 0.5 segundos. Ahora puedes ver que los botones se ven mucho más bonitos. Ahora al pasar el cursor sobre los enlaces, queremos cambiar el color del texto a blanco y eliminar los bordes Apuntaré el enlace cuando se cierne sobre él. Voy a añadir color blanco para cambiar el color del texto a blanco en lugar de azul. Después agregaré borde, dos pixeles sólidos, transparentes para quitar el borde. Ahora puedes ver cuando pasamos el cursor sobre los enlaces, obtenemos el efecto que queremos Ahora vamos a crear las cuatro líneas que rodean los enlaces usando los cuatro vanos que creamos dentro de cada enlace Apuntaré los vanos dentro de los enlaces y agregaré posición absoluta para posicionarlos en relación con los enlaces Y vamos a controlar cada una de ellas de manera individual. Después voy a añadir fondo, nuestro color azul. Ahora vamos a apuntar al primer y tercer lapso. Diré abarcan enésimo hijo uno, luego abarcan enésimo hijo tres Voy a agregar ancho 40 pixeles, alto cuatro pixeles. Esas serán las líneas horizontales. Entonces copiaré eso, lo pegaré y apuntaré al segundo y cuarto lapso. Entonces cambiaré el ancho a cuatro píxeles y el alto a 40 píxeles. Entonces esas serán las líneas verticales. Ahora puedes ver que las líneas aparecen aquí, pero están apiladas una encima de la otra. Regresemos y controlemos su posición. Iré aquí y apuntaré al primer hijo y agregaré el 50% superior menos dos píxeles. De manera que la primera línea se centrará verticalmente. Después para moverlo a la izquierda del enlace, agregaremos 50 píxeles negativos a la izquierda. Después agregaré transición 0.5 segundos. Facilidad hacia fuera. Ahora puedes ver la primera línea está posicionada a la izquierda del enlace. Bien, ahora al pasar el cursor sobre el enlace, queremos que esta primera línea vuelva al centro del enlace y se encoja Al mismo tiempo, voy a ir justo aquí. Y al pasar el cursor sobre el enlace, apuntaré a la primera línea y agregaré el 50% a la izquierda para moverlo de nuevo al centro También agregaré escala de transformación x cero, para que la línea se encoja mientras se mueve de nuevo al centro Ahora, al pasar el cursor sobre el enlace, puedes ver que la primera línea vuelve al centro mientras se encoge Para hacer que la línea se encoja hacia el lado izquierdo, iré aquí y agregaré transform origin left. Ahora al alejarse del enlace, queremos que la línea espere un poco antes de volver a su posición Voy a ir aquí dentro del bloque CSS de primera línea y añadir retardo de transición 0.25 segundos. Entonces al pasar el cursor sobre el enlace, agregaré retardo de transición 0 segundos. Para que el retraso ocurra solo cuando se aleje del enlace, no cuando se cierne sobre él así Bien, ahora nos queda una cosa y es agregar alguna sombra de caja a la línea para obtener este bonito efecto brillante Volveremos aquí dentro de todos los vanos y agregaremos caja de sombra 00, valor de desenfoque de diez píxeles y el color de nuestro color azul Después copiaré este valor, lo pegaré cuatro veces, aumentaré el valor de desenfoque gradualmente para cada valor. Así es como podemos conseguir este efecto borroso como se ve aquí Bien, ahora hagamos lo mismo para las otras tres líneas. Voy a ir aquí y copiar eso. Pégalo tres veces. Entonces apuntaré a la tercera línea. Cambiar de izquierda a derecha porque queremos que se posicione en el lado derecho. Entonces voy a cambiar transformar origen a derecha en lugar de izquierda. También voy a cambiar de izquierda aquí a derecha. Ahora puedes ver que la tercera línea está posicionada a la derecha del enlace. Al pasar el cursor sobre el enlace, se mueve de nuevo al centro y se encoge Bien, ahora apuntemos a la segunda línea. Queremos centrarlo horizontalmente, no verticalmente. Entonces vamos a cambiar de arriba aquí a la izquierda. Y vamos a cambiar a la izquierda aquí a arriba con el fin de moverlo a la parte superior por encima del enlace. También cambiaremos transformar origen a top. Cuando recarguemos la página, puedes ver que ahora está posicionada encima de los enlaces Ahora volvamos y continuemos con el efecto de flotación. Voy a ir aquí y apuntar la segunda línea y cambiar de izquierda a arriba. Después cambiaré la escala X a la escala Y para que se encoja verticalmente. Ahora puedes ver que estamos consiguiendo el efecto que íbamos a conseguir. Hagamos lo mismo rápidamente para la cuarta línea, que se posicionará debajo de los enlaces. Lo apuntaré aquí, aquí, y cambiaré de arriba a izquierda, de izquierda a abajo. Entonces también voy a cambiar transformar origen a fondo. Al flotar, voy a cambiar de izquierda aquí a abajo, escala X a escala Y. Ahora se puede ver que se crean las cuatro líneas y ahora tenemos el efecto exacto que íbamos por Ahora es el momento de crear el fondo que aparece después del encogimiento de las líneas para tapar los enlaces Y lo haremos usando el pseudo elemento before. Iré aquí y apuntaré al pseudo elemento antes, el enlace Y añadir contenido cadenas vacías, posición absoluta para posicionarlo relativo a los enlaces. Después voy a añadir cero superior, cero a la izquierda, ya que queremos que cubra completamente los enlaces. Voy a agregar ancho 100% alto 100% Luego agregaré fondo, nuestro color azul. Ahora puedes ver que tenemos el fondo azul. Ahora volvamos y continuemos. Iré aquí y agregaré transformar escala cero. Después transición 0.5 segundos, índice z negativo uno. Entonces voy a ir aquí. Al pasar el cursor sobre el enlace, seleccionaré el pseudo elemento before y agregaré transform scale one transition delay 0.5 segundos porque queremos que aparezca el fondo Después de que las cuatro líneas se junten, entonces para obtener este efecto resplandeciente, agregaremos sombra de caja 0010 píxeles, nuestro color azul Entonces lo copiaré, lo pegaré dos veces y aumentaré el valor de desenfoque en consecuencia. Lo cambiaré a 30 píxeles, luego a 60 píxeles. Ahora al pasar el cursor sobre el enlace, puedes ver después de que las cuatro líneas se juntan, tenemos este bonito fondo brillante que escala y cubre el botón Y ese es exactamente el efecto que íbamos a conseguir. 133. Animación creativa de 4 círculos: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear estos círculos geniales, animación. Se puede ver que tenemos estas formas y están animadas de una manera muy agradable. Tenemos este círculo blanco que se mueve horizontalmente de derecha a izquierda, luego retroceder en un bucle infinito. Por encima de eso tenemos este semicírculo azul que está rotando. Y por encima de eso tenemos esta pequeña bola blanca que se desliza por encima de ella perfectamente. Este va a ser un ejemplo de animación genial. Veamos cómo podemos crearlo. Iré aquí en mi HTML y agregaré un div. Dale una clase de contenedor. Entonces dentro de eso, agregaré otro div con una clase de cargador. Entonces dentro de eso, voy a sumar el último div, darle una clase de pelota. Entonces iré a mi CSS y comenzaré agregando algunos estilos de reajuste generales Voy a agregar margen cero, relleno cero, luego dimensionamiento de caja, cuadro de borde. Entonces por debajo de eso, apuntaré al cuerpo y agregaré display flex, justificaré centro de contenido, alinearé elementos, centro en altura, fondo 100 VH, este color marino, finalmente desbordamiento oculto. Entonces apuntaré al Div con la clase de cargador y agregaré posición ancho relativo 200 píxeles. Altura 200 píxeles también. Después voy a añadir un fondo temporal de color rojo. Ahora puedes ver que tenemos este fondo rojo que se centró dentro del cuerpo. Usaremos este loader di para crear la parte azul que giraba en nuestro ejemplo aquí mismo. Bien, ahora vamos a crear este fondo azul usando el pseudo elemento before Voy a apuntar al pseudo elemento antes del div cargador y agregaré contenido cadenas vacías posición ancho absoluto 200 píxeles, alto 100 píxeles Entonces fondo nuestro color azul. Ahora puedes ver que tenemos este fondo azul, pero queremos cambiar este fondo a un semicírculo. Hagámoslo. Voy a ir aquí y añadir borde inferior izquierdo radio 100 pixeles, lo mismo que la altura del fondo azul. Después bordear el radio inferior derecho también de 100 píxeles. Ahora puedes ver que el fondo azul se ve exactamente de la manera que queremos. Bien, ahora vamos a crear la segunda parte de nuestro dibujo. Este círculo blanco aquí que se mueve horizontalmente hacia adelante y hacia atrás. Volveré aquí y apuntaré al div contenedor. Después voy a añadir posición relativa. Entonces por debajo de eso, apuntaré al pseudo elemento before del div contenedor para crear el círculo blanco Después agregaré contenido cadenas vacías, posición anchura absoluta 200 píxeles, altura 200 píxeles. Después fondo blanco. Para que sea un círculo, agregaré radio de borde 50% Para poder ver este fondo blanco, subiré aquí dentro del cargador y agregaré índice Z negativo uno. Se puede ver que tenemos este círculo blanco que se ve exactamente como queremos. Ya que queremos ubicar el círculo blanco debajo del azul, volveremos aquí y agregaremos a 200 píxeles. Ahora se puede ver que se ha movido al fondo del fondo rojo. Ahora queremos que el fondo azul esté exactamente por encima del círculo blanco. Podemos hacerlo yendo aquí dentro del pseudo elemento antes de la inmersión del cargador y sumando el cero inferior Increíble, vamos a quitar este fondo rojo. Ya no lo queremos. Voy a ir aquí dentro del div cargador y quitar el fondo rojo. Bien, vamos a crear la tercera parte que es este gran círculo rosa. Lo haré usando el pseudo elemento after del contenedor Voy a apuntar al pseudo elemento after del contenedor y agregaré contenido cadenas vacías, posición absoluta Después agregaré ancho 800 pixeles. Altura 800 pixeles así fondo, este bonito color rosa. Para que sea un círculo, agregaré radio de borde 50% Ahora puedes ver que tenemos este enorme círculo rosa. Vamos a centrarlo horizontalmente. Voy a ir aquí y agregar izquierda 50% Luego transformar traducir x negativo 50% Ahora puedes ver que el círculo rosa está centrado dentro de la página y ahora está tapando el fondo blanco. Queremos posicionarlo debajo del fondo blanco. Volveré aquí y agregaré los 400 píxeles superiores. Ahora el fondo del ping se encuentra debajo del círculo blanco, pero como puedes ver, todo el dibujo se ubica hacia la parte inferior. Sería mejor si pudiéramos cambiarlo un poco a la cima Voy a hacer eso entrando dentro del contenedor div y agregando transform translate y negative 100 pixeles para desplazarlo a la parte superior como ves aquí. Bien, ya casi terminamos. Lo único que queda aquí es la pequeña bola blanca en la parte superior. Comenzaré apuntándolo y pondré su posición en absoluta. Entonces agregaré ancho 40 píxeles, alto 40 píxeles, fondo blanco, y radio de borde 50% Ahora puedes ver que está posicionado con relación al div cargador. Para verlo con claridad, voy a subir aquí dentro del div cargador y agregaré de nuevo fondo rojo. Ahora puedes ver que la bola blanca se posiciona aquí en la esquina superior izquierda del cargador. Bien, cambiemos su posición para sentarnos exactamente en la parte superior del círculo blanco. Volveré al interior del div de bola y sumaré al 50% transform translate y negative 100% Ahora tenemos todas nuestras piezas juntas y lo único que queda es animarlas una por una Empezaremos con la pequeña bola blanca. Queremos moverlo horizontalmente en la parte superior del semicírculo azul Debe moverse de derecha a izquierda, ida y vuelta en un bucle infinito. Primero iré aquí y agregaré traducir x negativo 40 pixeles. Para que la pequeña bola blanca se mueva hacia la izquierda y se posicione al inicio del semicírculo azul como se ve aquí Ahora vamos a crear la animación. Iré aquí y crearé una nueva animación. Nómbrelo, Animar bola por dentro. Voy a añadir tres etapas para la animación. Al 0% agregaré transformar traducir Y negativo 100% para que mantenga su posición vertical. Después traducir x negativo 40 píxeles. Después al 50% de la duración de la animación, voy a copiar eso, pegarlo y cambiar traducir x a 200 píxeles. Ese es el ancho del semicírculo azul. El balón se moverá todo el camino hacia la derecha al 100% queremos que vuelva de nuevo, así que lo dejaré ya que es negativo 40 píxeles. Entonces subiré aquí dentro del div de pelota y agregaré Animación. Animar bola 4 segundos. Facilidad adentro hacia fuera infinito. Genial. Ahora se puede ver que la bola blanca se mueve infinitamente de derecha a izquierda Exactamente por encima del semicírculo azul. La luz que queremos. Bien, echemos un vistazo rápido al semicírculo azul para ver cómo podemos animarlo Puedes ver aquí está girando de izquierda a derecha y de vuelta otra vez. Bien, volvamos a crear la animación. Iré aquí y crearé una nueva animación. Nombrarlo semicírculo. Después crearé tres etapas para esta animación. Al 0% de la duración de la animación, agregaré transform rotate 50 grados. Después voy a añadir otras dos etapas. Voy a copiar eso, pegarlo de nuevo dos veces. La segunda etapa será al 50% voy cambiar el valor de rotación a 50 grados negativos. Entonces al final de la duración de la animación, dejaré los grados de rotación tal como están. Después iré hasta aquí dentro del cargador y agregaré semicírculo de animación 4 segundos. Facilidad adentro hacia fuera infinito. Ahora se puede ver que el fondo rojo está girando sobre su centro y el semicírculo azul gira con él Ahora volvamos y quitemos el fondo rojo. Ya no lo necesitamos. Rápidamente voy a hacer eso. Ahora solo queda una cosa y es animar el círculo blanco Iré aquí debajo del círculo blanco y crearé una nueva animación. Nombrarlo, animar círculo. Al 0% de la duración de la animación, agregaré transform translate x 15 pixeles. Entonces voy a copiar eso y crear otras dos etapas. El primero está al 50% luego cambiar traducir x a negativo 15 píxeles al 100% voy a dejar el valor de traducir x como está. Después iré hasta aquí y agregaré animación Animar círculo 4 segundos. Facilidad adentro hacia fuera infinito. Ahora puedes ver que el círculo blanco ahora se mueve horizontalmente entre el semicírculo azul y el rosa, dándonos el efecto exacto que queremos Bien chicos, esto es para esta lección. Fue muy divertido, y espero que lo hayan disfrutado. Nos vemos en la siguiente. 134. Animación colorida de glass líquido: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear esta bonita animación. Se puede ver que tenemos este vaso de agua. Y el agua en su interior se mueve hacia abajo para vaciar el vaso, luego se mueve hacia arriba para llenarlo nuevamente. Y esto sucede una y otra vez. Empecemos a crear este ejemplo. Comenzaré aquí en mi HTML agregando una sección dentro de eso. Voy a añadir un, darle una clase de vaso. Luego otra inmersión dentro que con una clase de interior, dentro de ella, nuestro último div con una clase de líquido. Después voy a copiar ese div con una clase de vidrio y volver a pegarlo. Después iré a mi CSS y apuntaré a la sección. Después agregue flex de visualización, justifique contenido, centre una línea de artículos, altura central, fondo 100 VH, este color gris oscuro. Entonces por debajo de eso, apuntaré al vidrio di y agregaré posición relativa. Por debajo de eso apuntaré al div interior dentro del div de vidrio y agregaré posición anchura relativa 200 pixeles, altura 400 pixeles fondo este color gris. Entonces voy a subir aquí dentro de la sección y añadir gap 40 pixeles para separar las dos gafas así sigamos adelante. Iré aquí y agregaré radio de borde 40 pixeles. Después bordear ocho píxeles, blanco sólido. Bien, echemos un vistazo a nuestro ejemplo. Queremos crear esta parte superior circular aquí en la parte superior del vaso. Y lo haremos usando el pseudo elemento before del div interno Entonces lo apuntaré y agregaré contenido cadenas vacías posicion ancho absoluto 175 pixeles, alto 30 pixeles. Después bordear diez píxeles sólidos. Este color gris, se puede ver que tenemos este rectángulo gris. Sigamos adelante. Volveré aquí y agregaré radio de borde 50% Para centrarlo horizontalmente, agregaré left 50% Luego transformaré traducir x negativo 50% Ahora ya pueden ver que tenemos esta forma circular. Bien, ahora queremos moverlo un poco a la cima. Volveré aquí y agregaré top negativo 15 píxeles. También subamos aquí y cambiemos el color del borde a transparente en lugar de blanco. Increíble. Ahora la parte superior del cristal se ve exactamente de la manera que queremos. Una cosa final, agreguemos alguna sombra de caja en la parte inferior. Volveré aquí y agregaré sombra de caja, valor horizontal cero y 15 píxeles como valor vertical. Entonces valor de desenfoque cero, y un color gris oscuro como el color de la sombra. Ahora tenemos esta bonita sombra en la parte inferior. Bien, si miramos nuestro ejemplo, se puede ver que tenemos esta parte semitransparente que le da al cristal un aspecto realista. Regresemos y hagamos eso. Lo haré usando el pseudo elemento after del div interno Lo apuntaré y agregaré contenido posición de cadenas vacías, top absoluto 70 píxeles la izquierda, 30 píxeles de ancho. 50 pixeles y altura 250 pixeles. Entonces finalmente fondo este color gris semitransparente. Ahora puedes ver que tenemos este fondo gris semitransparente que queremos. Bien, vamos a crear el líquido dentro del vaso. Eso lo haremos usando el líquido. Lo apuntaré y agregaré posición absoluta superior 50 píxeles a la izquierda, cinco píxeles, cinco píxeles inferiores. Entonces fondo este color azul claro. Ahora puedes ver que tenemos este fondo azul que cubre el cristal. Pero ahora queremos agregar algunas curvas aquí en la parte inferior para que coincida con el cristal. Volveré aquí y agregaré radio de borde 30 pixeles. Radio inferior del borde 30 píxeles también. Ahora puedes ver que el div líquido se ve exactamente de la manera que queremos. Bien, volvamos y echemos un vistazo a nuestro ejemplo. Puedes ver que tenemos esta parte circular superior aquí mismo. Vamos a crearlo muy rápido. Apuntaré el pseudo elemento antes del div líquido y agregaré contenido Cadenas vacías, posición anchura absoluta 100% altura 20, radio de borde 50% Entonces fondo este color azul más oscuro. Se puede ver que tenemos este fondo circular azul. Pero vamos a desplazarlo un poco hacia la cima. Voy a ir aquí y añadir a negativo diez píxeles. Increíble. El cristal se ve exactamente de la manera que queremos. Y ya hemos terminado el dibujo. Pero ahora tenemos que animarlo. Regresemos y hagamos eso. Voy a crear una nueva animación, llamarlo Animate Liquid Entonces al inicio de la duración de la animación al 0% al 20% agregaré 50 píxeles desde el inicio de la animación hasta el 20% de la duración de la animación. El líquido azul se quedará como está. No se moverá porque no cambiamos su valor máximo. Entonces al 50% de la duración de la animación, al 70% estableceremos la propiedad superior en 320 píxeles. La propiedad top cambiará de 50 píxeles a 320 píxeles durante la duración de la animación de 20% a 50% de la duración de la animación. Entonces se quedará quieto por un tiempo a 320 píxeles de la duración de la animación de 50% a 70% Luego finalmente por debajo de eso, al final de la duración de la animación al 100% pondremos top de nuevo a 50 píxeles. Bien, subamos aquí dentro del div líquido y agreguemos animación animate liquid, 5 segundos lineal, infinito Ahora puedes ver después de recargar la página, el líquido dentro del vaso espera un poco, luego se mueve hacia abajo Espera un poco en la parte inferior, luego vuelve a la cima otra vez. Eso continúa en un bucle infinito. Volvamos y cambiemos el color del segundo líquido. Apuntaré el segundo vaso y apuntaré el líquido dentro él y agregaré fondo, este color amarillo. También agregaré retardo de animación 2.5 segundos. Voy a copiar eso, seleccionar Pegar, y apuntar al pseudo elemento antes, que es la parte superior aquí Después voy a añadir fondo, este color amarillo más oscuro. Ahora puedes ver los cambios de color dándonos este color amarillo. Y como pueden ver, cuando se está llenando una taza, la otra se vacía, dándonos el efecto exacto que queremos. 135. Animación elegante de carga de borde: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de carga. Puedes ver que tenemos estos círculos elásticos que están girando y dándonos este bonito efecto ondulado. Aprenderemos a hacerlo usando la propiedad border radius. Entonces comencemos. Iré aquí dentro de mi HTML y agregaré un Div con una clase de cargador. Dentro de eso agregaré tres vanos, luego debajo de eso agregaré una H dos y agregaré cargando dentro de él Después iré a mi CSS y apuntaré al cuerpo. Agregar display, Flex, Justificar el centro de contenido para centrar el cargador horizontalmente. Y alinea los artículos al centro para centrarlo verticalmente. Después voy a añadir en altura, 100 VH y fondo este color gris oscuro. Entonces apuntaré al cargador y agregaré posición ancho relativo, 200 píxeles, alto 200 píxeles. Luego mostrar flex, justificar centro de contenido, Alinear elementos al centro. Entonces apuntaré los vanos dentro del cargador. Agregar posición absoluta, luego arriba cero izquierda cero ancho 100% alto 100% radio de borde 50% luego borde dos píxeles blanco sólido. Ahora se puede ver que tenemos los tres vanos como círculos blancos que están sentados uno encima del otro Bien, ahora apuntemos a cada tramo y cambiemos el radio del borde de cada uno para darle este bonito aspecto elástico. Voy a apuntar al primer lapso aquí diciendo cargador span enésimo hijo uno Entonces dentro de eso, agregaré radio de borde. Para controlar completamente cómo se ve este borde, utilizaremos un sitio web llamado Fancy Border Radius Generator. Se puede ver que tenemos esta forma que podemos controlar fácilmente para obtener la forma que queremos. Juguemos un poco con él. Digamos que queremos este radio. Lo copiaré y lo pegaré aquí. Ahora puedes ver el primer lapso ahora tiene este bonito borde elástico. Bien, ahora voy a copiar ese primer selector, pegarlo y apuntar al segundo. Seleccionar, pegarlo una vez más y apuntar al tercero. Entonces volveré al sitio web del generador de frontera elegante y generaré un nuevo radio fronterizo, solo uno aleatorio. Entonces lo pegaré aquí dentro del segundo lapso. Bien, voy a volver y generar otro valor y pegarlo aquí dentro del tercer lapso. Ahora puedes ver que tenemos tres bordes diferentes que tienen un radio de borde diferente. Bien, ahora vamos a crear la animación. Voy a crear uno nuevo. Nombrarlo rotar. Y dentro de ella, al inicio de la duración de la animación al 0% voy añadir transformar rotar cero grados. Después al 100% de la duración de la animación, agregaré transform rotate 360 grados. Entonces iré hasta aquí dentro del selector de span y agregaré animación rotate, duración de animación de 5 segundos, luego lineal, infinita. Ahora se puede ver que los tres bordes están girando junto con los tres vanos Bien, para conseguir el efecto elástico ondulado que queremos, podemos jugar un poco con los bordes, por ejemplo. Podemos hacer que un borde gire en la dirección inversa. Vamos a probar eso. Regresaré aquí dentro del segundo lapso y agregaré dirección de animación inversa. Creo que se puede ver que ya estamos consiguiendo el bonito efecto. Podemos dejarlo como está o podemos probar otra cosa. Iré dentro del tercer selector y agregaré duración de animación 3 segundos en lugar de cinco, por lo que girará más rápido. Ahora puedes ver que se mueve más rápido, dándonos este bonito efecto. Muy cool. Nos queda una cosa y es agregar algunos estilos simples a la H dos. Lo apuntaré y agregaré color blanco y peso de fuente 500. Ahora se ve mucho mejor. Y eso es todo, todos, por este sencillo pero hermoso ejemplo. Te veré en los próximos videos. 136. Rotación del cargador brillante: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de carga. También tenemos este cargador con este círculo resplandeciente que está girando, dándonos nuestro bonito ejemplo Veamos cómo podemos crearlo. Voy a empezar aquí en mi HTML añadiendo una sección, luego dentro de ella voy a añadir un div, darle una clase de cargador. Después iré a mi CSS y apuntaré a la sección. Luego agregue display, flex, justifique el centro de contenido, Alinear el centro de elementos también. Después min altura, 100 VH y fondo este color marino. Bien, entonces apuntaré div del cargador y agregaré posición, ancho absoluto 150 píxeles, 150 píxeles, fondo rojo por ahora, luego radio de borde 50% Bien, ahora puedes ver que tenemos este círculo rojo posicionado en el centro del navegador. Vamos a aprender algo nuevo en esta lección, que es gradiente CSS. Queremos cambiar el fondo de este círculo a un degradado de dos colores azules. En lugar de este color rojo, utilizaremos este sitio web para generar el degradado. Este sitio web nos ayuda a crear un degradado de color. Puedes ver que tenemos estos dos colores que podemos usar para generar el degradado. Voy a cambiar este primer color a este color azul marino. Ese es el color de nuestra sección. Y el segundo color que queremos es un color azul claro. Lo voy a poner aquí. También jugaré con este deslizador aquí. Para cambiar la intensidad del degradado, quiero esta forma de degradado. Podemos ir aquí y copiar este código. Después vuelve a mi CSS dentro de la inmersión del cargador y cambia el color de fondo de rojo a este nuevo valor que copiamos de nuestro sitio web. Ahora puedes ver que el color de fondo del círculo ahora se cambia a este degradado fresco. Bien, ahora continuemos. Iremos aquí y apuntaremos al pseudo elemento before del div loader y agregaremos contenido cadenas vacías, posición absoluta Entonces queremos esconder aquí una parte de esta forma. Para obtener la forma final que queremos, volveré aquí y agregaré el recuadro 20 píxeles desde arriba, 20 píxeles desde la derecha, luego cero en la parte inferior y cero a la izquierda también Entonces voy a agregar de nuevo rojo por ahora. También agregaré radio de borde 50% Ahora puedes ver que tenemos este círculo rojo que está cubriendo nuestra forma. Bien, volvamos y cambiemos el color de fondo al mismo color Navy que usamos en el fondo de la sección. Ahora puedes ver que tenemos esta forma circular que exactamente de la manera que ganamos. Bien, vamos a crear el pequeño círculo resplandeciente que se colocará aquí Volveré y apuntaré al pseudo elemento after del div loader y agregaré contenido cadenas vacías posicion ancho absoluto 40 pixeles Altura 40 pixeles también. Entonces fondo nuestro color azul claro y radio de borde 50% Ahora puedes ver que tenemos este círculo azul aquí mismo. Ahora queremos posicionarlo aquí. Voy a volver atrás y en la parte superior 50 píxeles, derecha, negativos ocho píxeles. Ahora puedes ver que está posicionado en el lugar exacto que queremos. Volvamos a darle este bonito efecto resplandeciente. Lo haremos usando la propiedad box shadow. Voy a agregar caja sombra cero como desplazamiento horizontal, otro cero como desplazamiento vertical. Después un valor de desenfoque de cinco píxeles. Por último, este color azul claro. Ahora puedes ver que tenemos esta sombra muy diminuta. Para obtener el efecto resplandeciente que queremos, podemos usar un truco sencillo Copiaremos este valor de sombra de caja, lo pegaremos unas cuantas veces, digamos tres veces En cada vez, aumentaremos el valor de desenfoque. Poco a poco, lo cambiaremos a 25 píxeles aquí, luego a 50 píxeles y 75 píxeles. Al hacer eso, puedes ver que tenemos este bonito efecto resplandeciente Cada vez que quieras crear un efecto brillante, puedes usar la propiedad box shadow y aumentar gradualmente el valor de desenfoque como acabamos de explicar Bien, ahora vamos a crear la animación de rotación. Voy a crear una nueva animación. Nombrarlo rotar dentro de él al 100% agregaré transformar, rotar 360 grados. Entonces aquí dentro del div cargador voy a agregar animación. Girar 2 segundos, lineal, infinito. Ahora se puede ver que el cargador está girando en un bucle infinito. 137. Animación de texto creativo con la propiedad de trazado de clip: Hola a todos, bienvenidos a esta nueva lección del curso. En esta lección, aprenderemos a crear esta bonita animación de texto. Se puede ver que la pantalla está dividida horizontalmente en dos mitades. La mitad superior tiene un fondo verde y la inferior tiene un fondo blanco. También el texto aquí se está moviendo de la parte superior a la parte inferior y cambiando de Feliz Año Nuevo 2031 a bye bye 2030 Además, el color está cambiando de blanco a verde. Usaremos la propiedad de ruta de clip para crear esta división del navegador. Empecemos y hagamos eso ahora. Comenzaré aquí en mi HTML agregando una sección. Después dentro de ella agregaré un div. Dale una clase de caja y otra clase de caja una. Después dentro de ese div, voy a añadir una H dos. Dentro de ella, voy a añadir un lapso, decir adiós. Después otro lapso al lado de eso, digamos 2030. Entonces copiaré ese div, lo pegaré de nuevo y cambiaré la casilla uno a la casilla dos. Dentro del primer lapso, agregaré Feliz Año Nuevo. Dentro del segundo lapso, agregaré 2031 Bien, ahora iré a mi CSS y apuntaré al cuerpo. Después agregaré Desbordamiento oculto. Entonces apuntaré a la sección que contiene los dos divs. Voy a añadir posición anchura relativa, 100% altura 100 VH. Entonces apuntaré al cuadro div y agregaré posición absoluta superior cero, izquierda cero, luego ancho 100% altura 100% también. Los dos divs tendrán toda la altura y anchura de la sección Ahora vamos a recargar la página. Se puede ver porque establecemos la posición de los cuadros divs en absoluto, el texto se apila uno encima del otro en la esquina superior izquierda de la sección Volvamos y centremos el texto dentro de la página. Volveré aquí y agregaré display Flex, justify, content center, Alinear items center también. Ahora puedes ver que el texto está centrado dentro de la página. Bien, volvamos y apuntemos a la segunda caja que tenga la clase de caja dos y agreguemos fondo, este color verde. Ahora puedes ver que la segunda caja tiene este color verde, y está escondiendo la primera caja debajo ella porque vino después de ella en nuestro HTML. Bien, Ahora queremos que solo se muestre la mitad superior de la segunda caja, es decir, queremos dividirla en dos mitades y tener solo la mitad superior visible Podemos hacerlo fácilmente mediante el uso de la propiedad de trazado de clip. Iré al clip del sitio web y seleccionaré la forma trapezoidal Entonces como queremos acortar la mitad inferior, lo haré rápidamente. Después voy a copiar el código aquí, Volver atrás y pegarlo dentro de la segunda caja div. Ahora puedes ver que el segundo cuadro está perfectamente recortado y como el texto su interior está perfectamente centrado, también se recorta en dos mitades junto con Bien, ahora agreguemos algunos estilos a la H dos. Lo apuntaré, agregaré tamaño de fuente 45 pixeles. Queremos que los dos vanos dentro de cada encabezado se asienten en dos líneas, como vemos aquí en nuestro ejemplo Tenemos Feliz Año Nuevo en una línea y 2031 se sienta debajo de él. Esto es lo mismo para el segundo rubro también. Esta es la razón por la que agregamos dos vanos dentro del H dos. Regresemos y hagamos eso. Voy a ir aquí dentro de la H dos y agregar display flex. Después flexiona la dirección de la columna. Ahora están separados en dos líneas. Podemos ver claramente que si volvemos aquí y agregamos transform translate y negative 70% Ahora puede ver ya que cambiamos la H dos a la parte superior, ahora vemos la segunda H dos y la primera está escondida debajo de ella. Si queremos ver el primer H dos, podemos volver atrás y cambiarlo a 70% en lugar de negativo 70% Ahora ya se puede ver que tenemos para 2030. Y el segundo H dos está oculto ya que recortamos la segunda caja, así que no está apareciendo Bien, volvamos y pongamos la propiedad translate de nuevo a negativo 70% También agregaré texto, un centro de línea para centrar el texto. Bien, cambiemos el color de la H dos que está apareciendo aquí. Voy a apuntar a la H dos dentro la segunda caja y agregaré color blanco. Bien, ahora apuntemos al segundo lapso de los H dos. Ese es el año para agregarle algunos estilos. Diré span enésimo hijo dos y agregaré altura de línea uno y tamaño de fuente dos Bien, vamos a crear la animación que mueva el texto hacia arriba y hacia abajo. La idea de la animación es traducir animadamente la función Y el fin de mover los H dos verticalmente Como vimos cuando jugamos con el valor de H dos. Iré aquí y crearé una nueva animación. Nómalo, anima dentro de él. Queremos que el texto empiece a moverse de arriba a abajo. Pero queremos que se asiente un rato en la mitad superior, luego se mueva a la mitad inferior. Siéntate ahí un poco en la mitad inferior y vuelve a la mitad superior y así sucesivamente. Diré al 0% de la duración de la animación, al 45% agregaré transform translate y negative 70% para que el texto permanezca en su posición desde el inicio de la duración de la animación hasta 45% antes de que se mueva. Entonces por debajo de eso al 55% 90% voy a agregar transformar traducir Y 70% Eso significa que de 45% de la duración de la animación a 55% la posición cambiará de la parte superior negativa 70% a la inferior 70% De 55% a 90% se mantendrá en esta nueva posición en la parte inferior. Entonces queremos moverlo de nuevo a la cima. Diré al 100% voy a agregar transform translate y negative 70% otra vez. Entonces voy a subir aquí dentro del selector H dos y añadir animación animar 3 segundos. Facilidad adentro hacia fuera infinito. Ahora puedes ver que el texto se mueve de arriba a abajo, ida y vuelta, dándonos este bonito efecto de animación. Lo único que queda ahora es cambiar el color del texto a verde. Cuando se mueva hacia abajo, volveré aquí y dentro del selector H dos, voy a añadir color, nuestro color verde. Muy bien todos, eso es todo para esta lección. Espero que aprendas algo de ello, y te veré en otra. 138. dibujar una línea alrededor de un button con un icono de lápiz: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de hover de botón Puedes ver que tenemos este botón y este lápiz en la esquina superior izquierda. Y cuando coloco el cursor sobre el botón, la pluma dibuja un borde alrededor del botón y luego lo llena con un fondo gris oscuro Bien, veamos cómo podemos crear este efecto. Comenzaré aquí en mi HTML agregando una etiqueta de anclaje. Diré Button. Entonces después de eso agregaré cuatro vanos. Cada tramo será una línea de las cuatro líneas que crea el borde que rodea el enlace. Entonces iré a mi CSS y apuntaré al cuerpo. Después agrega display Flex, justify, content center, A line items center también, luego en altura 100 VH. Entonces debajo de eso, apuntaré a la etiqueta de anclaje y agregaré relleno relativo de posición, 20 píxeles de arriba y abajo y 40 píxeles de izquierda y derecha. Después agregaré tamaño de fuente 24 pixeles, peso de fuente, color negrita, este color gris oscuro. Luego el texto transforma la decoración del texto en mayúsculas, el espaciado entre letras de dos píxeles. Ahora trabajemos en la creación de las cuatro líneas que rodean el enlace. Eso lo haremos usando los cuatro vanos. Voy a apuntar al primer lapso diciendo span enésimo hijo uno También apuntaré al tercer lapso. Después voy a agregar ancho, 100% alto, tres pixeles de fondo, nuestro color gris oscuro. Estas serán las líneas horizontales como puedes ver aquí. Ahora reposicionemos esas dos líneas. Esta vez apuntaré al primer lapso solo. Y sumar cero superior, cero a la izquierda también. Ahora puedes ver que la primera línea está posicionada en la parte superior, encima del enlace. Ahora vamos a animarlo de izquierda a derecha. Al flotar, volveré aquí y agregaré escala de transformación x cero Entonces por debajo de eso, al pasar el cursor sobre, seleccionaré el primer lapso. Nuevamente, agregue escala de transformación x uno. Nuevamente, también agregaré transición 0.2 segundos. Y ahora se puede ver que la línea superior ahora está oculta, y al pasar el cursor sobre el enlace, se escala hacia arriba. Pero queremos que escale de izquierda a derecha. Podemos hacer eso volviendo aquí y agregando transform origin left. Bien, hagamos lo mismo para el resultado final. Voy a copiar estos dos bloques de código, pegarlos y seleccionar el tercer lapso. Entonces para colocarlo en la parte inferior, iré aquí y cambiaré de arriba a abajo. También voy a cambiar transformar origen a derecha, porque queremos que escale de derecha a izquierda. También agregaremos retardo de transición 0.4 segundos. Ahora puedes ver que la línea en la parte inferior está escalando de derecha a izquierda después de la línea superior. Bien, ahora vamos a crear las dos líneas en los dos lados. Voy a subir aquí y copiar ese blanco, el segundo y cuarto vanos Entonces cambiaré el ancho a tres píxeles. Y cambia la altura al 100% Ahora puedes ver que tenemos las dos líneas aquí. Reposicionemos estas dos líneas. Volveré aquí y copiaré estos dos bloques de código. Pégalos y selecciona el segundo lapso. Entonces voy a cambiar de izquierda aquí a derecha, transformar origen a arriba. Después cambia la escala x a la escala y aquí. También seleccionaré el segundo lapso y cambiaré la escala x a la escala y. También agregaré un valor de retardo de transición de 0.2 segundos. Esta línea escalará entre la primera y la tercera línea, como puede ver aquí. Vamos a crear rápidamente la cuarta línea. Voy a copiar ese código, pegarlo, y seleccionar la cuarta línea aquí, aquí. Entonces voy a cambiar de aquí a la izquierda y transformar origen a abajo. Iré aquí y cambiaré retraso de transición a 0.6 segundos. Ahora puedes ver cuando vuelo el cursor sobre el enlace, las cuatro líneas se juntan una tras otra, creando este bonito efecto Ahora vamos a crear el fondo gris oscuro. Voy a crear eso usando el pseudo elemento before de la etiqueta de anclaje Lo seleccionaré y agregaré contenido. Cadenas vacías, posición absoluta, cero superior, cero izquierda, luego ancho 100% Altura 100% también. Entonces este color gris oscuro. Ahora puedes ver que tenemos este fondo gris oscuro que está cubriendo la etiqueta de anclaje. Bien, vamos a trabajar en el efecto de flotación. Volveré aquí y agregaré transformar escala cero. Después índice z negativo uno. Después al pasar el cursor sobre el enlace, seleccionaré el pseudo elemento antes y agregaré la escala de transformación uno Después transición 0.5 segundos. Finalmente, el retardo de transición 0.8 segundos para que el fondo aparezca después de la animación de cuatro líneas. Ahora cuando vuelvo y pase el cursor sobre el enlace, se puede ver el fondo gris oscuro que escala desde el centro hasta que cubre el enlace Pero queremos que escale desde la esquina superior izquierda, no desde el centro. Volveré aquí y agregaré transform origin top left, así como así, se puede ver el fondo escala hacia arriba desde la esquina superior izquierda. También cambiemos rápidamente el color del texto del enlace a blanco. Seleccionaré el enlace al pasar el cursor sobre él, agregaré color blanco Transición 0.2 segundos, luego retardo de transición 0.8 segundos. Así, el texto cambia a blanco. Bien, ahora agreguemos el icono del lápiz a nuestro enlace. Lo haremos usando la biblioteca impresionante de fuentes. Buscaré fuente impresionante D. Entonces voy a dar click aquí. Después voy a copiar la etiqueta de enlace. Volver a mi HTML y pegarlo aquí dentro de mi HTML. Entonces para obtener el código del icono del lápiz, volveré aquí y daré click en este enlace. Para ir a la biblioteca de iconos, seleccionaré los iconos y buscaré lápiz, pincharé sobre este primer icono y copiaré su Unicode. Después volveré a mi CSS, seleccionaré el pseudo elemento after de la etiqueta de anclaje y agregaré contenido Después voy a pegar el Unicode del lápiz, luego agregaré familia de fuentes. Fuente impresionante. Así es como puedes agregar un ícono de fuente impresionante dentro de pseudo elementos Después voy a añadir posición absoluta superior cero, izquierda de color cero, este color gris oscuro. Ahora puedes ver que tenemos este ícono de lápiz aquí, pero queremos cambiarlo un poco hacia arriba. Volveré y cambiaré de arriba a negativos 22 píxeles. Bien, ahora vamos a crear la animación para este lápiz, voy a crear una nueva animación, nombra, dibujaré dentro de él. Al 0% de la duración de la animación, agregaré al negativo 22 píxeles a la izquierda, 100% Esto hará que el lápiz comience en la esquina superior izquierda del enlace, luego voy a copiar eso. Pégalo cinco veces. Entonces al 20% de la duración de la animación, dejaré arriba como está, luego cambiaré a la izquierda al 100% El lápiz se moverá a la esquina superior derecha. Entonces al 40% de la duración de la animación, queremos que el lápiz esté en la esquina inferior derecha. Cambiaré la parte superior a 100% -22 píxeles. Voy a cambiar la izquierda al 100% Luego al 60% queremos que esté en la esquina inferior izquierda, voy a cambiar de arriba a calc 100% -22 pixeles Voy a dejar a la izquierda ya que es cero. Entonces al 80% queremos que vuelva a su posición original. En la esquina superior izquierda, dejaré como está. Por último, al 100% queremos que se ubique en la esquina inferior derecha. Cambiaremos la parte superior a 100% -22 píxeles y la izquierda al 100% Luego iré hasta aquí y al pasar el cursor sobre la etiqueta de anclaje, seleccionaré el pseudo elemento after que es Voy a añadir animación dibujar 1 segundo delante lineal porque queremos que suceda sólo una vez. Ahora cuando voy y vuelo el cursor sobre el enlace, puede ver que el lápiz se mueve alrededor de las esquinas del enlace y luego se mueve por la esquina inferior derecha junto con el fondo gris, dándonos nuestro bonito efecto 139. Efecto de desplazamiento del menú con color de fondo: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de hover de menú Puedes ver que tenemos este menú vertical. Cuando pasamos el cursor sobre cualquier enlace, los otros enlaces se vuelven semitransparentes También, el texto del enlace se junta los dos lados y aparece en el fondo. Y finalmente, el color de fondo cambia para cada enlace. Este es un efecto realmente genial. Vamos a ver cómo podemos hacerlo. Comenzaré aquí en mi HTML agregando un UL, luego dentro de él agregaré una L I. Dentro de eso agregaré un enlace y agregaré texto. Agregaré home dentro del texto del enlace. Después voy a copiar este LI pegarlo cuatro veces y agregar sobre Servicios, Equipo y Contacto. Después iré a mi CSS y apuntaré al cuerpo y agregaré display, Flex, Justifique el centro de contenido, Alinear elementos, altura del centro, 100 VH, y finalmente desbordamiento oculto. Voy a apuntar a la U L agregar posición relativa Debajo de eso, apuntaré a los elementos de la lista, agregaré estilo de lista, ninguno texto, un centro de línea. Después apuntaré el enlace y agregaré color. Esta decoración de texto en color gris oscuro, None tamaño de fuente, tres relleno EMS, cinco píxeles de arriba y abajo y 20 píxeles de izquierda y derecha. Luego mostrar inline flex font weight 700, transición 0.5 segundos. Entonces, al pasar el cursor sobre cualquier enlace, queremos que los otros enlaces tengan un fondo transparente Iré aquí y diré al pasar el cursor sobre la UL, seleccionaré la etiqueta de anclaje y colocaré este color transparente Ahora al pasar el cursor sobre la UL, todos los enlaces tendrán este color transparente Ahora queremos que el enlace sobre el que estamos rondando tenga un color negro y un fondo blanco Volveré aquí y apuntaré a la UL, luego la L I al pasar el cursor sobre el enlace, agregaré color negro, luego fondo blanco Ahora, cuando coloco el cursor sobre cualquier enlace, todos los demás enlaces tienen un fondo semitransparente, excepción del enlace sobre el que estamos flotando. Bien, empecemos a trabajar en la creación del texto grande que aparece al fondo. Lo haremos usando el pseudo elemento antes. Seleccionaré el pseudo elemento antes de la etiqueta de anclaje y agregaré contenido Digamos hover para entonces voy a añadir posición absoluta top 50% izquierda 50% Luego transformar Traducir negativo 50% y negativo 50% Luego color rojo. Mostrar, Flex, justificar centro de contenido, un centro de líneas de artículos, luego tamaño de fuente cinco, EMS, luego índice z negativo uno para que aparezca debajo o detrás de los enlaces del menú. También agregaré el peso de la fuente. 900 y finalmente texto transformar mayúsculas. Ahora se puede ver que teníamos esta gran palabra roja en el fondo. Bien, ahora volvamos y sigamos. Voy a ir aquí y cambiar el color a este color gris semitransparente. Para que el texto grande se junte y tenga el efecto que queremos, necesitamos separar las letras. Hagámoslo. Voy a añadir espacio entre letras, 500 píxeles. Ahora se puede ver que las letras están separadas. Bien, también iré aquí y agregaré opacidad cero, luego transicion entre letras 0.5 segundos por debajo de eso, cuando estemos flotando sobre el enlace, seleccionaremos el pseudo elemento before y agregaremos datos de atributo de contenido que agarraremos el texto de datos dentro del enlace sobre el que estamos Después agregaremos opacidad, espaciado de una letra solo diez píxeles, para que las letras se unan Y voy a subir aquí y quitar la palabra hover de la propiedad content Ahora puedes ver cuando coloco el cursor sobre cualquier enlace, tenemos este efecto donde el texto del enlace se junta en el fondo Bien, agreguemos un color de fondo también para el texto en el fondo. Queremos un color de fondo diferente para cada enlace. Apuntaremos cada enlace individualmente. Voy a apuntar al primer eslabón diciendo L I niño uno. Entonces vamos a apuntar antes pseudo elemento del enlace dentro de esta primera LI Dentro de eso, voy a agregar fondo, este bonito color azul claro. Ahora al pasar el cursor sobre el primer enlace, puedes ver que tenemos este fondo azul claro que aparece junto con el texto Pero queremos que tenga todo el ancho y la altura del cuerpo. Voy a ir aquí dentro del fondo y agregar ancho 100 V y alto 100 H. Ahora el fondo ocupa todo el ancho y alto del cuerpo. Bien, hagamos lo mismo con los otros enlaces. Haré una pausa en el video y lo haré rápidamente. Como puede ver, acabo de seleccionar todos los demás enlaces y agregar un color de fondo diferente para cada enlace. Ahora cuando voy y pongo el cursor sobre cualquier enlace, puede ver que hay diferentes colores de fondo que aparecen dándonos, así es El efecto exacto que queremos. 140. Animación de gotas de lluvia de nubes: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear otra animación agradable, Una nube que está lloviendo. Se puede ver que tenemos este dibujo de nubes y de él caen gotas de lluvia . Esta es una animación realmente genial. Veamos cómo podemos crearlo. Comenzaré aquí en mi HTML agregando un, dándole una clase de contenedor. Después dentro de él, agregaré otro div con la clase de nube debajo de él. Voy a añadir un tercer div con una clase de lluvia. Dentro de eso, agregaré un lapso. Crearemos las gotas de lluvia usando este lapso, pero vamos a necesitar muchos vanos para crear estas gotas Voy a hacer eso muy rápido. Se puede ver que he añadido muchos vanos aquí. He añadido 20 vanos para todas las gotas. Ahora iré a mi CSS, seleccionaré el cuerpo, y agregaré Display, Flex, Justifique el centro de contenido, Alinear elementos, centro, altura mínima, fondo 100 VH, este color azul claro. Entonces por debajo de eso, apuntaré al contenedor y agregaré posición altura relativa 400 píxeles con 320 píxeles. Para crear la línea en la parte inferior, agregaré borde inferior tres píxeles blanco sólido. Bien, vamos a crear la nube. Ahora apuntaré al div con la clase de nube y agregaré posición altura relativa, 100 píxeles, ancho 100% para ocupar todo el ancho del contenedor. Después top 50 pixeles y fondo blanco. Por último, el radio del borde 100 píxeles para tener algunas curvas alrededor de las esquinas. Ahora tenemos esta forma y esta será la base de la forma de nube. Bien, sigamos adelante. Regresaré aquí y seleccionaré el pseudo elemento antes de la nube div y agregaré contenido cadenas vacías posición ancho absoluto 110 píxeles Altura de 110 píxeles también. Entonces radio de borde 50% para que sea un círculo. Entonces agregaré fondo rojo por ahora. Ahora puedes ver que tenemos este fondo rojo que se encuentra a la izquierda del div de la nube. Iré aquí y agregaré 50 píxeles negativos para desplazarlo hacia los 40 píxeles superiores para empujarlo un poco hacia la derecha. Ahora puedes ver que se ha desplazado aquí a esta nueva posición. Y esta será la segunda parte de la forma de nube. Pongámonos a trabajar en la tercera parte. Lo crearemos con un pequeño truco genial usando la propiedad box shadow. Iré aquí y agregaré sombra de caja, 90 píxeles como desplazamiento horizontal, cero como desplazamiento vertical porque no queremos que se mueva verticalmente. Entonces cero como valor de desenfoque, ya que no queremos que sea borroso Y 30 píxeles como valor spread. Este valor positivo de spread incrementará el tamaño de la sombra, por lo que tendremos un círculo más grande. Entonces agregaremos un color azul por ahora. Ahora puedes ver que tenemos este gran círculo azul que se encuentra a la derecha del primer círculo, lo creas o no, pero la forma de la nube ya está terminada. Todo lo que tenemos que hacer ahora es cambiar los colores de estos dos círculos a blancos para tener la forma de nube que íbamos a buscar. Voy a hacer eso rápidamente ahora se puede ver que al hacer eso, la forma de la nube se ve exactamente como queremos. Bien, trabajemos en la creación de las gotas. Seleccionaré la lluvia y agregaré posición, display relativo, flex, justify, content center, z index one. Entonces por debajo de eso seleccionaré los vanos dentro de la inmersión de lluvia y agregaré ancho, diez pixeles de alto Pixels fondo rojo por ahora. Radio de borde 50% de margen, luego margen cero desde arriba e abajo y dos píxeles de izquierda y derecha. Ahora se puede ver que tenemos estos pequeños círculos rojos que serán las gotas de la nube. Bien, vamos a crear la animación que moverá estas gotas. Voy a crear uno nuevo. Nombralo, luego dentro de él, al 0% de la duración de la animación, agregaré transform translate Y zero scale one. Entonces voy a copiar eso, pegarlo dos veces. Entonces al 70% cambiaré la función de traducción a 288 píxeles y dejaré la escala tal como está. Entonces al 100% cambiaré el traducir Y a 288 píxeles también, la función de escala a cero. Voy a subir aquí y decir animación en 5 segundos, lineal, infinita, y transformar el origen abajo. Ahora se puede ver que las gotas caen de la nube, llegan al fondo, y luego se reducen hasta que desaparecen Porque establecemos la función scale aquí en cero. Pero ahora queremos que las gotas caigan al azar, una tras otra. Podemos hacerlo cambiando la duración de la animación para cada lapso, pero tomará mucho tiempo seleccionar cada lapso individualmente y cambia duración de la animación uno a la vez. Podemos usar variables CSS para ayudarnos a hacer esto. Volveré aquí en mi HTML, y dentro del primer span agregaré estilo dos guiones, y así es como definimos una variable en CSS Entonces el nombre de la variable, digamos segundos. Después agregaré 11 como número de segundos para el primer lapso. También haré lo mismo para todos los demás vanos y cambiaré el valor de segundos cada vez Ahora puedes ver que he agregado diferentes valores para los segundos para todos los vanos Lo que podemos hacer ahora es volver a nuestro CSS. Y dentro del selector de span agregaré duración de animación calc 15 segundos dividido por o variable que declaramos, que es segundos. Lo que sucederá aquí es para cada lapso, la duración de la animación se calculará usando esta línea de código, 15 dividida por cualquier valor que agregamos al span en nuestro HTML. Dado que agregamos diferentes valores, obtendremos diferentes valores para cada duración de animación. 141. Animación creativa de un cargador brillante: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto cargador resplandeciente Se puede ver que tenemos estos círculos brillantes que brillan y luego se desvanecen. Usaremos la propiedad de sombra de caja para hacer eso. Entonces echemos un vistazo y veamos cómo podemos hacerlo. Comenzaré aquí en mi HTML agregando una sección, luego dentro de ella agregaré un div, le daré una clase de cargador. Entonces dentro de eso, voy a agregar un lapso. Usaremos variables CSS. Aquí, agregaré estilo, nombraré la variable I. Pondré su valor en uno, y necesitaremos este valor. Posteriormente en nuestros estilos CSS, haré lo mismo para todos los demás vanos Ya puedes ver que tenemos 20 vanos y estos serán los pequeños círculos o bulbos que brillan También he agregado diferentes valores para la variable. Esos valores aumentan de uno hasta 20 para el último lapso. Bien, ahora voy a ir a mi CSS. Selecciona la sección y agrega display Flex, Justificar centro de contenido, Alinear elementos, centro en altura, 100 VH, luego fondo este color azul marino oscuro. Entonces apuntaré al div del cargador y agregaré posición altura relativa 120 píxeles. Ancho 120 píxeles también. Debajo de eso, apuntaré los vanos dentro del div del cargador Agregar posición cero superior absoluta, cero a la izquierda también, el ancho 100% para ocupar todo el ancho de la cargadora y altura del 100% también. Después agregaré un fondo azul temporal. Ahora puedes ver que tenemos este fondo azul que tiene un ancho y una altura de 120 pixeles. Esto se debe a que establecemos el ancho y altura al 100% de su contenedor, el div cargador, que a su vez tiene un ancho y una altura de 120 píxeles. Este fondo azul en realidad no es un solo fondo, sino 20 fondos que se están cubriendo entre sí o cubriendo el mismo espacio, Y cada uno de ellos representa un lapso que agregamos en nuestro HTML. Puede que no tenga ningún sentido en este momento, pero lo veremos todo claramente en un momento. Para crear nuestro efecto, necesitaremos rotar cada lapso un grado diferente para que aparezcan todos los vanos Como tenemos 20 vanos, podemos dividir 360 grados por 20, y obtendremos 18 Para que todos los vanos aparezcan, tendremos que rotar el primer tramo 18 grados, luego el segundo en 36, y el tercero en 54 grados, y así sucesivamente y así sucesivamente Cada vez aumentamos el grado de rotación en 18. Hagámoslo muy rápido. Voy a ir aquí y agregar transformar rotar 18 grados veces v variable. Lo que sucederá aquí es que por cada lapso se rotará un grado igual a 18 veces cualquier valor que tenga su variable. Por ejemplo, el primer lapso se rotará un grado igual a 18 veces uno, que es 18. El quinto lapso se rotará por un valor igual a 18 por cinco, que es de 90 grados, y así sucesivamente y así sucesivamente. Pero no quieres oírme sólo hablar de ello. Veamos en realidad con qué vamos a terminar. Bonito. Ahora puedes ver que tenemos esta forma donde todos los vanos son visibles ya que han sido rotados un grado calculado que hace que todos aparezcan Vamos a crear los pequeños círculos que se adjuntan a estos vanos. Los crearemos usando el pseudo elemento before. Lo seleccionaré aquí y agregaré contenido. Cadenas vacías, posición cero superior absoluta, cero a la izquierda con 15 píxeles. Altura, 15 pixeles también. Después el radio del borde 50% y el fondo, este color azul claro. Ahora puedes ver que tenemos estos pequeños círculos. Eliminemos este fondo azul porque ya no lo necesitamos. Ahora se puede ver claramente todos los círculos que se adjuntan a los 20 vanos Bien, ahora vamos a hacerlos brillar muy rápido. Iré aquí y agregaré sombra de caja. Este valor, lo que acabo de hacer es aumentar el valor de desenfoque gradualmente para la propiedad de sombra de caja. Y eso es lo que le da un efecto brillante brillante, como el que ves aquí Bien, ahora vamos a crear la animación que aplicaremos a estos círculos. Voy a crear una nueva animación, nómbrala, Animate. Después dentro de él, y al 0% de la duración de la animación, agregaré transform scale one. Después al 80% y 100% agregaré la escala de transformación cero. Al inicio de la duración de la animación. Al 0% los círculos estarán en su tamaño completo. Entonces de 0% a 80% el tamaño de los círculos disminuirá hasta llegar a ser cero. Entonces se queda en cero de 80% a 100% Bien, subamos aquí y agreguemos esta animación. Voy a añadir animación animar 2 segundos lineal, infinito. Ahora se puede ver que los círculos se están escalando hasta que desaparecen Y luego vuelven a escalar, dándonos este bonito, resplandeciente, efecto brillante que parece bombillas. Y este es un bonito efecto ya que podemos usar en nuestros proyectos. Pero ahora probemos algunas cosas geniales. Podemos usar la propiedad de delay de animación para manipular cuando comienza la animación del círculo, y esto puede darnos algunos efectos geniales. Vamos a darle una oportunidad. Iré aquí y agregaré retardo de animación 0.1 segundos veces o variable. Cada lapso tendrá un retardo de animación diferente según el valor de la variable. Vamos a probarlo. Puedes ver que tenemos este bonito efecto genial que parece que los círculos están girando unos alrededor de otros. Prueba otro valor, voy a cambiar 0.1 segundos a 0.2 segundos. Ahora puedes ver que estamos obteniendo otro efecto genial que divide el círculo en dos mitades que están girando una tras otra Aquí tienes una sugerencia. ¿Qué tal si sigues adelante y juegas un poco con el retardo de animación y los valores de duración de la animación y ves qué efectos geniales puedes obtener 142. Efecto de desplazamiento del cursor en el menú: Hola a todos. Bienvenidos a otra nueva lección del curso. En esta lección, vamos a crear otro nuevo efecto de desplazamiento de menú Puedes ver que tenemos este menú vertical donde sus enlaces tienen un borde izquierdo. Y cuando pasamos el cursor sobre el borde izquierdo, puedes ver que se mueve hacia el lado derecho del enlace, y el trazo del enlace se llena por el color, dándonos este efecto genial Comenzaré aquí en mi HTML agregando un UL, luego un L I dentro de él, y una etiqueta de anclaje dentro de eso. Después agregaré texto de datos para el primer enlace y agregaré dentro del enlace. Entonces voy a copiar eso, pegarlo cuatro veces. Cambiaré el texto para cada enlace. Ahora puedes ver que tenemos sobre servicios, equipo y contacto. Bien, ahora vamos a nuestro CSS y apuntemos al cuerpo. Voy a agregar display flex, justify, content center, align items, center, min, height, 100 VH fondo este color. Entonces apuntaré a la U L y agregaré posición relativa display flex, flex dirección columna y gap 30 pixeles. Entonces apuntaré a la L I y agregaré posición relativa estilo de lista N. Luego por debajo de eso apuntaré el enlace y agregaré posición relativa tamaño de fuente para EMS, decoración de texto, no espaciado entre letras. Dos píxeles, altura de línea, un texto EM transforma mayúsculas. Para hacer del texto un esquema, agregaré color transparente. El trazo de texto, un píxel, este color gris. Ahora puedes ver que el color del enlace es transparente y tenemos un contorno gris alrededor del texto. Bien, vamos a seguir adelante. Seleccionaré el pseudo elemento antes del enlace y agregaré contenido atributo nuestro texto de datos Ahora puedes ver que tenemos el texto de los datos aquí. Al lado de cada enlace, volveré y agregaré posición absoluta. Ahora que establecemos la posición en absoluto, el texto de datos está sentado justo encima del enlace de texto. Parece que son una cosa, pero vamos a agregar color, este color azul. Ahora puedes ver que el texto de datos tiene este color azul y el texto original del enlace está debajo él o debajo de él como contorno. También volveré y agregaré borde derecho, ocho pixeles sólidos, nuestro color azul. También agregaré trazo de texto, un píxel, nuestro color azul. Ahora puedes ver que tenemos este borde azul a la derecha. Y el texto también tiene un trazo azul en lugar de gris. Bien, ahora queremos ocultar el pseudo elemento antes, este texto azul y que solo aparezca cuando pasemos el cursor sobre el enlace Voy a ir aquí y agregar ancho 0% luego desbordamiento oculto. Por último, transición 1 segundo. Ahora puedes ver que el pseudo elemento antes tiene un ancho de cero y está oculto y el contorno del texto del enlace original es visible De nuevo, volveré a mi CSS y diré al pasar el cursor sobre el enlace, seleccionaré el pseudo elemento antes y agregaré ancho 100% Ahora cuando vaya y pase el cursor sobre cualquier enlace, podrás ver el ancho del pseudo elemento antes vuelve y diré al pasar el cursor sobre el enlace, seleccionaré el pseudo elemento antes y agregaré ancho 100% Ahora cuando vaya y pase el cursor sobre cualquier enlace, podrás ver el ancho del pseudo elemento antes y está oculto y el contorno del texto del enlace original es visible De nuevo, volveré a mi CSS y diré al pasar el cursor sobre el enlace, seleccionaré el pseudo elemento antes y agregaré ancho 100% Ahora cuando vaya y pase el cursor sobre cualquier enlace, podrás ver el ancho del pseudo elemento antes vuelve a aumentar para cubrir el esquema del enlace. Mientras se hace más grande, el borde de la derecha se mueve junto con él, dándonos este bonito efecto. Pero se puede ver que la frontera está muy cerca del enlace. Será mejor si hay algún espacio entre el enlace y la frontera Podemos hacerlo agregando algo de espacio alrededor del texto del enlace así como el texto de datos. Iré a mi HTML y dentro del texto de datos antes del texto del enlace, agregaré un espacio no rompiendo que es un carácter especial en HTML que agrega espacios en texto HTML. Voy a añadir otro antes del texto del enlace y otro después de él. Ahora se puede ver que el borde se ha desplazado un poco hacia la izquierda, y al pasar el cursor sobre el enlace, también tiene algo de espacio a la derecha Y hace que se vea mucho mejor. Bien, lo haré muy rápido para todos los demás enlaces. Ahora cuando coloco el cursor sobre cualquier enlace, puedes ver que el borde se mueve de derecha a izquierda Junto con el crecimiento del pseudo elemento antes, dándonos nuestro efecto realmente genial 143. Animación de carga de puntos creativos CSS: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de carga. Puedes ver que tenemos este efecto donde tenemos ocho círculos, Cuatro de ellos son fijos, y los otros cuatro están girando alrededor de ellos, dándonos este efecto genial. Comenzaré aquí en mi HTML agregando un div, dándole una clase de box. Después dentro de él, agregaré otro div con una clase de cargador. Entonces dentro de eso, agregaré un span y agregaré estilo. Entonces usaremos las variables CSS aquí. Voy a añadir I como nombre de variable y darle un valor de uno. Entonces copiaré este lapso y agregaré otros siete vanos para que tengamos un total de ocho vanos como ves aquí Cada vez que el valor de la variable aumenta en uno, 1-8 Luego debajo de este cargador, agregaré una H tres y diré cargando. Después iré a mi CSS y seleccionaré el cuerpo, A Display Flex, justify, content center, Align items center, luego en altura 100 VH, y finalmente desbordamiento oculto. Entonces apuntaré al cargador. Agregar posición ancho relativo 20 pixeles, alto 20 pixeles. Después un fondo rojo temporal. Ahora puedes ver que tenemos este fondo rojo que está centrado dentro del cuerpo. Bien, ahora vamos a darle estilo a la H dos. Lo seleccionaré y agregaré posición absoluta superior 50% izquierda 50% transformar traducir negativo 50% y negativo 50% para centrarlo vertical y horizontalmente. Después agregaré tamaño de fuente 18 pixeles, colorea este color azul marino. Ahora puedes ver que la H tres está centrada dentro de la inmersión del cargador. Bien, sigamos adelante. Voy a apuntar a los ocho vanos dentro del cargador. Añadir posición, cero superior absoluto izquierda cero ancho 100% alto 100% también. Después agregaré un fondo azul temporal. Ahora puedes ver que tenemos este fondo azul sentado encima del rojo. En realidad, esos son de vuelta múltiples orígenes. No solo uno, sino que están sentados uno encima del otro. Pero queremos rotarlos todos por grados específicos para que todos sean visibles. Voy a añadir transformar rotar. Como tenemos ocho vanos, rotaré el primero 45 grados, luego el segundo 90 grados, luego el tercero 135 grados, y así de esa manera, y así de esa manera, el final girará exactamente 360 grados, ya que 360/8 Bien, hagámoslo. Voy a ir aquí y añadir 45 grados veces V. Voy a añadir nuestra variable que contiene estos valores en nuestro HTML. El primer lapso girará una vez 45, que es 45. El segundo lapso se girará dos veces 45, que es 90, y así sucesivamente y así sucesivamente para todos los demás tramos hasta que el último sea girado 360 grados Como se puede ver. Ahora tenemos esta estrella que tiene ocho cabezas, pero sigamos adelante. Añadiremos los ocho círculos como un pseudo elemento antes. Para estos ocho vanos, seleccionaré el pseudo elemento antes de los spans y agregaré contenido cadenas vacías posición Cero izquierda, ancho cero, 20 pixeles, altura 20 pixeles, radio del borde 50% Entonces finalmente, color de fondo, este color azul. Entonces eliminaré este color de fondo azul y este color de fondo rojo. Ahora puedes ver que tenemos estos ocho puntos azules que rodean perfectamente el cargador. Bien, ahora queremos seleccionar solo cuatro puntos de los ocho para cambiar su color y animarlos. Queremos el segundo, el cuarto, el sexto y el octavo. Voy a ir aquí y añadir span nésimo niño incluso. Lo que esto hará es seleccionar sólo los elementos que tengan un número par, el segundo, el cuarto, y así sucesivamente. Entonces dentro de eso voy a agregar un color de fondo, este color azul claro. Ahora puedes ver que estos elementos tienen un color de fondo azul claro. Bien, vamos a crear una nueva animación. Nombrarlo círculo dentro de él. Al 0.25% agregaré transformar rotar cero grados y escalar uno Entonces al 50% agregaré transform rotate 90 grados y escala 1.3 así se hará un poco más grande mientras gira. Entonces por debajo de eso al 75% y al 100% agregaré rotar 180 grados y escalar uno para devolverlo a su tamaño original. Entonces iré hasta aquí y agregaré círculo de animación 1 segundo lineal infinito. Ahora puedes ver que los círculos están escalando y girando. Pero como están girando alrededor su punto central y sus círculos, realidad no parecen estar rotando. Lo que podemos hacer para que roten alrededor los otros círculos es que podemos ir aquí y agregar transformar origen 60 píxeles. Ahora puedes ver que los círculos se mueven alrededor de los otros, dándonos nuestro efecto realmente genial. 144. Efecto de desplazamiento del menú con desvanecimiento de texto: Hola a todos. Bienvenidos a esta nueva lección del curso. En esta lección, vamos a crear este bonito efecto de hover de menú Se puede ver que cuando pasamos el cursor sobre cualquier enlace en el menú. Este efecto ocurre donde el color del enlace se vuelve semitransparente y este pequeño texto verde brillante aparece encubriendo el texto del enlace Es un efecto bastante simple pero genial. Veamos cómo podemos crearlo. Comenzaré aquí en mi HTML agregando una sección dentro de él. Agregaré una UL, luego una L I, y una etiqueta de anclaje dentro de esta L I. Luego agregaré un atributo de texto de datos y agregaré home dentro de él. Después agregaré casa dentro de la etiqueta de anclaje. Entonces usaremos este atributo data text para recuperarlo y usarlo como el texto superpuesto Se puede ver que acabo de copiar y pegar estos enlaces y acabo de cambiar el texto Bien, vamos a nuestro CSS y seleccionemos la sección. Voy a agregar posición, ancho relativo, 100% alto, pantalla 100 VH, flex, justificar contenido, centrar una línea, artículos, centro, desbordamiento, fondo oculto, este color gris oscuro. Entonces apuntaré al LI dentro la UL y agregaré el estilo de lista ninguno. También apuntaré la etiqueta de anclaje en posición relativa pantalla bloque decoración de texto no texto alinear texto centro transformar texto mayúscula tamaño de fuente cuatro, EM color blanco peso de fuente 700, transición 0.5 segundos. Ahora puedes ver que los enlaces se ven mucho mejor. Bien, sigamos adelante. Al pasar el cursor sobre el enlace, queremos que el color del enlace sea un color semitransparente Diré al pasar el cursor sobre la etiqueta de anclaje, agregaré color, este color que es solo blanco, pero con opacidad 0.1 Bien, ahora al pasar el cursor sobre el enlace, puedes ver sus cambios de color al color semitransparente que queremos Bien, ahora vamos a trabajar en el pequeño texto. Usaremos el pseudo elemento antes de la etiqueta de anclaje. Para ello, lo seleccionaré. Dentro de él, agregaré atributo de contenido, texto de datos para recuperar el texto dentro del atributo de texto de datos para cada enlace. Entonces agregaré posición absoluta arriba 50% left 50% Luego colorea este hermoso color verde. Ahora puedes ver que el texto verde está cubriendo los enlaces. Bien, volvamos y agreguemos tamaño de fuente 0.35 M para que el tamaño de fuente sea más pequeño Al igual que nuestro ejemplo entonces, espaciado entre letras, 40 píxeles para separar las letras. Ahora puedes ver que las letras son más pequeñas y están separadas entre sí. Sigamos un poquito más adelante. Queremos agregar un poco de efecto de resplandor a los enlaces. Añadiré sombra de texto 0010 píxeles como valor borroso. Entonces nuestro color verde, voy a copiar y pegar ese valor dos veces y aumentar el valor de desenfoque cada vez. Después voy a añadir el peso de la fuente 500. Ahora puedes ver que el texto está brillando debido a la sombra de caja que agregamos Bien, volveré y agregaré transición 0.5 segundos y opacidad cero para ocultar el texto Entonces por debajo de eso, al pasar el cursor sobre el LI, seleccionaré el pseudo elemento antes y agregaré opacidad uno y espaciado entre letras seis píxeles Animaremos la propiedad de espaciado entre letras de 40 píxeles a seis píxeles para obtener nuestro efecto Así como así, al pasar el cursor sobre cualquier enlace, el pequeño texto se une y luego el texto del enlace se desvanece Pero queremos agregar algún retraso de transición que los enlaces se desvanecen primero, y sólo después de eso aparezca el texto verde. Entonces, cuando nos alejamos, el texto verde desaparece primero, luego el enlace original vuelve a ser blanco Podemos hacerlo fácilmente yendo aquí dentro de la etiqueta de anclaje y agregando retardo de transición 0.5 segundos. Entonces, al pasar el cursor sobre él, agregaremos retardo de transición cero Al hacer eso, al pasar el cursor sobre el enlace, cambiará de inmediato Pero al alejarse, esperará 0.5 segundos. Entonces haremos exactamente lo contrario al texto verde. Iré aquí al pasar el cursor sobre él y agregaré retardo de transición 0.5 segundos. Al flotar, el retraso ocurrirá, pero al flotar lejos, no sucederá Se puede ver que el enlace anima luego el texto verde cuando se aleja, el texto verde anima luego el enlace, dándonos exactamente el efecto