Animación de carga de CSS pura

1. Introducción: Hola chico, es bueno verte de vuelta. Hoy vamos a crear este hermoso proyecto de animación de carga usando TML y CSS Mi nombre es John Shortcut, y soy tu instructor para este proyecto. Es una animación de carga muy bonita que está hecha por STML y CSS También es muy receptivo. Si reduzco el ancho de nuestro navegador, acuerdo a la resolución del navegador, cambió el tamaño del teléfono, por lo que es bastante receptivo. Podemos aplicar este tipo de animación de carga en nuestros proyectos. Para crear esta animación de carga, no voy a usar ninguna biblioteca Javasceep y ninguna biblioteca CSS Vamos a usar puro estim y puro CSS. Y si te interesa este proyecto de animación, podemos iniciar nuestro viaje desde el siguiente tutorial. Gracias. 2. Creación de plantillas HTML: Entonces esta es la primera clase de hora relacionada con video. Así que deja que Jung entre a la pantalla de la computadora y empieza a codificar. Como pueden ver, lado a lado, abro mi editor de código Wiser Studio y mi navegador usando la extensión Lifesaver, y ya creo un documento de estimación, y también creamos un archivo CSS de puntos de estilo Por ahora, como puede ver, nuestro documento está completamente en blanco. Así que ahora necesitamos crear nuestra plantilla TML started. Para eso, como puedes ver, estamos usando código VS. Voy a alabar letrero de excavación en forma. Entonces voy a alabar a Enter. Como puedes ver, automáticamente, crea una plantilla iniciada para mí. Entonces voy a establecer un título a esta plantilla. Aquí voy a escribir el efecto creativo de animación de texto de CS efecto creativo de animación de texto Después de escribir el nombre del título de nuestra página web, necesitamos vincular este archivo CSS estándar con un documento estable. Para eso, vamos a usar ink tag LINK link, referral stylesheet, y también necesitamos pasar Aquí, necesitamos proporcionar la ruta de archivo de esta hoja de estilo Como puede ver, está en mi directorio de ruteo actual. Así que voy a poner el estilo de nombre fino punto CSS. Después dentro de la etiqueta corporal, voy a usar rumbo para etiquetar, H dos. Entonces dentro de este rubro para etiquetar, voy a escribir Lodi Además, voy a escribir tres puntos. A continuación, voy a usar un atributo, y voy a usar este atributo en nuestro encabezado para etiquetar, y nuestro nombre de atributo es texto de datos. Texto de datos igual a di. Este es un atributo de datos personalizado. En STM los atributos de datos permiten almacenar información adicional sobre un elemento estable Este atributo no afecta al diseño. No cambio ninguna apariencia en nuestra página web. Básicamente, lo usamos con Java strep lo contrario CSS para agregar comportamiento dinámico, nuestro tipo de datos es test y almacenamos este valor cargando y vamos a usar este valor más adelante Esto es para este video. En el siguiente video, vamos a iniciar el CSS. Hay para reloj. 3. Inicio de código css mejorado: Un placer verles, chicos. Una vez más, estoy de vuelta con otro video relacionado con nuestro proyecto de animación de carga. Entonces saltemos a la pantalla de la computadora. Entonces como puedes ver en la pantalla de tu computadora, aquí abrimos un sitio web, Google Forms y buscamos una fuente llamada Pop ins. Para nuestro proyecto de animación de carga, vamos a utilizar Pop in Forms. Y a partir de aquí, voy a seleccionar esta forma de fuente. 700 negrita 700. Para obtener esta fuente, basta con hacer clic en el botón Gate fun y le proporcionará el código integrado Gate. Simplemente haga clic en esta opción. Y luego debes seleccionar para qué plataforma quieres usar esta fuente para web Android, IOS flutter Voy a usarlo para fines web y quiero importar esta fuente. Doy clic en la opción Importar. Y a partir de ahí, necesitamos copiar código, este código de opción de importación. Así que copio toda la fuente. Después de copiar el código, vuelvo a la pantalla de mi computadora. Para obtener exactamente el mismo resultado, necesitamos esta fuente. Así que vamos a saltar al estilo dot css fun. Al principio, voy a importar esta fuente. Entonces pegué el código. Después de eso, voy a aplicar esta fuente a este texto. Para eso, al principio, voy a crear un signo estelar universal selectron Entonces en su dice la Calira, primera probabilidad, voy a usar margen Margen, y voy a asignar margen Ju. Entonces voy a asignar pan. Relleno también cero. Como saben, star es un selector universal. Primero, establecemos todo el margen de elemento cero. Después establecemos todo el elemento padding cero. Después de configurar este archivo, como puedes ver, nuestro texto de carga, ahora comienza desde la esquina superior derecha porque nuestro encabezado a etiqueta viene con relleno y margen predeterminados. Y eliminamos todo el relleno y margen predeterminados usando el selector universal. Después de eso, voy a usar otra propiedad llamada box sizing, box sizing, y voy a usar border box. Otra pregunta es, ¿qué es eso? ¿Por qué se utiliza el tamaño de la caja, la propiedad de la caja de botella? Cambió la forma en que se calculan la anchura y la altura de un elemento. Permítanme aclarar el concepto de dimensionamiento de cajas, por qué usamos esta propiedad. Entonces como puedes ver, Hell creó el elemento DV y nos fijamos con 200 píxeles. Pero este elemento profundo viene con borde de diez píxeles cada uno de la dirección, izquierda y derecha. Después de usar el borde de diez píxeles, cada uno de los lados, aumenta el ancho D. Ahora se convierte en 220 píxeles. la misma manera, si agregamos padding a izquierda y derecha, supongamos que decimos diez píxeles padding cada uno de los lados, nuevamente, va a extender el ancho profundo. Ahora se convierte en 240 píxeles. Pero dijimos 200 píxeles de ancho de profundidad. Debido al relleno y borde, se extiende el ancho. Para resolver el problema, tamaño de la caja nos va a ayudar. Si aplicamos el tamaño de la caja, no va a extender el ancho del elemento profundo. Siempre va a mantener lo bien que pasemos. Básicamente, va a reducir el contenido dentro del contenedor, pero no va a extender el contenedor dentro de la altura. Es por eso que aplicamos la propiedad de dimensionamiento de cajas en nuestro documento. Después de aplicar el tamaño de la caja, ahora voy a aplicar fonfam Voy a atar familia de fuentes, y voy a usar la fuente Poppins Dentro del único curso, voy a empatar a Poppins, y viene de la familia San Serif, San Serif y viene de la familia San Serif, San Serif. Voy a establecer este archivo. Después de configurar este archivo, se puede notar el encabezamiento que toma uno. Se ha cambiado el estilo de fuente. Parecía un poco más audaz. Esto es para este video. En el siguiente video, vamos a darle estilo a esta etiqueta corporal. 4. Estilo de la etiqueta del cuerpo y la etiqueta de encabezado: Un placer verlos chicos. Este es el tercer video de este tutorial, y en este video, vamos a darle estilo a la etiqueta corporal. Entonces saltemos a la pantalla de la computadora. Esto es lo que vamos a crear en este tutorial. Para eso, necesitamos darle estilo a la etiqueta corporal. Así que saltemos al archivo CSS de puntos de estilo y comencemos a diseñar la etiqueta body. Entonces al principio, voy a apuntar a la etiqueta corporal usando su nombre, nombre de etiqueta, BO, cuerpo DY luego dentro la propiedad Cali RessFS voy a usar display Explique, y lo voy a hacer de lino. Otra phi es la razón por la que utilizo los copos de propiedad de exhibición? Porque habilita el diseño del lino. Entonces, ¿qué podemos hacer con flexlou? ¿Cuál es el beneficio de usar Flex Llaout? Porque facilita la alineación y distribución del elemento dentro de un contenedor. Incluso el tamaño del elemento es desconocido o dinámico. Cuando cambiemos el tamaño de la ventana del navegador, va a cambiar el contenido acuerdo a la resolución de la ventana del navegador. Es trabajar dinámicamente. Entonces voy a usar otra propiedad llamada Justificar contenido. Justificar el contenido. Y aquí voy a pasar onda central central. Esta propiedad centraba el contenido horizontalmente dentro del cuerpo Está alineado elemento de canal al centro. Si configuro este archivo, puedes ver el resultado. Alinea nuestro encabezado para etiquetar el centro de esta página. Centró horizontalmente el contenido. Además, necesitamos centrar este contenido verticalmente. Para eso, voy a usar otra propiedad llamada align IN. Alinee los elementos. Y también, voy a hacerlo centro. Si configuro este archivo, esta propiedad va a centrar el 11 vertical. Pero después de establecer este archivo, no está funcionando. Ahora podrías tener cociente ¿por qué no está funcionando? Porque no especificamos la altura. Entonces para eso, voy a usar otra propiedad, altura mínima, altura media, y voy a establecer altura mínima, 100 área de ventana gráfica Cien VH. Harry estableció una altura mínima para este cuerpo y Harry le asignó al 100% poca altura del pie. Si configuro este archivo, ahora puedes ver el resultado. Ahora, también centrado horizontalmente y verticalmente centrado H dos etiquetas. A continuación, voy a asignar un color de fondo a esta etiqueta corporal. Para eso, voy a atar fondo a fondo de fiesta, y nuestros códigos de color, y voy a usar RGB color RGB y dentro de la prensa redonda para rojo, voy a usar para Verde, voy a usar 40 y para azul, voy a usar 53, y voy a mandar este archivo. Después de estilizar la etiqueta del cuerpo, también, voy a darle estilo al encabezado para etiquetar. Aquí voy a crear el trote selecto, H dos, y dentro de la propiedad ClivSF, voy a Posición, y voy a usar posición relativa. Entonces voy a definir el tamaño de la fuente. Tamaño de fuente, y voy a usar el tamaño de fuente 14 VW. Si configuro este archivo, puedes ver el resultado. Ahora la pregunta es ¿por qué utilizamos la unidad VW? Contamos con otras unidades como pixel, PT, porcentaje y mínimo. Pero en lugar de usar otras unidades, usamos VW. VW significa viento de puerto V y 14 VW, lo que significa 14% de pocos pies de ancho Entonces cada vez que aumentemos el ancho de este navegador, entonces va a aumentar el tamaño de fuente según el ancho del navegador. A continuación, voy a establecer el color de la fuente. Entonces escribe color, y para color, voy a usar RGV Value Es el plumón vestidos para rojo, voy a pasar tres. Para verde, voy a pasar 40. Y para el azul, voy a usar 53, y voy a configurar este archivo. Básicamente, aquí utilizo exactamente el mismo color de fondo. Ahora nuestro texto no es visible porque coincide con el color de fondo. Entonces voy a agregar otra propiedad. Aquí voy a aplicar otra propiedad llamada trazo de texto. Escriba texto, trazo de guión y para usar la propiedad, también va a usar webkeat Esta web keit estilo específico, añadir un trazo o un contorno alrededor del texto Entonces quiero trazo 0.3 VW También voy a definir el color del trazo. Para el color de trazo, voy a usar el valor RGV, RGV. Entonces dijiste los vestidos redondos, ella para pasar por rojo, voy a usar dos, para verde, voy a usar 108 y para azul, voy a usar 146, y voy a poner este archivo. Este color es un poco más claro que el color de fondo. Si configuro este archivo, puedes ver el resultado. Ahora bien, si quieres convertir esta toma en mayúsculas, de lo contrario, puedes ir con lo contrario, puedes ir con el texto en minúscula Me gustaría ir con mayúsculas, así que voy a escribir texto transformar mayúsculas, y voy a configurar este archivo Ahora así es como se ve. Ahora bien, está bastante emparejado con nuestro resultado, y este es nuestro resultado, lo que vamos a crear. Entonces en la siguiente parte de este tutorial, aquí vamos a crear un pseudo elemento, que va a agregar un efecto de superposición dinámico como este Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 5. Agregar el efecto de superposición: Me alegro de verlos de vuelta, chicos. Una vez más, estoy de vuelta con otro tutorial relacionar este proyecto de animación de carga, y esta es la parte más importante de este tutorial porque en esta parte, vamos a agregar este ajuste dinámico de superposición. Para ello, vamos a tomar ayuda de posito ante elemento positivo Entonces comencemos la práctica. Entonces aquí, voy a crear un elemento antes positivo de la etiqueta H dos. Entonces primero, voy a escribir tensa H dos y voy a escribir colon colon BFO T Entonces dentro de las calibraciones, voy a usar nuestra primera propiedad content, content, y como content, voy a usar la función de atributo función Ater, esta función aquí dentro de las carreras redondas, voy a pasar el atributo, que creamos en nuestro índice punto timlPage Copo el texto de los datos del nombre del atributo, y lo voy a pegar dentro de las carreras redondas. Aquí pasamos el contenido de los datos, y como ustedes saben, dentro de este texto de datos, Henry pasa Hentype Vamos a usar este texto y la función utter habilita al elemento positivo para replicar el texto del encabezado Ahora necesitamos definir la posición de este contenido. Para eso, voy a escribir propiedad de posición. Posición y aquí, voy a usar posición absoluta. Permite colocar el elemento poseido directamente sobre el texto Me refiero al texto original, y luego tenemos que mencionar la posición superior y los labios. Para arriba, voy a pasar cero. Entonces para P, voy a pasar también cero. Entonces voy a definir el con W Hemost con cero y altura Voy a usar la altura al 100%. Como puedes ver, atraco arriba y labio posición cero porque va a permitir colocar el contenido sobre el texto con precisión Y luego asignamos y luego asignamos con cero. ¿Por qué asignamos con cero? Porque lo hace invisible al principio. A través de la animación, este ancho se expandirá y creará un efecto revelador, y luego usamos height 100% para asegurar que el elemento positivo tome la altura completa del elemento H dos y cubriendo el texto verticalmente. A continuación, voy a asignar color a este texto. Para eso, para el texto superpuesto. Para eso, voy a escribir propiedad de color. Color, hashtag y nuestro código de color es cero, uno, un e87. Es una especie de color verde, color verde claro. Entonces ahí tenemos que asignar trazo. Para eso, voy a copiar esta propiedad desde esta posición y pegarla aquí. Para trazo, aquí voy a asignar cero V W y para trazo coloreado, voy a usar RGB Value RGV Y dentro de los rounders es para rojo, voy a usar dos O verde aquí voy a usar 108 y para azul, voy a usar 146. Quiero decir del mismo color. Aquí usamos el mismo color de trazo que usamos para etiquetar la H. Pero puedes notarla aplicamos carrera con cero VW. Básicamente, elimina efectivamente cualquier efecto de trazo del texto para elementos. A continuación, necesitamos crear esta línea horizontal. Esta línea. Para eso, vamos a usar frontera. Déjame mostrarte. Aquí voy a usar la propiedad de escritura fronteriza. Borde, derecha, y quiero borde sólido de dos píxeles, y nuestro boerstyle es Entonces tenemos que proporcionar el color del borde, y voy a usar el mismo color. Para el boer y el color del texto, utilizamos el mismo color verde claro A continuación, necesitamos eliminar el área de desbordamiento algún tipo desbordamiento, rumbo. Entonces necesitamos crear la animación. Quiero crear esta animación en la siguiente parte de este tutorial. No voy a crear esta animación en esta parte. Gracias por ver este video, Estén atentos para la siguiente parte. 6. Aplica la animación de superposición mejorada: Así que bienvenidos de nuevo, chicos. Este es el último tutorial relacionado Nuestro proyecto. Y en este tutorial, vamos a crear la animación. Entonces al principio, voy a declarar un fotograma clave, fotograma clave atate, fotogramas clave, y nuestro nombre de fotograma clave Entonces en la culira dice, Aquí, necesitamos animar el ancho Valor de ancho hacia arriba antes del elemento positivo Si cambiamos el valor de ancho a lo largo del tiempo, va a crear un efecto revelador. Así que en 0% posición, 10% posición, y 100% posición. Es ese el calre que voy a poner con cero. 0.0 a 0.10 y a 0.100, se va a fijar con cero y en 70% y 90%, voy a fijarlo con Al 0%, la animación comienza con los elementos con conjunto a cero. Y lo hace invisible para cada estrecho. Entonces al 10%, el ancho sigue siendo cero, por lo que los 11 permanecieron ocultos. Y al 70%, aquí establecemos ancho 100, haciéndola completamente visible o extendiéndose a través de toda la anchura, y al 90% también con permanecer 100%, manteniendo el elemento completamente extendido y al cien por ciento también establecido con zo. Básicamente permite que la animación comience de nuevo desde el estado oculto. Ahora voy a aplicar esta animación a este elemento posito Para eso, aquí necesitamos atar propiedad de animación. Animación. Primero, necesitamos proporcionar el nombre de la animación que es animado. Entonces necesitamos proporcionar la duración de la animación. Quiero ejecutar esta animación por seis segundos y nuestra dirección de animación es lineal. Además, quiero ejecutar esta animación por tiempo infinito así que voy a pasar infinito. La duración de la animación es infinita. Ahora, antes de poner este archivo, al principio, voy a descomentar esta línea Entonces voy a configurar este archivo. Creo que cometí algún error. Sí. Este es nuestro error. No es una clase. Es una etiqueta, así que quiero quitar el punto, y voy a volver a guardarlo. Ahora puedes tener que sentar este archivo. Esto es lo que enraiza. Esta es la frontera en la posición correcta. Si lo hago con 10%, lo contrario 20%, el conjunto de este archivo, se puede ver el resultado. Ya se puede identificar el efecto de superposición. Y si lo aumento más algo 70%, así es como es. Entonces en nuestra animación, ella hicimos lo mismo. Aquí aumentamos el ancho de este elemento antes positivo. Por eso crea este efecto revelador. Entonces por ahora, voy a hacer que vuelva a ser cero y voy a poner este archivo. Después de que configuré este archivo, como pueden ver , ahora es invisible. Y además, voy a descomentar esta línea, y voy a ejecutar esta animación Ahora, después de aplicar la animación, así es como es baja. Creamos esta animación, esta animación de carga con éxito. Espero que ahora el concepto te quede claro cómo podemos crear esta animación de carga. Y si te gusta este proyecto, entonces no olvides proporcionar tu valiosa reseña. Es importante para nosotros. Muchas gracias.