Utilizando las Animaciones CSS, vamos a crear este efecto de fila de hormigas en los bordes de los contenedores.
Ejemplo:
El HTML es sólo:
Y, seguido de eso, se agregan los estilos
Creo que eso sería suficiente, espero lees guste. ¡Hasta la próxima!
Ejemplo:
Hola, soy un recuadro con animación de fila de hormigas.
El HTML es sólo:
<div class="fila-hormigas">
Contenido: Texto, Imágen, etc.
</div>
Contenido: Texto, Imágen, etc.
</div>
Y, seguido de eso, se agregan los estilos
<style>
.fila-hormigas {
display:block;
width:180px; /* Ancho del contenedor */
padding:20px;
background:#F4A460; /* Fondo del contenedor */
border:1px dashed #000; /* Grosor del borde */ /* Color del borde */
-moz-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-webkit-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-o-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-ms-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
}
@-moz-keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
@-webkit-keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
@keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
</style>
.fila-hormigas {
display:block;
width:180px; /* Ancho del contenedor */
padding:20px;
background:#F4A460; /* Fondo del contenedor */
border:1px dashed #000; /* Grosor del borde */ /* Color del borde */
-moz-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-webkit-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-o-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
-ms-animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
animation: antImg 0.3s linear infinite forwards; /* Velocidad de la animación */
}
@-moz-keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
@-webkit-keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
@keyframes antImg {
0%{border-radius: 0px;}
100%{border-radius: 6px}
}
</style>
Creo que eso sería suficiente, espero lees guste. ¡Hasta la próxima!
Comentarios
Publicar un comentario