🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Template de texto piscante com CSS: destaque com animation: blink

📝 Uso

Este template é usado para criar uma animação de texto piscando.

📘 Explicação

Este código usa `animation: blink` e `@keyframes` para fazer o texto piscar a cada 1 segundo.

🔹 Código Parcial

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

💻 Código Completo

<div class="blink-text">
  Este texto está piscando.
</div>

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>
Copiado!

✨ Técnicas Avançadas para Animação de Piscar

Promoção Relâmpago de Emergência em Andamento!

Muito obrigado por sempre comprar conosco.

Como forma de agradecimento, estamos realizando hoje uma promoção relâmpago especial por tempo limitado! Não perca esta chance de adquirir produtos populares por preços incríveis!

Produtos em Promoção

  • Fones de Ouvido Sem Fio de Alta Performance
    ¥12.000 → ¥7.200 (40% OFF!)
  • Robô Aspirador Automático R-500
    ¥35.000 → ¥24.500 (30% OFF!)
  • Kit com 3 Toalhas de Banho de Algodão Orgânico
    ¥5.000 → ¥3.000 (40% OFF!)

A promoção vai até hoje às 23:59!
Os produtos podem esgotar e a promoção pode terminar sem aviso prévio.

Este é um exemplo de como frases como “Confira agora!” são usadas.

A animação de piscar é eficaz para atrair a atenção do usuário para elementos importantes. Ao ajustar os parâmetros de animation: blink, é possível criar diversas variações. Por exemplo, animation: blink 0.5s infinite; resulta em um piscar mais rápido.

🌈 Animação de Cores

Se quiser alterar não apenas a opacidade, mas também a cor, utilize um keyframe como @keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } }. Isso cria uma animação de piscar que muda de cor, tornando o elemento ainda mais chamativo.

⏱ Controle de Tempo

Alterar a função de tempo da animação adiciona variedade ao movimento. Ao adicionar animation-timing-function: ease-in-out;, as transições se tornam mais suaves. Também é possível atrasar o início da animação com animation-delay: 1s;.

Como observação importante, animações de piscar devem ser usadas com moderação por motivos de acessibilidade. De acordo com as diretrizes do WCAG, deve-se evitar piscadas com mais de três repetições por segundo. Use esse efeito apenas em situações realmente necessárias, como mensagens de alerta importantes.

Essa técnica é útil para notificações urgentes, contagens regressivas de promoções por tempo limitado, e marcações de campos obrigatórios em formulários — ou seja, onde você realmente precisa garantir que o usuário perceba o conteúdo. Usada com moderação, ela pode melhorar significativamente a usabilidade do site.

Modelos Relacionados