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

这篇文章主要介绍“CSS3怎么实现给头像加个光芒四射且旋转的背景动画效果”，在日常操作中，相信很多人在CSS3怎么实现给头像加个光芒四射且旋转的背景动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么实现给头像加个光芒四射且旋转的背景动画效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

公司主营业务：做网站、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出江源免费做网站回馈大家。

HTML代码

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

代码如下:

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

到此，关于“CSS3怎么实现给头像加个光芒四射且旋转的背景动画效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！