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


Posted in HTML / CSS onMay 07, 2014

纯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版的效果。

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML5 weui使用笔记
Nov 21 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 #HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 #HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 #HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python找出最小的K个数实例代码
2018/01/04 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
员工自我鉴定
2013/10/09 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
远程培训的心得体会
2014/09/01 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
商务宴会祝酒词
2015/08/11 职场文书
初中政治教学反思
2016/02/23 职场文书
庭外和解协议书
2016/03/23 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL