Como fazer um texto piscando/piscando com CSS

Mr. Warren Cummerata
Como fazer um texto piscando/piscando com CSS

Ao desenvolver um aplicativo da Web, os desenvolvedores sempre tendem a implementar as propriedades de estilo CSS de maneira eficaz. CSS fornece várias propriedades de estilo, como cor, posição, alinhamentos e muito mais. Além dessas propriedades, isso nos permite definir a ação de animação nos elementos. Para esse fim, o “@KeyFrames”As regras serão usadas.

Este artigo demonstrará como podemos fazer um texto piscando/piscando com CSS.

Como fazer texto piscando com CSS?

Para fazer o texto piscar, o CSS “opacidade”Propriedade com a“@KeyFrames”A regra pode ser aplicada. Confira os exemplos abaixo.

Exemplo 1: Faça texto piscando

Em html, adicione um “”Elemento, e atribui um“estilo piscar" aula. Em seguida, adicione um “


Linuxhint


Vamos seguir em frente para estilizar os elementos HTML.

Estilo “estilo pisca” div

.estilo piscar
Antecedentes: RGB (0, 0, 0);

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

Elemento de estilo “H3”

H3
Alinhamento de texto: centro;
Fonte-família: Verdana;
Cor: #ffc310;
Animação: Blink-Text 1.9S Infinito linear;
tamanho de fonte: 6em;

O html “

  • ““alinhamento de texto”Propriedade 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 animação-tempo e os valores da propriedade de contagem de animação-aladeração.
  • ““tamanho da fonte"A propriedade ajusta o tamanho da fonte principalmente em unidades" px "e" em ".

Aplique “@KeyFrame Rule” à animação “Blink-Text”

@KeyFrames Blink-Text
0%
opacidade: 0;

50%
opacidade: 1;

100%
opacidade: 0;

O nome da animação “Text pisca”É especificado na propriedade de animação. O "@KeyFrame”A regra é 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 "50%”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 um texto piscando múltiplo

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

  • Primeiro, coloque um “”Elemento e atribui uma classe“text-div”.
  • Então, adicione dois “

    ”Elementos para incluir algum texto.

  • O primeiro "

    ”O elemento recebe uma classe“piscando”.

  • O segundo recebe duas classes, “piscando" e "um”. Ambas as classes são acessadas no CSS para declarar propriedades de estilo:

Brilha Brilha


Pequena estrela *


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

Estilo “text-div” div

.text-div
Largura: 400px;
margem: automático;
cor de fundo: RGB (42, 49, 49);
preenchimento: 8px;

O ".text-div”É usado para acessar o elemento. Dentro dos colchetes encaracolados, as seguintes propriedades CSS são aplicadas ao “.text-div ”:

  • ““largura”A propriedade 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;
Size da fonte: 40px;
Fonte-família: cursiva;
intensidade da fonte: Negrito;
Animação: estilo piscando 0.6s infinito linear;

O ".piscandoӃ usado para acessar o HTML

Tag. 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 “@KeyFrame Rule” à animação de “estilo piscante”

@KeyFrames Plashing-estilo
0%
opacidade: 0;

Ajuste o comportamento de “estilo piscando”Animação usando o“@KeyFrame" regras. No início da animação, a opacidade do texto será 0, indicando o nível completo de transparência dos elementos.

Para fazer a animação no segundo "

”Elemento um pouco diferente, a classe“um”É declarado com os seguintes estilos de animação:

Classe de estilo “One”

.um
Animação: um infinito linear 1S;

@keyframes um
50%
opacidade: 0;

Saída

Aprendemos efetivamente a fazer o texto piscando usando diferentes propriedades de estilo CSS.

Conclusão

No HTML, várias propriedades CSS são utilizadas para tornar o estilo de texto piscando. O "animação" e "opacidade”As propriedades são comumente definidas neste contexto. Para ajustar o comportamento piscando, o “@KeyFrame”A regra é declarada para uma propriedade de animação. Este artigo explicou como fazer um texto piscando ou piscando em HTML usando CSS.

TypeScript
O que é o TypeScript e como usá -lo?
O TypeScript estende o JavaScript com todos os seus recursos e adiciona novos em cima deles. Para us...
Pedro Macejkovic
Sqlite
Como baixar e instalar ferramentas sqlite?
O SQLite é um sistema de gerenciamento de banco de dados amplamente utilizado, leve e eficiente que ...
Ed Treutel IV
C nítido
Diferença entre == Operador e Método igual a C#?
A função iguals () compara o valor de duas variáveis ​​ou objetos, enquanto o operador '==' compara ...
Bryant Rowe Sr.