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.
<div class="wrapper lightBeam"> <div class="inside"> Borde animado con CSS. </div></div>
.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.
<!doctype html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Borde animado con CSS</title> <style> :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); } } </style></head>
<body> <div class="wrapper lightBeam"> <div class="inside"> Borde animado con CSS. </div> </div></body>
</html>