CSS Avanzado: Bordes con Flujo de Energía Secuencial

📛 Nombre en la Industria: CSS Marching Ants Border / Sequential Border Animation / Snake Effect

🎯 El Desafío

Quería un efecto de borde que no fuera simplemente una caja girando, sino que simulara energía viajando físicamente a lo largo de un circuito (arriba → derecha → abajo → izquierda) en un bucle infinito. Es ideal para destacar tarjetas de perfil con mucho estilo.

🧢 Demo en Vivo

Observa cómo la energía fluye alrededor de la tarjeta.

🛠️ La Ingeniería Detrás

El truco no es animar el border del contenedor principal. En su lugar, utilizamos 4 elementos <span> vacíos colocados absolutamente dentro del contenedor, uno para cada lado.

La Clave: animation-delay

Cada línea tiene su propia animación que la mueve de un extremo a otro. La magia ocurre al usar animation-delay para secuenciarlas.

Si el ciclo total dura 2 segundos:

1. Top Span: Inicia en 0s.
2. Right Span: Inicia en 0.5s.
3. Bottom Span: Inicia en 1s.
4. Left Span: Inicia en 1.5s.

👁️ Vistazo al Código (Línea Superior)

/* Contenedor Principal */
.flow-box {
    position: relative;
    overflow: hidden;
}

/* Línea Superior */
.flow-box span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00f2fe);
  animation: move-right 2s linear infinite;
}

@keyframes move-right {
  0% { left: -100%; }
  50%,100% { left: 100%; }
}