Vamos a ver un codigo CSS que nos puede servir para hacer un logo, una presentacion o, simplemente un enlace. El codigo lo que hace es poner 2 imagenes, una 'delante' que sera la que nosotros queramos y nos servira de enlace, y otra 'detras' que es la que en este caso girara. Yo he puesto una transparente png de rayos tipo comic, que ya la teneis incluida en el codigo y que es esta:
Y aqui teneis el codigo, en el que podeis modificar el tamaño, ubicacion y url de la imagen que querais poner. Todo lo que tengais que añadir o modificar os lo he puesto en rojo.
<div id="raysDemoHolder">
<a href="URL ENLACE" id="raysLogo"><font color="#98fb98"><span style="font-size: 12pt;"><u><span style="font-family: Arial Black; font-size: 12pt;">LETRAS AQUI</span></u><br></span></font></a>
<div id="rays"></div>
</div>
<style>/* keyframes for animation; simple 0 to 360 */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
/* basic structure for the rays setup */
#raysDemoHolder {
position: relative;
width: 490px;
height: 490px;
margin: 100px 0 0 200px;
}
#raysLogo {
width: 250px;
height: 250px;
text-indent: -3000px;
background: url(URL DE TU LOGO O IMAGEN) 0 0 no-repeat;
display: block;
position: absolute;
top: 120px;
left: 40px;
z-index: 2;
}
#rays { /* with animation properties */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjherFxi7elkkc2qjRKsFbLgysff5N7sH9hhdMxofz0j6c-CQmeA3VYrqtdIS9n-jRSjerFhKe3gmdt8gMo3vF_NQvG5aCv8Fk-xZoFAuesPJTDigLonNQOF73k-EcXAodD2CFHG43Uj6/s1600/rays-main.png) 0 0 no-repeat;
position: absolute;
top: -100px;
left: -100px;
width: 490px;
height: 490px;
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms; /* 40 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 40000ms; /* 40 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 40000ms; /* 40 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#rays:hover {
/* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
/* resets the position though! sucks */
}</style>
Para que veais un ejemplo de como queda, aqui teneis uno con el logo de mi blog:
