Fantástico borde animado con CSS

Crea un borde animado sobre cualquier elemento HTML con CSS.

En el diseño web añadir elementos animados puede dar vida a la página y añadir personalidad. Si deseas mejorar el atractivo visual de tu página web o destacar algún elemento específico, te enseñaremos cómo crear un efecto visual animado en los bordes de un elemento con CSS. Este efecto se puede aplicar a botones o elementos HTML cómo <div>, etc.

Cómo crear una Animación de borde con CSS

Comienza creando la estructura HTML en la que deseas aplicar la animación de borde brillante. Puedes usar este código en botones, contenedores u otros elementos HTML. Coloca el elemento objetivo dentro de un contenedor principal, como se muestra en el siguiente código:
```
<div class="wrapper lightBeam">
  <div class="inside">
    Borde animado con CSS.
  </div>
</div>
```

A continuación, necesitas agregar el código CSS a tu sitio web. Los estilos CSS proporcionados en el código crean el efecto de borde brillante. Las partes clave a tener en cuenta son la clase .lightBeam::before y la animación @keyframes rotate.

:root {
  --border-radius: 8px;
}

body {
  background: black;
}

.wrapper {
  max-width: 400px;
  width: 100%;
  margin: 50px auto;
  border-radius: var(--border-radius);
}

.wrapper .inside {
  padding: 25px;
  background: #222;
  color: #fff;
  border-radius: var(--border-radius);
}

.wrapper h3 {
  margin-bottom: 15px;
}

.lightBeam {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightBeam .inside {
  position: relative;
  z-index: 1;
  width: 100%;
}

.lightBeam .inside {
  margin: 2px;
}

.lightBeam::before {
  content: "";
  display: block;
  background: linear-gradient(90deg,
      rgba(20, 136, 252, 0) 0%,
      rgba(20, 136, 252, 80%) 40%,
      rgba(20, 136, 252, 80%) 50%,
      rgba(20, 136, 252, 0) 100%);

  height: 200px;
  width: 40px;
  transform: translate(0);
  position: absolute;
  animation: rotate 3s linear forwards infinite;
  z-index: 0;
  top: 50%;
  transform-origin: top center;
}

@keyframes rotate {
  0% {
    transform: rotate(0) scaleX(4);
  }

  25% {
    transform: rotate(90deg) scaleX(1);
  }

  50% {
    transform: rotate(180deg) scaleX(4);
  }

  75% {
    transform: rotate(270deg) scaleX(1);
  }

  100% {
    transform: rotate(360deg) scaleX(4);
  }
}

Puedes personalizar la animación del borde ajustando las propiedades en el código CSS. Modifica las propiedades de la animación y otras para lograr el efecto de brillo, el color y la velocidad de animación deseados. En nuestro caso hemos hecho que mientras el rectángulo va rotando también cambie el ancho del mismo, así aunque el rectángulo rota siempre a la misma velocidad, parece que se detenga en las posiciones centrales de arriba y abajo del elemento donde se aplica el efecto.

Fantástico borde animado con CSS

Cómo crear una Animación de borde con CSS

Resultado