Este artículo proporcionará:
- Método 1: efecto de aparición gradual usando la propiedad de animación CSS
- Método 2: efecto de aparición gradual usando la propiedad de transición CSS
Método 1: efecto de aparición gradual utilizando la propiedad de 'animación' de 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 ” en el atributo de estilo para definir el color del texto del elemento.
- Después de eso, use el ' ” elemento para agregar algún texto o un párrafo simple.
A continuación se muestra el código HTML:
< h2 estilo = 'color: rgb (84, 8, 191)' >
Sitio web de tutoriales de Linuxhint
< / h2 >
< pag > efecto de aparición gradual en la carga de la página < / pag >
La página HTML se crea correctamente:
En la sección CSS, para aplicar el efecto de aparición gradual en la página, el botón “ animación ” La propiedad CSS se utilizará en el “
Estilo 'cuerpo' Elemento
cuerpo {animación: fadeInPage 3s facilidad;
número de iteraciones de animación: 1 ;
}
El “
- “ 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 temporización de la animación y la duración de la animación.
- “ recuento de iteraciones de animación ” define cuántas veces debe iterarse la animación.
Aplicar reglas '@keyframes' en 'animación'
@keyframes se desvanecen en la página {0 % {
opacidad: 0 ;
}
100 % {
opacidad: 1 ;
}
}
Para definir el “ @fotogramas clave ” reglas para la animación, mencione el nombre de la animación después de la palabra clave @keyframes. Modifique el comportamiento de la animación de la siguiente manera:
- A ' 0% ” animación, la “ opacidad A la propiedad se le asigna el valor 0. Significa que cuando comienza la animación, la imagen es transparente.
- A ' 100% ” animación, la opacidad se establece en “ 1 ”, que se refiere a un color sólido.
Producción
Avancemos hacia el segundo método para aplicar el efecto Fade-in en la carga de la página.
Método 2: efecto de aparición gradual utilizando la propiedad de 'transición' de CSS
Agrega un “ cargar atributo ” dentro del “
En este ejemplo, el CSS “ transición La propiedad ” se utiliza para agregar un efecto de aparición gradual:
cuerpo {opacidad: 0 ;
transición: opacidad 6s;
}
La siguiente es la explicación de las propiedades mencionadas anteriormente:
- “ opacidad La propiedad ” define la transparencia de los elementos.
- Usando CSS “ transición ”, cambia gradualmente los valores de las propiedades durante un tiempo específico.
Producción
Le hemos enseñado los métodos para usar CSS para un efecto de aparición gradual en la carga de la página.
Conclusión
Se pueden utilizar varias propiedades CSS para aplicar un efecto de aparición gradual en 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 botón “ @fotograma clave ' normas. Este artículo ha explicado los métodos para agregar un efecto de aparición gradual en la carga de la página usando CSS.