纯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 相关文章推荐
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 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
第十二节--类的自动加载
2006/11/16 PHP
php str_pad 函数用法简介
2009/07/11 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP多维数组排序array详解
2017/11/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
js实现继承的方法及优缺点总结
2019/05/08 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
python实现微信远程控制电脑
2018/02/22 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
解析python实现Lasso回归
2019/09/11 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
实习公司领导推荐函
2014/05/21 职场文书
管理人员岗位职责
2015/02/14 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers