Animaciones modernas de clippath en CSS

1. INTRODUCCIÓN: Hola a todos, y bienvenidos a este emocionante curso sobre animación CSS Kip Path. Mi nombre es John Shortca y en este curso, vamos a explorar una de las características más poderosas y creativas del CSS moderno Trayectoria de patada. A medida que aprendemos a transformar el elemento simple en un impresionante diseño animado. Si alguna vez has visto una imagen creativa revela efectos de hover únicos, transformación de sección dinámica, morphing de formas animadas, animación moderna de portafolio, y preguntarse al respecto, cómo son vencidos Entonces estás en el lugar correcto. Vamos a iniciarlo desde la propiedad lipath. Cómo se diferencia el trabajo como círculo labios polígono. También vas a aprender cómo los puntos de coordenadas controlan las formas. Además, vamos a aprender a visualizar y diseñar polígonos personalizados Básicamente, en ese curso, vamos a aprender el concepto haciendo. Empecemos. 2. Cómo dibujar diferentes formas geométricas usando la ruta de clippath: Entonces a partir de este tutorial, vamos a iniciar la animación clip-path, cómo podemos crear diferentes formas y cómo podemos animarla Sin perder el tiempo, comencemos la práctica y veamos qué vamos a crear. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor en vivo y ya creo un nombre de documento estimado índice punto HTML. Con eso, creo estilo punto archivo CSS, y aquí hago algunos estilos básicos como en nuestro cuerpo, pongo fusión, relleno, este deflex justificar contenido, alinear elementos, etcétera Después establecemos la altura y anchura de la imagen 400 píxeles por 400 píxeles y solo tenemos una imagen en nuestra etiqueta corporal. Ahora, voy a agregar pequeño borde en este g. Por ahora, quiero asignar borde rojo sólido, borde subtipo, y quiero borde sólido, dos píxeles, dos píxeles, sólido y borde blanco Para entender lo que voy a traer aquí. Voy a decir estos cinco. Aumentemos la frontera con un poco. Voy a hacer que sea de cinco píxeles. Ahora vamos a entender propiedad CSS clip-path y cómo podemos usar esta propiedad para crear diferentes formas geométricas, como triángulo, forma de polígono, estrella, cualquier tipo de forma estrella, cualquier tipo Pero antes necesitamos entender qué es la propiedad clip-path, esta propiedad nos permite mostrar parte específica de una imagen de lo contrario cualquier forma Va a mostrar la cantidad exacta de área que especificamos y va a ocultar el resto de la imagen. De lo contrario, el resto del objeto. Vamos a empezar ejemplo con un triángulo. Vamos a crear una forma de triángulo. Vamos a partir de este punto, entonces vamos a trazar una línea de este punto a este punto, luego este punto, y nuevamente, necesitamos volver al primer lugar. Se va a crear una forma de triángulo. Aquí, voy a usar la propiedad llamada clip-path, clip pero aquí en nuestro valor, voy a usar polygon shape, algún tipo polygon Ahora necesitamos definir la posición desde donde vamos a empezar desde donde vamos a kit. Entonces de los XXs voy a tomar 50%, 50% de esta imagen Quiero decir en ese punto y desde YXS voy a tomar cero, va a empezar desde este lugar Aquí de XXS voy a pasar el 50% y de la xs, voy a pasar 0% Esto es por el primer valor. Y para el siguiente valor, voy a dibujar otro punto en esa posición. Para eso, de XXs voy a pasar 0%. Me muevo 0%. Pero de los YxS de esta posición a esta posición, voy a moverme al 100% Espacio 100%. Después de eso, voy a dibujar otro punto en esa posición. Entonces de la XXS y YXS también voy a tomar 100 por 100%, 100 por 100% Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. No necesitamos esta frontera por ahora, así que voy a comentar esta línea y volver a guardarla. Ahora puedes ver el resultado perfecto. Simplemente creamos el borde para entender las coordenadas. Usando la herramienta polígono, aquí dibujamos una forma de polígono rectangular y el resto de la parte se esconde Muestra solo cuál está dentro de la forma del polígono. Es realmente fácil dibujar una forma rectangular, pero usar código para dibujar una forma es muy difícil. Para eso, necesitamos usar alguna herramienta de otra manera sitio web. Aquí puedes obtener el código de las formas. Voy a presentar un sitio web llamado clipping y va a proporcionar múltiples formas poligonales como triángulo, webel, estrella, scross, frame, Por ahora, voy a usar esta señal de cruz, así que voy a dar click sobre ella. Proporcionará, este código de polígono. Es muy difícil crear una forma de cruz escribiendo el código. Voy a copiar este código de polígono y voy a reemplazar el antiguo código de polígono con nuevo código de polígono, y voy a configurar Después configuré este archivo, si vuelvo a mi navegador, aquí puedes ver el resultado. Aquí puedes ver la forma. Así es como puedes aplicar cualquier forma, como si aplico forma de estrella, así selecciono estrella y copio el código del polígono, y voy a reemplazar el código, y voy a reemplazar el código de polígono antiguo con el código de polígono estrella Voy a establecer este archivo. Como puedes ver ahora, puedes ver esta imagen estrella de Kipath Entonces así es como podemos dibujar cualquier forma geométrica difícil y crear un camino clave Entonces esto es todo para este tutorial. En nuestro siguiente tutorial, vamos a empezar a animar nuestras formas con el clip-path Así que gracias por ver este video, mantente atento para nuestro próximo tutorial. 3. Animación de olas de trazo de clip con CSS: Hola a todos. Bienvenidos a la nueva lección de este curso. En esa lección, vamos a crear este hermoso agradable efecto ondulado usando esta animación CSS y propiedad ki path. Es un ejemplo muy genial, y en ese tutorial, vamos a aprender cómo podemos animar una propiedad kip path y crear este tipo de efecto Entonces, sin perder el tiempo, volvamos al Cditor Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creo un documento estimable llamado index Al principio, dentro de la etiqueta corporal, voy a tomar una etiqueta profunda, Deep dot y nuestro nombre de clase es onda. Entonces dentro de esta etiqueta profunda aquí, voy a tomar un total de dos H dos etiqueta rumbo a etiqueta. H dos y dentro de esta H dos onda diag, luego duplico esta línea. Yo configuré este archivo. Después de configurar este archivo, puedes ver el resultado en mi navegador. Se puede ver el texto. Ahora tenemos que ir y saltar al estilo Dot CSS file. Ahora, como puedes ver, no creamos estilo Dot CSS file. Ahora voy a crear style dot css file, style dot css. Y vinculo este archivo con este documento. Así que aquí voy a escribir link style dot style dot css, y configuré este archivo de nuevo. Ahora vamos a saltar a este estilo de archivo CSS y empezar a peinar. Al principio, voy a importar una fuente. Voy a importar una fuente de Google, y voy a usar alway font Importo la fuente alway de Google fonts y voy a hacerla Wadrap y luego voy a empezar a Primero, voy a usar Selector Universal, star. Entonces dentro de los Cavses voy a asignar Margen Margen cero Entonces después de eso, voy a asignar relleno. Relleno también cero. A continuación, dimensionamiento de caja, caja de borde de tamaño de caja. Después de eso, voy a asignar familia de fuentes a toda la familia de fuentes en algún momento , Ralwey Y si Ralway no está disponible, en ese caso, quiero usar Area y voy a configurar este archivo Después de establecer este archivo, así es como se ve nuestro texto. A continuación, necesitamos darle estilo al cuerpo. También, necesitamos poner el texto en medio de la página. Para eso, voy a seleccionar la etiqueta body y dentro de los cursos, primero, voy a asignar color de fondo. Color de fondo, pelo, voy a escribir, HatGFFF. Este color de fondo oscuro. Dije este archivo. Así se veía, gris oscuro. Entonces voy a asignar altura a la página. Altura, altura igual a altura 100 VH. Altura de 100 pies. Entonces esta jugada, voy a hacerla flex, justificar contenido, justificar el centro de contenido, y alinear elementos, alinear elementos también centro porque quiero poner las colas vertical y horizontalmente al centro de la página, y voy a configurar este archivo. Después de establecer este archivo, se puede ver el resultado. A continuación, voy a apuntar a la continua D, la clase de onda. Copio la onda de nombre de clase y vuelvo al archivo Closs, y aquí estoy de onda de punto dentro del Carlss entonces voy a sumar posición, y voy a hacerla relativa después de eso W, voy a asignar También altura, 500 píxeles. A continuación, tenemos que apuntar a la etiqueta H dos y necesitamos crear el texto poco grande. Además, necesitamos colocar el texto uno encima del otro. Para ello, necesitamos hacer que la posición sea absoluta. Déjame mostrarte cómo. Voy a apuntar a H dos etiqueta y primera propiedad, voy a usar posición posición, voy a hacerla absoluta. Entonces necesitamos usar la propiedad llamada texto alinear texto alinear, aquí estoy bien postes Alinear centro. Además, voy a asignar alguna altura de línea. Altura de línea, ine altura porque necesitamos centrar vertical y horizontalmente el texto, por eso uso esta propiedad. Altura de línea 500 píxeles tamaño de fuente tamaño de fuente. Voy a hacerlo un poco grande. Voy a asignar tamaño de fuente uno fue pixel. Depende de ti lo grande de la fuente que quieras usar. Entonces voy a ponerla en mayúscula. Texto, transformar. Transformación de texto, voy a ponerla en mayúscula. Voy a establecer este archivo. Después de configurar este archivo, así es como se ven nuestras tomas ahora. Ahora puedes notar que nuestros encabezados son más grandes y pagan uno encima del otro Si de otra manera, si clip-path cualquier texto, se puede ver el de atrás A continuación, tenemos que apuntar tanto al elemento H dos. Quiero decir que tenemos que apuntar a éste y a aquel. Para eso, voy a usar en propiedad infantil. Entonces escribe, H dos, H dos, primero, soy colon, y voy a apuntar en niño uno. Entonces dentro de la burda, voy a usar propiedad de color, color Aquí voy a aplicar este color, este color azul. Soy tipo siete EF a cinco, es de color azul claro y voy a sorber el archivo. Si me siento este archivo apenas ves el color por el segundo texto porque nuestro elemento de pulgada dos cubre el primero. Por eso apenas se ven los antecedentes del primer hijo. Pero, ¿qué? Si aplico clip-path sobre el primero, déjame mostrarte Pero antes de hacer clic en éste, el segundo elemento, voy a duplicar esta línea y voy a seleccionar enésimo hijo a elemento, y voy a cambiar el color del texto Aquí, voy a decir color Tiene etiqueta cero 3a9a4. Este código de color. Voy a proporcionar poco color azul oscuro, este color. Ahora si aplico guardado al texto hijo, entonces se puede ver el anterior, el primero. Déjame mostrarte cómo. Vamos a saltar al sitio web. Ya presenté este sitio web en nuestro tutorial anterior, cómo se puede utilizar. A partir de aquí, voy a tomar 50% de la izquierda por la derecha, 50% de la izquierda. Eso es bueno. Después copio el código. Selecciona el código y copia el código del polígono, la forma clip-path, y voy a ponerlo aquí Básicamente, aquí quiero recortar la parte superior del segundo encabezamiento. Quiero mostrar sólo el 50% de la segunda partida. Entonces aquí, si utilizo la propiedad, clip-path polygon, si clip-path el segundo texto, segundo en child y luego configuro este archivo, aquí se puede Ahora puedes notar que la parte superior del segundo encabezado está recortada y la parte superior es visible en color azul claro Es de niño de primera pulgada. Porque yo clip el segundo. Ahora voy a comentar de esta línea porque por ahora, no la quiero. Solo lo uso para mostrarte cómo es el trabajo, cómo vamos a lograr el efecto ondulado. Comento la propiedad de ruta clave. Yo configuro este archivo, de nuevo, segundo encabezamiento es visible. Necesitamos crear la animación ondulada del segundo encabezado. Ahora volvamos al CSS y creamos una nueva animación. Escriba, agregue los fotogramas clave ate. En los fotogramas clave, voy a escribir onda. Ola dentro de los carlerss al 0% de duración, voy a hacer algo A continuación, al 50% de duración, voy a hacer algo. Voy a aplicar un clip-path diferente, y al 100% de duración, voy a aplicar Entonces estos son tres estados de animación que creamos para la animación, y necesitamos poner aquí la propiedad Kipath Ahora, para lograr el efecto ondulado, necesitamos volver al sitio web de KiPe Y a partir de aquí, necesitamos seleccionar Custom polyer y esto nos permitirá crear cualquier forma que queramos Al sumar los puntos, voy a crear una forma ondulada. Entonces primero, voy a comenzar desde este punto, luego en ese punto, luego voy a dar click aquí, y a continuación, voy a dar click en esa posición. Creo que es bueno para crear la curva. Entonces voy a cerrar el camino. Entonces hago clic aquí, aquí y aquí. Se crea una especie de onda. Y si quieres arreglarlo, sí, puedes, solo puedes arrastrar el ratón y mover los puntos. Y si quieres crearlo más ondulado, sí, puedes ajustándolos, entonces voy a copiar el valor. Secto todo el polígono el con propiedad de ruta Kip y vuelvo al archivo CSS Y al 0% de duración de la animación, voy a Usar el Kip. Voy a usar la propiedad clip-path Eso es. También voy a usar la misma propiedad de Kipeth al 100% de duración Eso es bueno. Ahora para el 50% de duración, necesitamos cambiar la dirección web. Tenemos que moverlo sección opuesta . Ahora bien, ¿cómo podemos hacer eso? Ahora voy a crear una onda opuesta en otro calibre y a arrastrar los puntos. Voy a moverlo un poco hacia arriba. Voy a hacer ésta hacia arriba. Mm si, es muy difícil de arreglar, pero casi lo logramos. Casi arreglo y creo una ola en dirección opuesta. Voy a copiar ese código, y lo voy a poner dentro de la duración del doblaje del 50% Eso es bueno. Ahora vamos a llegar al navegador. Después de eso, crear la animación de onda, necesitamos llamar a la animación en nuestro hijo a la propiedad. Entonces aquí voy a llamar a la propiedad de animación animación. El nombre de la animación es onda. Entonces voy a declarar la duración de la animación. Animación onda animación durion es dos segundos y la duración de la animación está adentro hacia fuera está adentro hacia fuera. Y quiero ejecutar la animación por tiempo infinito, infinito. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes notar el resultado. Así es como se anima. Parecía en el agua, agua dentro del texto, y es sacudida así por esta ola de animación. Básicamente, se anima a la primera forma para decir en forma, y de nuevo, vuelve a la primera forma Por eso podemos crear este hermoso efecto de ondulación de agua Y si quieres una animación poco más rápida, solo disminuye la duración. Si lo hago dos segundos y luego sub este archivo, ahora se puede notar el resultado. Ahora se mueve un poco más rápido, y el color azul claro que se puede ver, viene de la primera partida. Además, sí creó un efecto hermoso. Si lo hago transparente, déjeme mostrarle. Si duplico esta línea y comento la anterior, y hago este color transparente. Transparente, y voy a añadir algo de trazo. Si configuro este archivo, ahora se volverá completamente transparente. Pero si agrego algún trazo algunos tipos, ket web, ket web, guión, trazo de texto, texto, trazo, entonces voy a asignarle algún trazo de texto sobre él. Voy a asignar dos píxeles, dos píxeles, y nuestro stroker es hTag 03, un nueve, un cuatro, este color azul claro, exactamente este color azul claro, y dije este archivo Y así es como logramos este hermoso efecto de texto WD con la propiedad help up and emision y la propiedad keypath Espero que ahora el concepto sea claro para ti cómo puedes hacer eso. Gracias por ver este video estén atentos para el próximo proyecto. 4. Animación del desplazamiento de texto de trazado del clipe: Hola a todos. Bienvenidos al nuevo proyecto de este curso. Y en ese proyecto, vamos a crear ese bonito efecto de texto O. Como pueden ver, cuando coloco mi Karza hacia la porción blanca, el texto de habla blanca, se puede ver que completa la Quiero decir que completa el texto. la misma manera, si pongo mi Karza sobre la negra, completa la Oculta el texto blanco y reemplaza por texto negro. Vamos a crear esa con la ayuda de Kip up property. Veamos cómo podemos crear éste. Como pueden ver lado a lado, abro mi editor de código Exhaustio y mi navegador usando extensión de servidor if y ya creé un documento HTML para nombrar index dot Con eso, creo archivo CSS de estilo punto y vinculo este archivo con este documento. Si abro mi archivo CSS de estilo, aquí importo una fuente. Aquí importo una fuente, y aplico esta fuente en mi página, toda la página, y nuestro nombre de fuente es Ralway Voy a aplicar esta. Ahora, volvamos al punto índice HTML. Y aquí dentro de la etiqueta corporal, voy a tomar un total de dos H una etiqueta, pero antes voy a tomar una etiqueta profunda, dip y es nuestra principal clase profunda. Entonces escribe clase, voy a asignar una clase Min. Es nuestra principal clase profunda. Entonces dentro de este elemento dip principal, aquí, voy a al principio, voy a tomar una etiqueta H una, y dentro de esta etiqueta H una, voy a escribir negra. Entonces duplico este y voy a sustituir el negro por el blanco. Voy a establecer este archivo. Después de configurar este archivo, volvamos al archivo de estilo o CSS y comencemos a diseñar el cuerpo. Entonces aquí, voy a apuntar a la etiqueta corporal, cuerpo y dentro de esta etiqueta corporal. Dentro de esta etiqueta corporal, primero, voy a aplicar un color de fondo. Color de fondo. Y para este fondo, voy a tomar una especie de fondo claro claro de color azulado Para eso, voy a pasar este código. Etiqueta, C ocho, D seis, E cinco, y voy a poner este archivo. Después de establecer este archivo, así es como se ve. Entonces después de eso, voy a asignar una altura a nuestra etiqueta corporal, altura voy a asignar altura 100 V H. Después de eso, después de eso, voy a asignar dis liberty. Display, esta obra, voy a hacerla flex, y voy a asignar, justificar, justificar contener centro. También alinear alinear elementos también centro, y voy a establecer este archivo. Después de establecer este archivo, como puedes ver, ayuda a lugar que lleva a mitad de la página horizontal y verticalmente. Ahora vamos a darle estilo al elemento div principal. Aquí voy a seleccionar el elemento div principal usando su ID main. Es una calcomanía ress la primera propiedad voy a usar posición, posición, voy a hacerla relativa. Después de eso, después de eso, aplicar la posición, quiero definir alguna hierba. Rojo, y asignaría casi 800 píxeles. Creo que 800 píxeles es genial para ello. 800 pixeles. Después de eso, voy a apuntar a la etiqueta g one, la edad uno. Después dentro del css, primero, voy a definir la posición. Esta vez, voy a hacerlo absoluto. Después de esto, voy a colocarlo desde arriba, 50%. Desde abajo desde la izquierda desde la izquierda, voy a colocarlo 50% y voy a aplicar transform property, Transformar, transformar, traducir, Transformar, traducir, -50%, coma -50% Voy a fijar esta. Apo eso, entonces arriba que voy a asignar margen margen cero, también el relleno cero y voy a definir algunos con ancho, y quiero usar el ancho cien por ciento, 100%, no el diez es 100. Voy a configurar este y va a colocarlo del lado derecho, lado izquierdo de nuestra página. Ahora, alineemos el texto. Alinear el centro de texto de la página. Así que escriba text align, text align center. Después de eso, tamaño de fuente tamaño de fuente, voy a asignar tamaño de fuente 200 píxeles y transformación de texto, transformación de texto, transformación , mayúsculas, y voy a establecer este archivo Después de establecer ese archivo, se puede ver el resultado. Aumentemos el ancho de tamaño de este navegador. Como se puede ver, tanto los ts sentados encima uno del otro. A continuación, quiero apuntar a este segundo H un elemento. Para eso, voy a usar enésimo selector hijo. H uno, enésimo hijo NT H niño y dentro de los versos redondos, quiero seleccionar dos segundos H dos elem Entonces dentro de la ress Clive voy a aplicar color, color , y esta vez quiero aplicar blanco color blanco. Después de eso, voy a aplicar propiedad de transición, transición, y voy a usar transición por 0.5 segundos. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. A continuación, necesitamos hacer visible el centro de texto de lo. Para eso, necesitamos usar clip-path, así que tenemos que ir a saltar al sitio web de lippy Abro una ventana y busco la forma de clip-path lippy. A continuación, voy a seleccionar la forma trapezoidal, y necesitamos hacer visible el hub de lo y ocultar la otra mitad Yo creo esta forma y voy a copiar el código y volver al navegador. Voy a pegar el código al principio, segundo octavo elemento hijo quiero establecer este. Ahora puedes notar que corta el eje del texto blanco. Entonces dividimos con éxito el texto blanco. Entonces esta parte es visible y la otra parte está oculta. Ahora el problema es que el texto negro es visible detrás del texto blanco. Entonces tenemos que cortar esa porción. Ahora, para ocultar esta porción, no voy a cortar esta. Voy a agregar un color de fondo a nuestro texto. Entonces si copio, voy a copiar el mismo color de fondo. Si color de fondo propiamente T, que aplico en nuestro cuerpo, copio este y vuelvo al enésimo hijo dos y aplico este al dorso del texto blanco Si envío este, puedes notar que oculta la palabra negra de fondo. Ahora tenemos casi la forma exacta que queremos. A continuación, tenemos que trabajar en el efecto hover. Ahora, cuando pase el cursor sobre el segundo en niño, quiero ver el blanco, quiero que sea completamente visible Detecta eso. Seleccionemos éste. Voy a copiar el código exacto y crear un selector de Hover opt Copio este y lo voy a pegar aquí y voy a usar colon hover cursor, luego dentro del Clss, luego dentro del colss voy a aplicar una Volvamos al sitio web de Klippe. Y para que sea a tamaño completo, simplemente voy a arrastrar este y hacerlo a tamaño completo y copio el código, y lo voy a poner aquí. Ahora, vamos a llegar al navegador y establecer ese archivo. Después de establecer ese archivo, si pongo el cursor sobre este elemento, se puede notar el efecto Arriba el cursor sobre él, vuelve al estado original y como puedes ver, aplicamos un color de fondo, similar al color de fondo del cuerpo Por eso esconde la palabra negra, que está detrás de ella. A continuación, tenemos que hacer lo mismo para el texto negro. Para ello, necesitamos crear un selector Her para el primer elemento. Entonces voy a duplicar esa sección y quiero apuntar a la primera. Después de eso, voy a quitar este código, y aquí uso su selector. Entonces cuando pongo el cursor sobre el texto negro, quiero quiero desaparecer por completo el texto blanco En dirección opuesta. Tenemos que trabajar en el segundo elemento hover. Aquí usaría un selector avanzado. Cuando coloco el cursor sobre uno negro, quiero apuntar al blanco Voy a usar el selector inmediato siguiente H one. Y volvamos al Clippy. Voy a arrastrar este punto a la cima y esto es exactamente lo que necesito. Quiero desvanecer el texto blanco. Copia este código y lo voy a poner aquí y volvamos al archivo del documento, y voy a guardar este. Después de establecer este después de establecer este archivo, si coloco mi casar sobre la porción negra, logramos este efecto, wor Cuando coloco mi casar sobre el texto blanco, completa el texto blanco si coloco mi casa a la negra, desaparece el texto blanco y devuelve solo el texto negro, así logramos nuestro resultado deseado con la así logramos nuestro resultado deseado ayuda de la Espero que ahora te quede claro cómo podemos crear ese proyecto. Gracias por ver este video estén atentos para el próximo proyecto. 5. Animación de texto de Año Nuevo con la propiedad del trazo de clip: Hola a todos. Bienvenidos a la nueva lección de este curso. Hoy vamos a crear una animación de Feliz Año Nuevo con la ayuda de la misma ButthPperty Como puedes ver, dondequiera que se mueva hacia abajo, muestra Bye bye 225 y siempre que se mueva hacia arriba, está escrito feliz Año Nuevo 2026 Se trata de una animación de texto. Puedes notar que nuestra pantalla está dividida horizontalmente a parte. La mitad superior viene con fondo rojo y la mitad inferior viene con fondo blanco. Además, nuestro texto se está moviendo de arriba a abajo una y otra vez y cambiando de feliz Año Nuevo 2026 a Ser para 2025 Además, puedes notar que el color está cambiando de blanco a rojo. Usaremos la propiedad de Kipath para crear este efecto. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos crear eso. Entonces como pueden ver lado a lado, abro mi editor de código WizOS studio y mi navegador usando la extensión de servidor Live, y ya creo un documento HTML llamado index dot HTML Con eso, creo archivo CSS de estilo punto y vinculo este archivo con este documento. Ahora, al principio dentro de nuestra etiqueta corporal, voy a crear un D sub tipo D dentro de este elemento DV aquí, voy a tomar una H a elemento, algún tipo H dos. Y dentro de este H al elemento, voy a tomar span tag, span. Y dentro de esta etiqueta span, voy a escribir B, B, y luego otra vez, voy a tomar otra etiqueta span. Span, y en este, voy a escribir esto es 25. Ser para 2025. Con eso, también, voy a asignar un nombre de clase a esta caja iptagsss Además, quiero asignar otra clase. Es la caja uno, la caja uno. Entonces duplico esa sección. Después de duplicarlo, voy a hacer este cuadro dos, y también voy a sustituir el texto de bye bye a Happy New Year. Feliz Año Nuevo 2026. Voy a poner ese archivo. No sólo eso, voy a mover todos estos, todos los de tag dentro de la etiqueta de sección, sección, voy a mover todo el código, cortar y pegar. Dentro de esta etiqueta de sección. Ahora, comencemos este estilo. Voy a saltar al archivo CSS de estilo, y al principio, voy a importar fuente de Google. Y aquí voy a importar la fuente Poppins. Entonces importo la fuente. Después de importar la fuente, voy a seleccionar el selector Universal star y voy a aplicar margin y padding todos los elementos. Algún tipo de margen lo voy a poner cero y también padding, también padding, voy a ponerle cero. Entonces elimino el margen y el relleno de todo el elemento. Después de eso, voy a hacer caja dimensionamiento de caja caja de borde de caja. También, también voy a definir la familia de fuentes. Fuente, familia, aquí, voy a aplicar Poppins. Entonces dentro del doble curso voy a empatar a Poppins, y es de la familia de fuentes Sansa A continuación, voy a apuntar a la etiqueta corporal. Entonces aquí voy a teclear cuerpo, cuerpo dentro del carliss y voy a decir desbordamiento calentado Entonces después de eso, voy a apuntar a esta sección de etiquetas de sección. Después dentro del Carrass aquí, primero, voy a definir la posición Posición, voy a hacerla relativa. Después de eso, voy a definir con en altura Ancho 100 V W Vp ancho, 100 ver ancho de arranque y altura, 100 VH. Voy a establecer este archivo. Después de establecer este archivo, es como se ve nuestro texto porque aplicamos la fuente popping Estilo superior esta etiqueta de sesión, voy a seleccionar, voy a seleccionar el cuadro elemento profundo, este cuadro profundo, algún tipo punto box. Ahí está el Calvisi es la primera propiedad, voy a aplicar posición, posición, quiero que sea absoluta, posición absoluta Entonces voy a aplicar top. Desde arriba, quiero colocarlo cero y desde la izquierda, también, voy a colocarlo cero. A continuación, voy a definir con y altura a esta caja con con 100%, también altura, 100%. Eso es. Tenemos que dibujar dos caja profunda elemento, como se puede ver en mi estructura. Voy a establecer este archivo. Después de establecer este archivo, como puedes ver, se superpone entre sí. Nuestro texto se coloca uno encima del otro debido a la posición posición absoluta. Como puede ver, partimos de cero superior y dejamos cero. Por eso empezó a partir de aquí. Ahora necesitamos posicionarlo en el centro de la página. Para posicionarlo en el centro, voy a usar esta la propiedad. Display lo voy a hacer flex, Justificar centro de contenido, también alinear ítem Centro. Ahora bien, si configuro este archivo, como pueden ver, vertical y horizontalmente, centrar tanto el texto. Después de eso, voy a apuntar a la casilla dos. El segundo cuadro, cuadro dos, cuadro punto dos, va a apuntarlo con el nombre de la clase. Entonces en los colores está ahora al principio, dentro de esta caja también, voy a agregar el fondo. Fondo, voy a aplicar color rojo fondo rojo, color rojo puro, y voy a guardar este. Ahora la segunda caja tiene este color, este color rojo, y esconde la primera caja. Ahora quiero mostrar sólo la mitad de la segunda caja. Quiero exhibir la parte h de esta caja, y podemos hacerlo muy fácilmente usando la propiedad Kippu Para eso, necesitamos saltar al sitio web de KiPe. Abro esta pestaña y desde aquí, necesitamos crear la forma. Y después voy a seleccionar la forma trapezoidal. Y como te dije y como sabes, necesitamos recortar la mitad inferior. Voy a mover este punto hacia arriba y al 50% de posición, lo detengo. También al 50% de la posición, voy a parar este punto y después de eso, voy a copiar el código exacto y volver a la página web. Voy a pegar el código exacto dentro de la caja también. Yo aplico esta forma de polígono, y voy a establecer ese archivo Después de que configuré ese archivo, se puede ver el resultado. Entonces como puedes notar, nuestra segunda caja está perfectamente quipeada Además, puedes notar dentro de esto tanto tenemos un sabor Feliz Año Nuevo. Después de eso, voy a apuntar al elemento H dos, encabezando dos. Después dentro de la Clase, voy a definir el tamaño de fuente tamaño de fuente, y voy a asignar fuente de 40 píxeles. Creo que 40 píxeles es bueno para ello. Vamos a aplicarlo. Sí, 40 píxeles es bueno para ello. Voy a aumentar un poco más. Voy a hacer 43 y establecer este. Sí. Ahora necesitamos mostrar el feliz año nuevo en una línea y 2026 en otra línea Para ello, necesitamos usar la propiedad display y como se puede ver, aquí usamos la etiqueta total de dos span. En un lapso, tecleamos Feliz Año Nuevo, y en otro hechizo, tecleamos 2026 Para eso, vamos a aplicar la propiedad display display, voy a hacerla flex y flex direction, flex direction, y voy a hacer esta columna. Voy a poner ese archivo. Después de establecer ese archivo, así es como se veía, y necesitamos exactamente lo mismo. 6. Animación de texto de Año Nuevo con la propiedad del trazo de clip. Parte 2: Ahora se puede notar después de aplicar la columna, se separa en línea p. Imprime feliz año nuevo en una línea y en la segunda línea imprime 2026 Pero puedes notar aquí imprime 2025 porque cortó el cubo del segundo elemento dip usando la propiedad Kipath Si aumento la altura, si aumento la Altura, déjame mostrarte si la hago 70 en vez de 50%, ahora puedes notar que va a cambiar el año. Ahora va a mostrar feliz Año Nuevo 2026. Déjame mostrarte. Si subo ese archivo, se puede ver el resultado. Se puede ver el resultado en la segunda línea 20 feliz Año Nuevo 2026 porque esta vez tuvo el texto completamente del primer elemento db Así que volvamos a su propiedad original de mantener, 50% y fijemos eso de nuevo. 2025 vino del déjame mostrarte 2025 vino del primer desarrollo y Feliz Año Nuevo vino del segundo desarrollo. Ahora, volvamos al archivo Stylo CSS, y aquí voy a aplicar transform property, transform Transformar, traducir, traducir Y, y aquí el aplicar negativo 70%. Voy a poner ese archivo. Después de mover el texto hacia arriba, se puede notar claramente el texto del segundo elemento, feliz Nuevo Y 2026 Además, es necesario alinear el texto centro de esta página 2026 Si muevo el texto hacia abajo, déjame mostrarte si lo muevo hacia abajo 70% y luego configuro este archivo, ahora puedes ver Be para 2025. Debido a esta propiedad de script esta vez, nuestro segundo texto no es visible y nuestro primer texto es visible para 2025. Por ahora, voy a aplicar. Quiero mostrar solo el segundo elemento Dip text, happy New 2026 y ademas voy a alinear el texto para alinear el texto, aqui, voy a usar texto ILINpperty text line center, y voy a A continuación, voy a cambiar el color del elemento HT, y voy a apuntar al segundo elemento Deep HT. Aquí t, Do cuadro dos, cuadro dos, quiero apuntar el borde a elemento y dentro del carlrass voy a aplicar color, color, y quiero hacer color de fuente blanco, y voy a establecer ese archivo Después de establecer ese archivo, se puede ver el resultado. A continuación, tenemos que apuntar a la segunda etiqueta span, cómo colocamos la oreja. Tenemos que apuntar a esta etiqueta span tanto desde el borde hasta el elemento. Entonces para apuntar a eso, voy a escribir span, span, colon, enésimo hijo, enésimo hijo, y aquí dentro de la ronda versus, voy a apuntar al segundo Entonces dentro de la clase, aquí, voy a definir la altura de la línea. Altura de línea, y voy a app altura de línea uno, también tamaño de fuente tamaño de fuente E dos EM, o voy a establecer esa. Entonces así es como se veía. Ahora después de eso, vamos a crear la animación que va a mover el texto hacia arriba y hacia abajo. Si animamos la función translate Y, si muevo el texto verticalmente hacia arriba y hacia abajo, en ese caso, va a proporcionar el efecto Para eso, voy a definir un fotogramas clave y nuestros fotogramas clave es agregar fotogramas clave Ahora dentro de esta animate animation animate re frame, quiero establecer el texto mientras que en la parte superior También necesitamos establecer el texto para mientras que en la parte inferior. Para eso, para lograr esto al 0% de duración, también coma al 45% de duración Dentro del Carlss quiero aplicar transformar propiedad, transformar, transformar, traducir Y, traducir Y. Traducir Y, traducir Y, traducir Y Entonces, cuando vuelva a cargar mi navegador, el texto permanecerá en su posición desde el inicio de la animación Si ejecuto esta animación durante 10 segundos, entonces en ese caso, cuatro punto b segundo, va a quedarse en su propio lugar. Entonces por debajo de eso al 55% y 90%, 90%, voy a aplicar transformar, traducir Y. Traducir Y y dentro de la ronda dice aquí, voy a escribir positivo 70%. Gana el 10% de la duración de la animación, va a cambiar la posición del texto. Quiero decir 45-55% entre estas dos duraciones, va a cambiar la posición del texto Ahora, después de que se mueva hacia abajo, quiero retrocederlo a otra vez después de un 10% de duración. Así que al 100% de duración. Entonces 90-100, quiero a mover ese elemento, volver a mover el texto, así que voy a escribir transform Transform, traducir Y -70% nuevamente así que voy a escribir transform Transform, traducir Y -70% Después de eso, iré aquí arriba y dentro de esta H al elemento. Después de alinear texto, voy a llamar a la propiedad de animación. Animación. Nuestro nombre de animación es animado. Quiero ejecutar esta animación durante 3 segundos y el modo está adentro hacia afuera. Además, voy a ejecutar esta animación por tiempo infinito. El recuento de iteraciones es infinito, y voy a establecer ese archivo Después de que configuré ese archivo, se puede notar el resultado. Entonces en 3 segundos, completa la animación. También 0-45% de duración, se mantiene al alza, y 55 a 90%, se mantiene a la baja Por lo que sigue siendo salvaje para arriba y hacia abajo. Y cada vez que se cambia la posición, también se cambia el texto debido a la propiedad Kipath Y lo único que queda ahora, necesitamos cambiar el color. Así que cada vez que se necesita para pasar de la caja dos de la caja uno, necesitamos cambiar el color. Tenemos que hacerlo rojo, no negro. Para eso, en nuestro selector H dos, voy a agregar el color del texto color, y lo voy a hacer rojo. Y voy a poner ese archivo. Así que vamos a establecer ese archivo. Siempre que se mueve hacia abajo, como puedes notar, cambia el color, se vuelve rojo. Y cada vez que se mueve hacia arriba, se vuelve blanco. Así conseguimos nuestro efecto deseado con la ayuda de la animación clip-path Gracias por ver este video schede para el próximo proyecto 7. Efecto creativo sobre el desplazador de un botón con la propiedad del trazo de clip en CSS: Hola a todos. Bienvenidos al nuevo proyecto en este curso. En este proyecto, vamos a crear otro efecto de botón hover con la ayuda de la propiedad clip-path Como pueden ver, cuando vuelo el cursor sobre mis autos están en el lado izquierdo en la porción de color rojo, la porción blanca se encoge y desaparece, y se puede ver el botón rojo Pero si coloco mis autos sobre la porción blanca, se expande y cubre todo el botón y se puede ver que se cambia el color de fondo Básicamente, este botón se divide de esta manera en dos partes. Parte blanca y una parte roja. Y cuando abro mi cursor a la parte blanca, se expande. Y cuando coloco el cursor en la parte roja, se encoge. Este es el proyecto exacto que voy a cubrir en esa lección con la propiedad clip-path helpop Entonces, sin perder el tiempo, comencemos la práctica. Como pueden ver lado a lado, abro mi editor de código de estudio de usuarios y mi navegador usando la extensión de servidor Live, y ya creo un documento HTML llamado index dot HTML. Con eso, creo archivo CSS de estilo punto y vinculo este archivo con este documento. Ahora comencemos la codificación. Al principio, dentro de mi etiqueta corporal. Aquí voy a agregar una etiqueta de anclaje A. Luego dentro de esta etiqueta de anclaje, voy a tomar un total de dos etiquetas span, span, y su botón tipo. Después duplico la etiqueta span y molesto este onele puedes ver las tomas de izquierda a esquina Ahora saltemos al archivo CSS de estilo y comencemos cadena. Estilo CSS. Al principio, voy a estrellar la etiqueta del cuerpo, aquí estoy tipo cuerpo Entonces dentro de las calibas dentro de los calibres la primera propiedad, voy a usar display Display, voy a hacerlo flix. Entonces justificar el contenido justificar el centro de contenido. También un centro de líneas de artículos. Verticalmente y horizontalmente, I texto oriente medio. Si configuro este archivo, puedes ver el resultado. Además, necesitamos agregar la altura mínima a nuestra página desde el tipo altura mínima, voy a establecer e 100 VH. Entonces voy a agregar un color de fondo, y quiero usar el color de fondo gris oscuro. Fondo Haz tag 222. Y voy a poner este archivo. Después de establecer este archivo, así es como se ve. Después de eso, voy a decirle a la etiqueta de ancla. Sol tipo A. Luego dentro de la clase, primero, voy a definir la posición de la misma. Posición, voy a hacerla relativa. Entonces voy a definir con y altura con 180 píxeles. También altura, 60 píxeles. Después de eso, voy a iniciar la etiqueta span, que está dentro de la etiqueta de anclaje Aquí voy a teclear espacio de anclaje, span. Entonces dentro del auto usa, primero, voy a definir la posición del mismo, posición, y aquí, voy a establecer posición absoluta. Podemos colocarlo relativo a la etiqueta de anclaje. A continuación, estoy bien en valor máximo a cero. Después de eso, izquierda, también cero entonces voy a agregar hierba. Nosotros, 100%, 100% y altura, también 100%. Ahora, tanto esta sartén tienen la misma altura y maleza. Después de eso, voy a establecer color de fondo blanco a todo color, color de fondo, quiero usar rojo color rojo. Voy a establecer este archivo. Después de establecer este archivo, así es como se ve. Entonces voy a centrar el texto en medio de este botón. Para eso, el texto alinear el texto alinear la altura de la línea central. También voy a asignar altura de línea. Mm casi 60 bixel. Creo que 60 pixeles es bueno para ello. Vamos a certificar y ver si resulta, sí. Ahora, cambiemos la fuente. Quiero aplicar pop en fuente. Entonces por encima del cuerpo, voy a importar el pop en fuentes de Google. Entonces entré la fuente. Además, voy a aplicar la fuente en toda la página. Por eso voy a utilizar el selector universal star. Y dentro de la Clase, primero, voy a decir fusión, relleno cero también cero tamaño de caja caja de botella y poppings de familia de fuentes Voy a volver a configurar este archivo. Y después de establecer el archivo, como se puede ver, cambió la estrella de la fuente. Ahora volvamos a la etiqueta de Pan otra vez. A continuación, voy a convertir el texto a Mayúsculas. Entonces aquí voy a escribir texto, transformar percase. Después de eso, entre letras entre letras, espaciado aquí voy a pasar a pixel. A continuación, voy a definir el tamaño de la fuente. Tamaño de fuente, tamaño de fuente 22 píxeles. Y voy a poner este archivo. Después de establecer este archivo, es como se ve. Ahora puedes ver dos etiquetas span sentarse una encima de la otra también tomamos ancho y alto completo del tamaño exacto de la etiqueta de anclaje, 100% ancho y 100% alto. Y ahora quiero apuntar a la segunda etiqueta span. Para eso, voy a usar enésimo niño. Entonces amarre, span, enésimo niño y dentro del receso redondo, apunto a la segunda etiqueta span luego dentro del auto menos Primera propiedad, voy a usar fondo, color de fondo, y voy a ponerla en blanco. Después de eso, voy a definir el color para el color del texto, color, para eso, voy a usar el color rojo exacto el color rojo. Después de eso, voy a aplicar transición. Transición 0.5 segundos. Eso es bueno. Ahora bien, si configuro este archivo, puedes notar la segunda etiqueta span con fondo blanco y color de fuente rojo. Pero debajo de la etiqueta span, tenemos el color de fondo rojo y la etiqueta pan de color de texto blanco. Entonces, si mantengo la forma de la segunda etiqueta span, la primera vuelve a aparecer. Y esto es exactamente lo que tenemos que hacer. Ahora, saltemos al sitio web de lippy. Entonces como puedes ver, estamos en la web lippy, y desde aquí, vamos a elegir la forma, un punto Entonces voy a mover los puntos hasta que obtengas la forma exacta. Voy a hacer que sea la mitad de este polígono, así que voy a fijarlo en el 50% Además, voy a fijar este en 50% dos. Además, voy a reducir este hasta 40%, y luego voy a copiar en el código exacto y volver a mi código itone Entonces voy a simplemente paginar el código aquí y voy a configurar este archivo. Arriba y configura este archivo, ya ves el resultado. Ahora puedes ver solo esta parte de la derecha es visible y se salta la parte izquierda de la segunda forma Ahora, cuando pase el cursor sobre él, quiero aumentarlo de nuevo. Para eso, nuevamente, voy a seleccionar a este segundo hijo con Su selector. Así tipo abarcó pulgadas niño dos, y aquí uso selector de colon hover Entonces dentro del Cariss ahora quiero mostrar el tamaño completo de la segunda etiqueta span Volvamos al sitio web de lippy. Ahora voy a mover los puntos hacia el lado izquierdo hasta que muestre el tamaño completo del arient Y copio el código y volvamos de nuevo al editor. Aquí voy a pasar el código. Ahora después de establecer este archivo, si coloco el cursor sobre mis cartas sobre esta porción blanca, puede notar el resultado Como puedes notar, completa la forma. Se completa la segunda forma. Se expande hacia el lado izquierdo y toma el lado completo dentro de 0.5 segundos. Ahora necesitamos hacer lo mismo para el primer elemento hijo. Y si me salto sobre mi auto en el primer elemento hijo, quiero ocultar el segundo elemento hijo, para que puedas ver solo el primer elemento hijo. Esta vez, quiero encoger la parte blanca y quiero desaparecer esta parte. Entonces, apuntemos al primer hijo. Entonces aquí estoy t span span colon enésimo niño. Y dentro de las rondas quiero apuntar al primer hijo. Y cuando coloco el cursor sobre esta, así que creo el selector Over, Overt, quiero apuntar a la segunda etiqueta span, la siguiente etiqueta span Ahora quiero apuntar al directamente después del siguiente lapso, que es el span número dos. Y para apuntar a éste, cuando uses este letrero, y directamente después de eso, quiero apuntar al lapso. Luego dentro del css, luego dentro del Carlss aquí necesitamos proporcionar la forma del polígono Volvamos a la página web. Ahora voy a mover todos los puntos hacia el lado derecho, izquierda a derecha para que desaparezca, algo así. Ahora el fondo se encogerá y desaparecerá por completo. Copia el código y vuelve al editor nuevamente. Voy a pegar el código dentro de este selector. Y voy a poner éste. Después de configurar este, si pongo el cursor sobre mis autos en el lado izquierdo en el rojo, ahora se puede ver que la porción blanca se encoge y desaparece por el lado derecho Pero si coloco mis autos en el lado derecho y la porción blanca, ahora puedes notar que está completa la forma, es expandir la forma y cubrir toda el área del botón Por lo que logramos con éxito nuestro resultado deseado. Espero que ahora el concepto sea claro para ustedes cómo podemos crear eso. Gracias por ver este video, mantente atento a nuestro próximo proyecto.