Fantástico borde animado con CSS

Crea un borde animado sobre cualquier elemento HTML con CSS.

borde-animado-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

  1. 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>
  2. 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.

Resultado