25/11/14

Iconos sociales en gota, que se dan la vuelta

Poner los iconos sociales en gota y que se den la vuelta, es pan comido.
Tanto que solo tenéis que copiar y pegar.

Podéis ver el efecto de girar en mi blog


Una vez más vais a plantilla - diseño - añadir html y pegais el siguiente código:

<center><div id="socialicons"><a href="https://www.facebook.com/profile.php?id=100006992655193" target="_blank"><img  src="http://1.bp.blogspot.com/-TUge_shy7YQ/Ux4gSVggQRI/AAAAAAAADx8/VmBzi5giTjE/s1600/Facebook-64.png" /></a><a href="https://plus.google.com/108736969310273878584" target="_blank"><img  src="http://2.bp.blogspot.com/-mrt6ABMaLz0/Ux4gSfN61FI/AAAAAAAADx4/IRf0xvK55dw/s1600/Google-64.png"  /></a><a href="https://twitter.com/yyosipuedo" target="_blank"><img  src="http://4.bp.blogspot.com/-fMJU6W1Vjho/Ux4gvKZIJCI/AAAAAAAADyQ/sTw5xGPTI70/s1600/Twitter-64.png"  /></a><a href="http://www.pinterest.com/anapereira7070/" target="_blank"><img  src="http://4.bp.blogspot.com/-EyFooKyyklk/Ux4gs7i8CYI/AAAAAAAADyI/nEKTnv0x8Wo/s1600/Pinterest-64.png" /></a>
<style>
#socialicons img{
 -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;}
#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}
</style>
</div></center>
Espero que os haya sido útil, hasta pronto!!!

No hay comentarios:

Publicar un comentario