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 O CSS “fundo”A propriedade é aplicada ao elemento div com a classe“estilo piscar”. Elemento de estilo “H3” O html “ Aplique “@KeyFrame Rule” à animação “Blink-Text” 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: Saída Exemplo 2: Fazendo um texto piscando múltiplo Para fazer vários textos piscantes no HTML, siga as etapas abaixo: ”O elemento recebe uma classe“piscando”. Brilha Brilha Pequena estrela * Agora, confira a seção CSS para estilizar o HTML “ Estilo “text-div” div O ".text-div”É usado para acessar o elemento. Dentro dos colchetes encaracolados, as seguintes propriedades CSS são aplicadas ao “.text-div ”: Classe de estilo “piscando” O ".piscando”É usado para acessar o HTML Tag. As seguintes propriedades são implementadas nesta classe: Aplique a “@KeyFrame Rule” à animação de “estilo piscante” 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” 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. .estilo piscar
Antecedentes: RGB (0, 0, 0);H3
Alinhamento de texto: centro;
Fonte-família: Verdana;
Cor: #ffc310;
Animação: Blink-Text 1.9S Infinito linear;
tamanho de fonte: 6em;
@KeyFrames Blink-Text
0%
opacidade: 0;
50%
opacidade: 1;
100%
opacidade: 0;
.text-div
Largura: 400px;
margem: automático;
cor de fundo: RGB (42, 49, 49);
preenchimento: 8px;
.piscando
cor amarela;
Size da fonte: 40px;
Fonte-família: cursiva;
intensidade da fonte: Negrito;
Animação: estilo piscando 0.6s infinito linear;
@KeyFrames Plashing-estilo
0%
opacidade: 0;.um
Animação: um infinito linear 1S;
@keyframes um
50%
opacidade: 0;