o piscar tag (<blink>) é uma tag HTML obsoleta que faz o conteúdo dessa tag piscar lentamente.

cshow

google search blink
Pesquisa no Google de “tag piscada”

Isso, junto com outras tags obsoletas, como o letreiro tag (<marquee>), foram uma maneira fácil de adicionar efeitos de animação simples ao seu site.

Sendo a tag piscada um simples elemento HTML, você a utilizaria de acordo com o seu conteúdo.

Por exemplo, se você quiser que a palavra “piscar” no blink-182 pisque, escreva o seguinte HTML:

<p>  <blink>blink</blink>-182</p>

Como você deve ter notado no gif acima, esta tag está obsoleta.

html blink browser compatability
Compatibilidade do navegador de tags piscadas

Isso significa que você não pode usar a própria tag HTML intermitente. No entanto, isso não deve impedir-nos de refazê-lo em toda a sua glória piscante.

No mundo atual do desenvolvimento web, as animações geralmente são tratadas com CSS ou JavaScript. Usando animações CSS, podemos recriar nossa tag piscada com algumas linhas e voltar aos negócios.

Com o seguinte CSS:

.blink {  animation: blink 1s steps(1, end) infinite;}@keyframes blink {  0% {    opacity: 1;  }  50% {    opacity: 0;  }  100% {    opacity: 1;  }}

Você pode adicionar o .blink classe para qualquer elemento HTML para fazê-lo piscar.

<p>  <span class="blink">blink</span>-182</p>

html blink effect
Efeito intermitente HTML CSS

Este é 2020, e se quiséssemos algo um pouco mais suave?

Bem, para começar, podemos fazer a animação desaparecer removendo o steps das definições de animação.

.blink {  animation: blink 1s infinite;}

css blink fade
Efeito de desbotamento

Ou, e se quiséssemos fazê-lo desaparecer como um efeito de ficção científica?

.blink {  animation: blink 3s infinite;}@keyframes blink {  0% {    opacity: 1;  }  100% {    opacity: 0;    color: blue;  }}

css scfifi fade
Efeito de ficção científica fade blink CSS

Ou mesmo um bom efeito de crescimento e desbotamento.

.blink {  animation: blink 3s infinite;}@keyframes blink {  0% {    opacity: 1;  }  50% {    opacity: 0;    transform: scale(2);  }  51% {    opacity: 0;    transform: scale(0);  }  100% {    transform: scale(1);    opacity: 1;  }}

css grow fade
CSS pisca crescer e desaparecer efeito

Assumindo o controle de animações com CSS

Embora você não consiga usar a tag intermitente, você ainda tem muitas opções. O CSS fornece várias opções de animação de forma nativa; portanto, se você deseja recriar seu passatempo HTML favorito ou recriar a sequência do título Alien, As possibilidades são virtualmente infinitas.