Cómo crear un borde animado con SVG y CSS ….

Vamos a explorar un efecto de animación de borde muy sutil utilizando CSS y SVG. Su efecto es bastante llamativo y agradable , al pasar el mouse sobre uno de los elementos dará un efecto de animación como si se desvaneciera el borde y continuamente volviera a aparecer .

Al momento de visualizar el efecto a simple vista no será visible lo que está sucediendo , pero fijandonos bién en el borde superior veremos como el ancho de la linea blanca va disminuyendo de derecha a izquierda y una nueva línea va apareciendo dejando un hueco con un poco de retardo.

Este efecto se puede crear sin SVG pero vamos a controlarlo con CSS sin usar javascript..

Que es SVG ????

Scalable Vector Graphics son una especificación para describir gráficos vectoriales bidimensionales animados y estáticos..

Algunos navegadores son compatibles con SVG :

Opera desde la versión 8

Mozilla desde la versión 1.5

Google Chrome

Safari

Internet explorer desde la versión 9

Versiones anteriores necesitan un plugin para su correcto funcionamiento….

Regresando al tema voy a explicar su funcionamiento dentro del html y el css..

index.html

estilo.css

Dentro del index Vamos a colocar un DIV con SVG que contiene la línea

<div>
  <svg width="200" height="200">
     <line class="top" x1="0" y1="0" x2="600" y2="0"/>
     <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
     <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
     <line class="right" x1="200" y1="0" x2="200" y2="600"/>
  </svg>
</div>

Le hemos colocado de ancho y alto 200 el cual es el mismo ancho y alto que contiene nuestro DIV dibujamos las líneas del cuadrado con su respectiva clase que ya veremos en el css.

En el estilo css dibujamos las propiedades a uitlizar del DIV y el SVG ..

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: #999;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: all .6s;
    transition: transform .6s;
}

div:hover svg line.top {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}

div:hover svg line.bottom {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

div:hover svg line.left {
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}

div:hover svg line.right {
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}

La div contiene un ancho y un alto de 200 pixeles para no descuadrar el contenido . Como te darás cuenta en el hover de cada línea se realiza la transformación y movimiento de cada lado siqueres jugar con este demo y sacar tus propias conclusiones da clic aquí

A este efecto se le puede dar un toque mas especial y sutil a la hora de crear un website acá te dejo un demo mas ilustrativo y su descarga

Espero les sirva en algún proyecto hasta la próxima…….

Demostración

Relacionado