CSS-Zone

Cinta de noticias

Breaking news style horizontal scroll. Ejemplo practico para cintas y lineas de contenido continuo con vista previa en vivo, estructura HTML y CSS listo para produccion que puedes integrar rapidamente.

Vista previa

BREAKING
Latest updates from the world of web developmentLatest updates from the world of web development

HTML + CSS

<div class="news-scroll">
  <span class="news-scroll__label">BREAKING</span>
  <div class="news-scroll__content">
    <span>Latest updates from the world of web development</span>
    <span>Latest updates from the world of web development</span>
  </div>
</div>

<style>
.news-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.24);
  overflow: hidden;
  max-width: 350px;
}

.news-scroll__label {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.news-scroll__content {
  display: flex;
  gap: 32px;
  animation: newsSlide 12s linear infinite;
}

.news-scroll__content span {
  white-space: nowrap;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.9);
}

@keyframes newsSlide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
</style>

Que demuestra el patron Cinta de noticias

Cinta de noticias es un patron reutilizable de animacion CSS que puede integrarse en interfaces modernas sin dependencias externas. El ejemplo incluye estructura HTML y estilos de movimiento faciles de escalar para componentes de produccion.

Cuando conviene usar este patron de animacion

Usa este efecto para indicar estado, reforzar el foco visual o anadir microinteracciones ligeras que apoyen la claridad del contenido. El movimiento debe reforzar la jerarquia, asi que manten velocidad, contraste y densidad alineados con los objetivos de tu interfaz.

Como implementarlo en produccion de forma segura

Copia el snippet, adapta espaciado y tiempos a los tokens de tu sistema y prueba el comportamiento en moviles y dispositivos de bajo consumo. Anade soporte para reduced-motion para mantener el componente accesible sin perder su funcion.