Rayos girando con CSS

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/AVvXsEjrbFG8OYz3auCsyYPaPm7DYko3E-iUnE9lmW5DjdddHHqi64noYmlOMdIq49LleWXVhqBtvFKjPAmfNmmrfb899Zlns_tGovEXWmTpBZA19ruynbJSTK7A1GUkiNqEhrtbJclJzOLbID5V/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: