纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
发布时间：2014-05-07 13:32:04 作者：佚名 
我要评论
我要评论之前我用JavaScript和CSS3制作出了相同的效果，本文里我是想改进一下之前的技术，我想让它变的更容易，我想去掉js代码，只用CSS3来实现整个效果
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; </p> <p> /* 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版的效果。
相关文章
CSS3基于背景裁剪（background-clip）实现的文本标题透视特效源码
这是一款CSS3基于背景裁剪（background-clip）实现的文本标题透视特效源码。画面上的外星球与飞船背景中央呈现出带有背景剪切透视的文本视觉效果。同时可响应鼠标的移动呈2017-11-17
一款用CSS3和SVG实现的质感背景小图标2014-04-23
一款纯css实现的一个鼠标悬停背景图片做动画旋转效果，摒弃掉烦人的js2014-04-03- 使用css3 属性：background-size可以轻松实现像桌面壁纸一样拉伸，下面为大家详细介绍下具体的相关实现过程，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-19
无需任何图片和js脚本既可以实现形式多样的花纹背景，包含横向和竖向栅格背景、马赛克背景等等2013-06-19
这篇文章主要介绍了css3 边框、背景、文本效果的实现代码,需要的朋友可以参考下2018-03-21
最新评论