纯CSS3实现给头像加个光芒四射且旋转的背景动画

<div id="raysDemoHolder">
<a href="/" id="raysLogo">WebHek</a>
<div id="rays"></div>
</div>

/ 用来实现动画的keyframes; 从0度旋转到360度 /
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/ 实现光线辐射效果 /
#raysDemoHolder {
position: relative;
width: 490px;
height: 490px;
margin: 100px 0 0 200px;
}
#raysLogo {
width: 300px;
height: 233px;
text-indent: -3000px;
background: url(logo.png) 0 0 no-repeat;
display: block;
position: absolute;
: 0;
left: 0;
z-index: 2;
}
#rays { / 表现动画效果 /
background: url(rays.png) 0 0 no-repeat;
position: absolute;
: -100px;
left: -100px;
width: 490px;
height: 490px; </p> <p> / microsoft ie /
animation-name: spin;
animation-duration: 40000ms; / 40 seconds /
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#rays:hover {
/ animation-duration: 10000ms;/
/ 10 seconds - speed it up on hover! /
/ resets the position though! sucks /
}

/ boooo opera /
-o-transition: rotate(3600deg); / 可用 /