Uso de CSS para un efecto de desvanecimiento en la carga de la página

CSS nos permite agregar varias propiedades de estilo, como color, borde, tamaño de fuente y alineación de texto a los elementos HTML. Estas propiedades de estilo proporcionan un aspecto atractivo a la aplicación. Además, hay varias otras propiedades de CSS que nos ayudan a agregar algunos efectos de animación a los elementos. El uso de animaciones también puede aumentar la participación del usuario en las páginas web.

Este artículo proporcionará:

• Método 1: efecto de desvanecimiento utilizando la propiedad de animación CSS
• Método 2: efecto de desvanecimiento utilizando la propiedad de transición CSS

Método 1: Efecto de desvanecimiento utilizando la propiedad de "animación" CSS

Para diseñar una página HTML simple, agregue el siguiente elemento:

• Añade el "

  "Elemento junto con el"estilo" atributo. El atributo "estilo" contiene las propiedades de estilo del elemento.

• Aplica el "color"Propiedad en el estilo de estilo para definir el color de texto del elemento.
• Después de eso, usa el "

  "Elemento para agregar algún texto o un párrafo simple.

A continuación se muestra el código HTML:

Sitio web del tutorial de Linuxhint

Efecto de desvanecimiento en la carga de la página

La página HTML se crea con éxito:

En la sección CSS, para aplicar el efecto de desvanecimiento en la página, el "animación"La propiedad CSS se utilizará en el""Elemento de la página HTML.

Elemento de estilo "cuerpo"

cuerpo
Animación: FadeInpage facilits 3s;
Animación-iteración-conteo: 1;

El "" se aplica con las siguientes propiedades CSS:

• "animación"Es la propiedad abreviada que establece la animación especificando múltiples valores. Aquí, se define el nombre de la animación, la función de la animación y la duración de la animación.
• "conteo de iteración de animación"Define cuántas veces la animación debe iterar.

Aplicar reglas "@Keyframes" sobre "Animación"

@Keyframes FadeInpage
0%
Opacidad: 0;

100%
Opacidad: 1;

Para definir el "@KeyframesReglas para la animación, mencione el nombre de la animación después de la palabra clave @Keyframes. Modifique el comportamiento de animación de la siguiente manera:

• En "0%"Animación, la"opacidadSe asigna a la propiedad el valor 0. Significa que cuando se inicia la animación, la imagen es transparente.
• En "100%"Animación, la opacidad está establecida en"1", Que se refiere a un color sólido.

Producción

Avancemos hacia el segundo método para aplicar el efecto de desvanecimiento en la carga de la página.

Método 2: efecto de desvanecimiento utilizando la propiedad de "transición" de CSS

Agregue un "encendido"Atributo dentro del"" elemento. Este evento se activa en la carga de la página. En la carga, la opacidad del elemento del cuerpo se establece en "1", Que se relaciona con un color sólido:

En este ejemplo, el CSS "transiciónLa propiedad se utiliza para agregar un efecto de desvanecimiento:

cuerpo
Opacidad: 0;
Transición: Opacidad 6S;

La siguiente es la explicación de las propiedades indicadas anteriormente:

• "opacidad"La propiedad define la transparencia de los elementos.
• Usando CSS "transición", Cambie gradualmente los valores de las propiedades durante un tiempo especificado.

Producción

Le hemos enseñado los métodos para usar CSS para un efecto de desvanecimiento en la carga de la página.

Conclusión

Se pueden utilizar varias propiedades CSS para aplicar un efecto de desvanecimiento en los elementos HTML. Más específicamente, el "animación","opacidad", y "transición"Las propiedades se pueden usar para especificar efectos animados en páginas o elementos. Las animaciones se ajustan usando el "@Keyframe" normas. Este artículo ha explicado los métodos para agregar un efecto de desvanecimiento en la carga de la página utilizando CSS.