logo自动旋转 html,纯CSS3实现光芒旋转四射的头像动画

之前我写过一篇用JavaScript和CSS3制作出光芒四射的肖像的文章，这篇文章受到了大家火热的追捧，因为只使用了很少的js代码和简单的CSS语句就创造出来神奇的效果。本文里我是想改进一下之前的技术，我想让它变的更容易，我想去掉js代码，只用CSS3来实现整个效果。

观看演示

HTML代码

HTML代码结构很简单，跟之前那篇文章使用的相同：

WebHek

最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。

CSS代码

我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes，从rotate(0deg)旋转到rotate(360deg)：

/* 用来实现动画的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;

top: 0;

left: 0;

z-index: 2;

}

#rays{ /* 表现动画效果 */

background: url(rays.png) 0 0 no-repeat;

position: absolute;

top: -100px;

left: -100px;

width: 490px;

height: 490px;

/* 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 */

}

通过使用animation-timing-function, animation-duration, 和 animation-iteration-count，我们就能实现线性匀速、旋转不停的动画效果！你会发现使用纯CSS制作的动画比用js制作的动画要顺滑的多。

现在我们有了一个问题，早期的Opera浏览器不支持@keyframes语法。幸运的是，我们可以通过其它方法实现这个动画：

/* boooo opera */

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

只需要简单的一段代码。而对于IE浏览器，我试图用-ms-transform / -ms-translation在IE9里运行它，但不好用。从IE10才开始支持keyframes语法。

观看演示

不断的改进自己之前的代码是个好习惯。虽然这个纯CSS实现的动画并不能在IE9里正确的运行，但IE10+，火狐，谷歌浏览器里都工作的非常好。如果必须要支持IE9，你仍然可以使用CSS条件判断语法和JavaScript配合实现js版的效果。