CSS3----实现光芒旋转头像动画

效果图：

CSS:

		@-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);}
		}
		
		#raysDemoHolder	{ 
			position: relative; 
			width: 490px; 
			height: 490px; 
			text-align: center;
			vertical-align: middle;
		}
		#raysLogo { 
			width: 170px; 
			height: 200px; 
			background: url(http://avatar.csdn.net/A/7/9/1_damys.jpg) center center no-repeat; /*图像头*/
			display: block; 
			position: relative; 
			top: 110px; 
			left: 145px; 
			z-index: 2; 
		}
		
		#rays	{ 
			background: url(http://www.webhek.com/wordpress/wp-content/uploads/2014/05/rays-main.png) center center no-repeat; /*背景图，也可以写*/
			position: absolute; 
			top: 0px; 
			left: 0px; 
			width: 490px; 
			height: 490px; 
			-webkit-animation-name: spin; 
			-webkit-animation-duration: 40000ms; /* 40 seconds */
			-webkit-animation-iteration-count: infinite; 
			-webkit-animation-timing-function: linear;
			
			-moz-animation-name: spin; 
			-moz-animation-duration: 40000ms; /* 40 seconds */
			-moz-animation-iteration-count: infinite; 
			-moz-animation-timing-function: linear;
			
			-ms-animation-name: spin; 
			-ms-animation-duration: 40000ms; /* 40 seconds */
			-ms-animation-iteration-count: infinite; 
			-ms-animation-timing-function: linear;
			
			/* boooo opera */
			-o-transition: rotate(3600deg); /* works */
		}
		
		#rays:hover {
			/* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
		}

html:

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