纯css和html光芒特效,科技常识：纯CSS3实现给头像加个光芒四射且旋转的背景动画效果...-CSDN博客

今天小编跟大家讲解下有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3实现给头像加个光芒四射且旋转的背景动画效果的相关资料，希望小伙伴们看了有所帮助。

HTML代码

HTML代码结构很简单跟之前那篇文章使用的相同：复制代码代码如下:

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

CSS代码

我们这里要用纯CSS来实现需要使用CSS3的动画技术 [email protected]��是用keyframes 从rotate(0deg)旋转到rotate(360deg)：复制代码代码如下:/* 用来实现动画的keyframes; 从0度旋转到360度 [email protected] 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制作的动画要顺滑的多。

现在我们有了一个问题 [email protected] 我们可以通过其它方法实现这个动画：复制代码代码如下:/* boooo opera */-o-transition: rotate(3600deg); /* 可用 */

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

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

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。