Como fazer texto piscando/piscando com CSS

” elemento para especificar um cabeçalho entre o elemento div:

---

---

< div classe = 'estilo piscar' >
< h3 > Linux h3 >
div >

Vamos seguir em frente para estilizar os elementos HTML.

Div estilo “estilo piscar”

estilo .blink {
fundo: rgb ( 0 , 0 , 0 ) ;
}

O CSS “ fundo ” propriedade é aplicada ao elemento div com a classe “ estilo piscar ”.

Elemento de estilo 'h3'

h3 {
alinhamento de texto: centro;
família da fonte: Verdana;
cor: #ffc310;
animação: texto intermitente 1,9s linear infinito;
tamanho da fonte: 6em;
}

O HTML “

” é decorado com as seguintes propriedades CSS:

• “ alinhamento de texto ” define o alinhamento do texto do elemento.
• “ família de fontes ” define um estilo de fonte para o texto.
• “ cor ” é usado para colorir o texto do elemento.
• “ animação ” é a propriedade abreviada que especifica o nome da animação, a duração da animação, a função de tempo da animação e os valores da propriedade de contagem de iterações de animação.
• “ tamanho da fonte ” ajusta o tamanho da fonte principalmente nas unidades “px” e “em”.

Aplicar “@keyframe rule” à animação “blink-text”

@ quadro-chave piscando texto {
0 % {
opacidade: 0 ;
}
cinquenta % {
opacidade: 1 ;
}
100 % {
opacidade: 0 ;
}

O nome da animação “ texto intermitente ” é especificado na propriedade de animação. O ' @keyframe ” é adicionada antes do nome da animação que significa o comportamento da animação em diferentes intervalos, conforme mencionado abaixo:

• No ' 0% ” animação, a opacidade do texto é definida como 0.
• No ' cinquenta% ” animação, a opacidade do texto é definida como 1.
• No ' 100% ” animação, a opacidade do texto é definida como 0.

Saída

Exemplo 2: Fazendo vários textos piscando

Para fazer vários textos piscando no HTML, siga as etapas abaixo:

• Primeiro, coloque um “
  ” elemento e atribua a ele uma classe “ text-div ”.
• Em seguida, adicione dois “

  ” elementos para incluir algum texto.

• O primeiro elemento “

  ” recebe uma classe “ piscando ”.

• Ao segundo são atribuídas duas classes, “ piscando ' e ' 1 ”. Ambas as classes são acessadas no CSS para declarar propriedades de estilo:

< div classe = 'text-div' >
< p classe = 'piscando' > Brilha Brilha p >
< p classe = 'piscando um' > Pequena estrela * p >
div >

Agora, confira a seção CSS para estilizar o HTML “

” elementos.

Estilo “text-div” div

.text-div {
largura: 400px;
margem: carro;
cor de fundo: rgb ( 42 , 49 , 49 ) ;
preenchimento: 8px;
}

O ' .text-div ” é usado para acessar o elemento

. Dentro dos colchetes, as seguintes propriedades CSS são aplicadas ao “.text-div”:

• “ largura ” ajusta a largura do elemento.
• “ margem ” adiciona espaço ao redor do elemento.
• “ cor de fundo ” define a cor de fundo.
• “ preenchimento ” produz espaço dentro do limite do elemento.

Classe de estilo “piscando”

.piscando {
cor amarela;
tamanho da fonte: 40px;
família da fonte: cursiva;
intensidade da fonte: Negrito;
animação: estilo intermitente 0,6s linear infinito;
}

O ' .piscando ” é usado para acessar as tags HTML

. As seguintes propriedades são implementadas nesta classe:

• “ espessura da fonte ” indica a espessura da fonte.
• Outras propriedades são explicadas na seção acima.

Aplique a “regra @keyframe” à animação “estilo intermitente”

@ estilo intermitente de quadros-chave {
0 % {
opacidade: 0 ;
}
}

Ajuste o comportamento de “ estilo intermitente ” animação usando o “ @keyframe ' as regras. No início da animação, a opacidade do texto será 0, indicando o nível de transparência total dos elementos.

Para fazer a animação no segundo “

” elemento ligeiramente diferente, a classe “ 1 ” é declarado com os seguintes estilos de animação:

Estilo “uma” classe

.1 {
animação: um 1s linear infinito;
}
@ quadros-chave um {
cinquenta % {
opacidade: 0 ;
}
}

Saída

Aprendemos efetivamente como fazer o texto piscar usando diferentes propriedades de estilo CSS.

Conclusão

Em HTML, várias propriedades CSS são utilizadas para fazer o estilo de texto piscar. O ' animação ' e ' opacidade ” são comumente definidas neste contexto. Para ajustar o comportamento de piscar, o botão “ @keyframe ” é declarada para uma propriedade de animação. Este artigo explicou como fazer texto piscando ou piscando em HTML usando CSS.