Cómo crear unas cards con bordes animados creadas con módulos anuncio (blurb) en divi sin plugins

En este tutorial gratuito aprenderás a crear unas tarjetas o cards con bordes animados con divi y sin plugins. Estas tarjetas las vamos a construir con el módulo anuncio (blurb) que viene con divi por defecto 🤩

Cabe mencionar que este efecto me lo ha solicitado un suscriptor de los tutoriales exclusivos, me ha enviado un ejemplo y lo he tratado de replicar con Divi para llegar a este resultado:

Obviamente esta imagen de previa es fija pero si ves los primeros minutos del video tutorial podrás ver el funcionamiento de este increíble efecto 😍

Para realizar este ejercicio vamos a requerir de código CSS Personalizado, no te preocupes ya he escrito todo el código por ti para que tú solamente copies y pegues. A continuación te enlisto los códigos que vamos a necesitar en el transcurso de este tutorial para que tú solamente vayas copiando y pegando:

1. Código CSS para el «Contenido de anuncio» del módulo blurb:

background: #0f172a;
padding: 25px;
border-radius: 6px;
z-index: 2;

2. Código CSS para el campo «Antes» del módulo blurb:

content: '';
position: absolute;
top: -50%;
left: -50%;
width: 320px;
height: 380px;
background: linear-gradient(0deg, transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
z-index: 1;
transform-origin: bottom right;
animation: ov-animar-borde 6s linear infinite;

3. Código CSS para el campo «Elemento principal» del módulo blurb:

overflow: hidden;

4. Estilos CSS para animar el borde aplicado a los módulos anuncio (blurb):

@keyframes ov-animar-borde {
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}