纯CSS3实现光芒旋转四射的头像动画

歪脖骇客

发表于2014-05-10 15:58:12

HTML代码

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

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

最外面的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语法。

作者:歪脖骇客

原文地址:http://www./css-spin/

预览地址:http://www.webhek.com/demo/css-spin/