CSS3 Transição - Efeito de desbotamento

A folha de estilo em cascata fornece muitas propriedades de estilo para os elementos HTML. Essas propriedades incluem estilo simples para animação. Além disso, os efeitos de desbotamento e desbotamento estão entre os comuns. O CSS “transição”Propriedade e“animação”Com as regras @KeyFrame ajudam a aplicar a animação aos elementos HTML.

Este artigo ilustrará o método para adicionar efeitos desbotados em diferentes elementos HTML.

Como adicionar um efeito de desbotamento ao texto?

O "animação”A propriedade pode ser usada para adicionar um efeito de desbotamento ao texto. Para fazer isso, primeiro, no arquivo html, adicione um elemento "" e atribua -o o "Fadeout-text" eu ia:

Linuxint

ID do estilo “#Fadeout-text”

O "#Fadeout-text”É usado para acessar o ID criado com ID“Fadeout-text”E aplique as seguintes propriedades:

#fadeout-text
largura: 100%;
Cor: Darkred;
tamanho de fonte: 6em;
Alinhamento de texto: centro;
Fonte-família: Fantasia;
espaçamento de cartas: .2em;
Animação: Fadeout 5s;

Aqui:

• ““largura”Determina a largura do elemento div.
• ““cor”Define o texto ou a cor da fonte do elemento.
• ““tamanho da fonte”Especifica o tamanho da fonte.
• ““alinhamento de texto”Determina o alinhamento do texto.
• ““família de fontes”Determina o estilo de fonte.
• ““espaçamento de cartas”Define o espaçamento entre os personagens.
• ““animação”Propriedade define o nome da animação“desaparecer”E a duração“5s”Como cinco segundos.

Defina a regra “@KeyFrames” para a propriedade de animação

Para aplicar o comportamento de animação no elemento, mencione o “animaçãoNome após o “@KeyFramePalavra -chave da seguinte forma:

@KeyFrames Fadeout
0%
opacidade: 1;

100%
opacidade: 0;

A seguir, a explicação do trecho de código acima:

• ““0%”Define o início de uma animação.
• ““100%”Define o fim de uma animação.
• ““opacidade”A propriedade é utilizada para ajustar o nível de transparência de um elemento.

Saída

Como adicionar um efeito de desbotamento no mouse?

No HTML, também é possível aplicar o efeito de desbotamento quando o usuário paira o mouse sobre o elemento.

Exemplo

O exemplo abaixo instrui como aplicar um efeito de desbotamento no mouse.

ID do estilo "Fadeout-text" estilo

Em primeiro lugar, especifique o “opacidade" como "100%”Além das outras propriedades estilizadas:

Opacidade: 100%;

Adicionar “: Pseudo-seletor“ Passe ”

#Fadeout-Text: Hover
Opacidade: 10%;
transição: 3s;

O "#Fadeout-Text: Passe”É usado para aplicar as propriedades especificadas no elemento. Aqui o "transição”A propriedade muda o movimento do elemento dentro da duração.

Saída

Como adicionar um efeito de desbotamento às imagens?

Adicionar efeitos de animação nas imagens é um dos recursos mais divertidos do aplicativo da web. Com a ajuda do conceito discutido anteriormente, você também pode desviar a imagem em uma página da web.

Exemplo

Adicione um “”Elemento e atribui o id“Fadeout-Image”:

ID do estilo “Fadeout-Image”

O "#Fadeout-Image”É usado para acessar o ID“ Fadeout-Image ”do HTML e aplicar as seguintes propriedades:

#fadeout-imagem
largura: 100%;
Altura: 50%;
Imagem de fundo: URL (/imagens/noite-.jpg);
Repetição de fundo: sem repetição;
Size de fundo: capa;
Posição: Absoluto;
Animação: Fadeout 5s;

No código acima:

• ““imagem de fundo”Define o URL da imagem.
• ““fundo de repetição”Define não repetir a imagem.
• ““tamanho de fundo”Especifica o tamanho da imagem em segundo plano.
• ““posição"Propriedade como"absoluto”Define a posição da imagem relevante para o ancestral posicionado mais próximo.

Adicionar regras "@KeyFrame" à propriedade "Animação"

Da mesma forma, utilizaremos o “@KeyFrames”Regras para aplicar o efeito de desbaste para criar um efeito de animação:

@KeyFrames Fadeout
0%
opacidade: 1;

100%
opacidade: 0;

Saída

Isso se tratava de adicionar um efeito de desbotamento nos elementos HTML usando CSS.

Conclusão

Propriedades do CSS como “opacidade","animação","transição", e "@KeyFrame”As regras são significativas para adicionar um efeito de desbotamento nos elementos HTML. A "opacidade" define o nível de transparência, a propriedade "transição" ajusta o movimento gradual da animação e a propriedade "Animação", juntamente com a regra "@KeyFrames", ajuda a adicionar animação aos elementos. Este post explicou o procedimento sobre como adicionar um efeito de desbotamento nos elementos usando CSS.