Usando CSS para um efeito de desbotamento na carga da página

O CSS nos permite adicionar várias propriedades de estilo, como cor, borda, tamanho de fonte e alinhamento de texto aos elementos html. Essas propriedades de estilo fornecem uma aparência atraente para o aplicativo. Além disso, existem várias outras propriedades CSS que nos ajudam a adicionar alguns efeitos de animação aos elementos. O uso de animações também pode aumentar o envolvimento do usuário nas páginas da web.

Este artigo fornecerá:

• Método 1: Efeito de desbotamento usando a propriedade CSS Animation
• Método 2: Efeito de desbotamento usando a propriedade de transição CSS

Método 1: Efeito de desbotamento usando a propriedade "Animação" CSS

Para projetar uma página HTML simples, adicione o seguinte elemento:

• Adicione o "

  ”Elemento junto com o“estilo”Atributo. O atributo "estilo" contém as propriedades de estilo do elemento.

• Aplicar o "cor”Propriedade no estilo atributo para definir a cor do texto do elemento.
• Depois disso, use o “

  ”Elemento para adicionar algum texto ou um parágrafo simples.

Abaixo está o código HTML:

Site do tutorial Linuxhint

Efeito desbotado na carga da página

A página HTML é criada com sucesso:

Na seção CSS, para aplicar o efeito de desbotamento na página, o “animação”A propriedade CSS será usada no“”Elemento da página HTML.

Elemento de "corpo" de estilo

corpo
Animação: Fadeinpage facilidade 3s;
Count de animação-aladeração: 1;

O "" é aplicado com as seguintes propriedades CSS:

• ““animação”É a propriedade abreviada que define a animação especificando vários valores. Aqui, o nome da animação, a função de animação-timing e a duração da animação é definida.
• ““Contagem de animação-aladeração”Define quantas vezes a animação deve iterar.

Aplique regras "@KeyFrames" sobre "animação"

@keyframes fadeinpage
0%
opacidade: 0;

100%
opacidade: 1;

Para definir o “@KeyFrames”Regras para a animação, mencione o nome da animação após a palavra -chave @KeyFrames. Modifique o comportamento da animação da seguinte forma:

• No "0%”Animação, a“opacidade”A propriedade está atribuída o valor 0. Significa quando a animação começa, a imagem é transparente.
• No "100%”Animação, a opacidade está definida como“1”, Que se refere a uma cor sólida.

Saída

Vamos seguir em direção ao segundo método para aplicar o efeito de desbotamento na carga da página.

Método 2: Efeito de desbotamento usando a propriedade "transição" CSS

Adicione um “carregandoAtributo no “" elemento. Este evento é acionado na página da página. Na carga, a opacidade do elemento corporal é definida como “1”, Que se refere a uma cor sólida:

Neste exemplo, o CSS “transição”A propriedade é utilizada para adicionar um efeito de desbotamento:

corpo
opacidade: 0;
transição: opacidade 6s;

A seguir, a explicação das propriedades acima estabelecidas:

• ““opacidade”Propriedade define a transparência dos elementos.
• Usando CSS “transição”, Altere gradualmente os valores das propriedades ao longo de um tempo especificado.

Saída

Ensinamos os métodos para usar CSS para um efeito de desbotamento na carga da página.

Conclusão

Várias propriedades CSS podem ser utilizadas para aplicar um efeito de desbotamento nos elementos HTML. Mais especificamente, o “animação","opacidade", e "transição”As propriedades podem ser usadas para especificar efeitos animados em páginas ou elementos. As animações são ajustadas usando o “@KeyFrame" regras. Este artigo explicou os métodos para adicionar um efeito de desbotamento na carga da página usando CSS.