Este artigo fornecerá:
- Método 1: Efeito Fade-in usando propriedade de animação CSS
- Método 2: Efeito Fade-in usando propriedade de transição CSS
Método 1: Efeito Fade-in usando a propriedade CSS 'animation'
Para criar uma página HTML simples, adicione o seguinte elemento a ela:
- Adicione o ' ” junto com o “ estilo ” atributo. O atributo “estilo” contém as propriedades de estilo do elemento.
- Aplicar o ' cor ” no atributo style para definir a cor do texto do elemento.
- Depois disso, use o “ ” elemento para adicionar algum texto ou um parágrafo simples.
Segue abaixo o código HTML:
< h2 estilo = 'cor: rgb (84, 8, 191)' >
Site do Tutorial Linuxhint
< / h2 >
< p > efeito fade-in no carregamento da página < / p >
A página HTML foi criada com sucesso:
Na seção CSS, para aplicar o efeito fade-in na página, o “ animação ” A propriedade CSS será usada no “
Elemento de estilo “corpo”
corpo {animação: fadeInPage easy 3s;
contagem de iterações de animação: 1 ;
}
O “
- “ animação ” é a propriedade abreviada que define a animação especificando vários valores. Aqui, o nome da animação, a função de tempo da animação e a duração da animação são definidos.
- “ contagem de iterações de animação ” define quantas vezes a animação deve iterar.
Aplicar regras “@keyframes” em “animação”
@keyframes fadeInPage {0 % {
opacidade: 0 ;
}
100 % {
opacidade: 1 ;
}
}
Para definir o “ @keyframes ” para a animação, mencione o nome da animação após a palavra-chave @keyframes. Modifique o comportamento da animação da seguinte maneira:
- No ' 0% ” animação, o “ opacidade ” é atribuído o valor 0. Isso significa que quando a animação começa, a imagem é transparente.
- No ' 100% ” animação, a opacidade é definida como “ 1 ”, que se refere a uma cor sólida.
Saída
Vamos avançar para o segundo método para aplicar o efeito Fade-in no carregamento da página.
Método 2: Efeito Fade-in usando a propriedade “transition” do CSS
Adicione um “ carregando ” atributo dentro do “
Neste exemplo, o CSS “ transição ” é utilizada para adicionar um efeito fade-in:
corpo {opacidade: 0 ;
transição: opacidade 6s;
}
A seguir está a explicação das propriedades acima indicadas:
- “ 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 a você os métodos para usar CSS para um efeito fade-in no carregamento da página.
Conclusão
Várias propriedades CSS podem ser utilizadas para aplicar um efeito fade-in em elementos HTML. Mais especificamente, o “ animação ”, “ opacidade ', e ' transição ” podem ser usadas para especificar efeitos animados em páginas ou elementos. As animações são ajustadas usando o botão “ @keyframe ' as regras. Este artigo explicou os métodos para adicionar um efeito fade-in no carregamento da página usando CSS.