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:
Al igual que con el CSS, el Javascript tambien nos da muchas posibilidades en cuanto al diseño de texto se refiere. En este caso lo animamos como si las letras estuvieran bailando, a la vez que cambian de color y aumentan y disminuyen de tamaño. Para añadirlo a tu blog o web, solo tienes que copiar el codigo de abajo. Escribes el texto donde esta indicado en rojo, pero recuerda que tienes que escribirlo del reves para que se lea bien. 
