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

Plantilla CSS de texto parpadeante: resalta usando animation: blink

📝 Uso

Esta plantilla se utiliza para crear una animación de texto parpadeante.

📘 Explicación

Este código usa `animation: blink` y `@keyframes` para hacer que el texto parpadee en intervalos de 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á parpadeando.
</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 Avanzadas para la Animación de Parpadeo

¡Venta Flash de Emergencia en Curso!

Muchas gracias por comprar siempre con nosotros.

¡En agradecimiento a su continuo apoyo, hoy realizamos una venta especial por tiempo limitado! ¡No se pierda esta oportunidad de conseguir productos populares a precios increíbles!

Productos en Oferta

  • Auriculares Inalámbricos de Alto Rendimiento
    ¥12,000 → ¥7,200 (¡40% DE DESCUENTO!)
  • Robot Aspirador Automático R-500
    ¥35,000 → ¥24,500 (¡30% DE DESCUENTO!)
  • Set de 3 Toallas de Baño de Algodón Orgánico
    ¥5,000 → ¥3,000 (¡40% DE DESCUENTO!)

¡La venta termina hoy a las 23:59!
La oferta puede finalizar sin previo aviso una vez agotado el stock.

Este es un ejemplo de cómo se usa una frase como “¡Revísalo ahora!”

La animación de parpadeo es eficaz para atraer la atención del usuario hacia elementos importantes. Ajustando los parámetros de animation: blink, se pueden crear diversas variaciones. Por ejemplo, animation: blink 0.5s infinite; produce un parpadeo más rápido.

🌈 Animación de Colores

Si deseas cambiar no solo la opacidad, sino también el color, puedes escribir algo como @keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } }. Con esta animación, el parpadeo también cambia de color, haciéndolo aún más llamativo.

⏱ Control de Tiempos

Modificar la función de temporización de la animación da lugar a movimientos más variados. Al añadir animation-timing-function: ease-in-out;, se logra una transición más suave. También puedes retrasar el inicio con animation-delay: 1s;.

Es importante tener en cuenta que el uso excesivo de animaciones de parpadeo puede afectar la accesibilidad. Según las pautas WCAG, se recomienda evitar parpadeos superiores a tres veces por segundo. Usa este efecto solo en situaciones realmente necesarias, como mensajes de advertencia importantes.

Esta técnica es especialmente útil para notificaciones urgentes, cuentas regresivas de ofertas por tiempo limitado o para marcar campos obligatorios en formularios. Usado con moderación, puede mejorar significativamente la usabilidad del sitio.

Plantillas Relacionadas