Bordes animados en las imagenes

comentar



Vamos a ver como utilizando un codigo cortito, aprovechando las posibilidades de animacion que nos da el CSS, le daremos un toque mas cool a nuestras imagenes.

Este truquillo nos permitira hacer que los bordes de nuestras instantaneas 'cobren vida', sin utilizar para ello ninguna otra imagen adicional.

Aqui podeis ver 2 ejemplos con el efecto en marcha, una imagen con los bordes redondeados y la otra no.









Para poner una o varias imagenes con los bordes animados en tu blog o web, primero copia y pega el siguiente codigo. Añade la url de la instantanea donde esta señalado en verde. Segun el tamaño en px que tenga la imagen quieras añadir, sera el mismo que tienes que escribir modificando donde esta indicado en color rojo (con informacion en azul). Tambien puedes variar el tamaño de los bordes y el radio de estos.

ver codigo
<div class="borde-animado-imagenes col-1 row-1"><img src="URL DE LA IMAGEN" /></div>
 

<style>
.borde-animado-imagenes.col-1 {
  width: 500px/* Ancho de la imagen */
  height: 334px; /* Alto de la imagen */
  border-width: 15px 15px; /* Ancho de los bordes */
  border-radius: 20px; /* Bordes redondeados */
}
@keyframes borde-animado-imagenes-row-1{
  0% {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: black;
  }

  25% {
    border-color: rgba(0, 0, 0, 0.25);
    border-right-color: black;
  }

  50% {
    border-color: rgba(0, 0, 0, 0.25);
    border-bottom-color: black;
  }

  75% {
    border-color: rgba(0, 0, 0, 0.25);
    border-left-color: black;
  }

  100% {
    border-color: rgba(0, 0, 0, 0.25);

    border-top-color: black;
  }
}

.borde-animado-imagenes {
  border: 15px solid black;
 }
.borde-animado-imagenes.row-1 {
animation: borde-animado-imagenes-row-1 750ms linear infinite;
}
</style>