Usamos o texto piscando quando queremos chamar a atenção do público. Ajuda muito a chamar a atenção do usuário quando temos uma informação importante ou alguma nova atualização sobre qualquer coisa para o usuário. Usamos o texto piscando, portanto, quando os usuários estão usando os sites ou passamos por qualquer página em que ele/ela deseja obter a atualização sem desperdiçar seu tempo pesquisando, ele recebe a atualização ou informações importantes facilmente se houver um piscando texto nessa página. Como podemos ver nos sites de compras, quando houver alguma venda ou algum desconto ou algo novo nesse site, eles criam essas informações no formulário de texto piscando. Fazer o texto piscar facilmente chamará a atenção do usuário em direção a essa informação. O texto piscando é algo que desaparece lentamente por alguns segundos e depois volta ao seu texto original. Explicaremos como adicionar o texto piscando usando CSS neste tutorial.

Exemplo 1

Para fazer nosso texto piscar, temos que criar um arquivo html e escrever algum texto nele. Adicionamos o efeito piscante neste texto usando as propriedades CSS.

No código HTML, escrevemos uma única linha dentro de "Div" como título 2 "H2" e aplicamos as propriedades do CSS para tornar este texto um texto piscando. Veja o código CSS abaixo e você saberá como adicionar o efeito piscante usando as propriedades CSS.

Código CSS:

Definimos o corpo "margem" e "preenchimento" para "0". Então usamos a posição central absoluta em "div". Definimos a propriedade "Posição" para "Absoluto". Definimos o "topo" e o "esquerdo" para "50%". Depois vem a propriedade "Transform-Translate" do CSS, que transforma o texto de volta a metade de sua largura e altura. É usado para reverter o texto para "50%" de volta à metade de sua largura e "50%" de volta à metade da sua altura.

Depois disso, usamos as propriedades de estilo do CSS para mudar o estilo do "H2". Definimos o tamanho da fonte de "H2" como "5em" e a "família da fonte" para "serif". A cor que selecionamos para esta é a cor "verde" e o código para isso é "#008000". Este título está alinhado no "centro". O elemento principal é adicionar a propriedade "Animação" nesta "H2". Esta propriedade de “animação” está definida como animada para “2.0sec ”e“ Infinito linear ”. O infinito linear é usado para que essa animação começa lentamente e depois se transforma em um pouco mais rápido. O seletor "@KeyFrame" é usado para fornecer o texto piscando junto com o valor da opacidade. Definimos o valor da opacidade no final do código CSS.

Saída:

O texto é mostrado no vídeo seguinte. Quando você executa o código anterior fornecido, você verá que o texto que você escreveu no seu arquivo html está piscando. Reproduza este vídeo e você pode ver que o texto está piscando.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo #2

Vamos demonstrar outro código aqui para que você aprenda facilmente esse conceito de texto piscando no CSS.

Usamos a classe "Span" aqui e definimos o nome para "piscar". Escrevemos uma linha simples aqui que é "estou piscando" e usamos o efeito piscando neste texto usando a propriedade CSS Animation.

Código CSS:

Primeiro, definimos o texto para a posição central absoluta, o que significa que o texto aparecerá no centro da tela. Aqui, você pode ver que a "posição" é "absoluta". O "Top" e o "Bottom" estão definidos como "50%" e a propriedade "Transform Translate" está definida como "-50%, -50%". Usamos o nome da classe de "span" que é "piscando". E aplique o efeito de estilo e “animação” no texto. Definimos o "tamanho da fonte" deste texto como "4em". A “família-família” que usamos para este texto é definida como “argelino”.

A cor do texto é definida como "verde". O alinhamento do texto é definido para o "centro" da tela. A propriedade de "animação" aplica o efeito piscante ao texto. O texto piscando anima para “2.0s ”e“ Infinite ”. O "@KeyFrames" é dar a opacidade da cor ao texto piscando. Primeiro, defina -o como "0%" e "49%" para a cor "preta". O “60%” é definido como a cor transparente, “99%” transparente e “100%” preto. A saída é mostrada no vídeo seguinte.

Saída:

Neste vídeo dado, você notará que o texto pisca. Esta saída fornecida é renderizada no navegador. O texto piscando chama a atenção do usuário.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo #3

Neste exemplo, escrevemos os parágrafos no código HTML e usamos a propriedade "Animação" nesses parágrafos, para que os parágrafos pisquem quando obtivemos a saída.

Aqui, temos o cabeçalho 1 “

”Onde escrevemos o título que queremos exibir. Em seguida, criamos uma classe chamada "A1" de "P" e escrevemos um parágrafo. Além disso, criamos outro parágrafo usando o nome da classe "A2" de outro "P". Damos esses nomes para a classe "P" para que possamos usá -los no código CSS para estilizar.

Código CSS:

Primeiro, aplicamos o estilo ao título. Usamos a cor "laranja" para a fonte ou texto escrito dentro do cabeçalho. O cabeçalho está "alinhado" ao "centro" da tela de saída. A família do texto ou fonte é definida como "argelino", para que o título seja exibido no estilo "argelino". Animamos o texto para que os parágrafos pisquem na tela. Usamos a mesma propriedade que usamos em nosso exemplo anterior para fazer o texto piscar. Esta propriedade é a propriedade de "animação". Anima ou pisca para "2s" (dois segundos).

O tamanho do texto no parágrafo é "25px". Esses parágrafos estão alinhados ao "centro". O texto do parágrafo está definido como "itálico". Novamente, temos o "@KeyFrame" que explicamos em nossos exemplos anteriores. Veja o vídeo fornecido para a saída deste exemplo.

Saída:

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

No vídeo anterior, você pode ver que o texto do cabeçalho não está piscando porque não usamos o efeito piscando ou a propriedade de animação no título. É por isso que o texto do cabeçalho ainda está em forma. Mas os parágrafos abaixo do piscar de cabeça e o estilo desses parágrafos são diferentes do título.

Conclusão

Neste tutorial, explicamos o efeito piscante no CSS e aplicamos esse efeito piscante ao nosso texto usando a propriedade "Animação" CSS. Este texto piscando é usado para chamar a atenção do usuário. Você pode notar que, quando o texto pisque, nossos olhos se movem automaticamente em direção a esse texto. Neste tutorial, fornecemos os vídeos do texto piscando. Depois de assistir a essas saídas de vídeo, você entenderá o que significa piscar. Você aprenderá como o texto pisca e como usamos a propriedade de "animação" e definirá o tempo de piscar no texto para fazer o texto piscar após um estudo completo deste tutorial.