CSS hover efecto radar

CSS hover efecto radar / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

CSS hover efecto radar

El efecto hover con CSS puro, tiene múltiples posibilidades, que no se aprovechan del todo, el diseño minimalista prima en el mundo web, lo cual es bueno, pero siempre existen ideas que se quedan en el cajón por ese motivo.

El css con efecto radar, es llamativo, no solo se puede aplicar en botones, enlace u otros elementos activos, puede servirnos para enfatizar una imagen, un titulo, etc. Es un proyecto sencillo y de fácil ejecución. Tres detalles en el css logran el objetivo, :before, :hover:before y la animación.

Before: Aplicamos 'position:absolute', la transición y el 'background-color'.

Hover:before: Aplicamos la posición, un 'border-radius: 50%', en este caso para que sea circular, esto queda al gusto de cada uno. 'transform: translate' y configuramos la animación, llamada 'radar'.

La animación:

	@keyframes radar{
	  0%{
	      width:75px;
	      height:75px;
	      border:40px
	      solid #7F0039;
	      opacity:0;
	  }50%{
	      opacity:.1;
	  }
	  90%{
	      width:300px;
	      height:300px;
	  }
	  90%,100%{
	      border:2px
	      solid #7F0039;
	      opacity:0;
	  }100%{
	      width:300px;
	      height:300px;
	  }
	}

Añadiendo 'solid', podemos darle un segundo color, uno complementario al color básico, hace lograr un gran efecto, o este se puede obviar y por ejemplo usar en el before un color en degradado.

Es una forma original de señalar los elementos de nuestra web, podéis verlo y descargarlo en este enlace en codepen.

Mariano J.

Que original, es una pasada.

Joaquin Roa / 12-02-2017

Me alegro de que te guste, si lo quieres aplicar o transformar, ya sabes que tienes el enlace a codepen.

Mariano J. / 12-02-2017

Escribe un comentario

Tu email no se hará visible