纯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的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
JS实现前端缓存的方法
2017/09/21 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
20个常用Python运维库和模块
2018/02/12 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python 内置模块详解
2019/01/01 Python
对python判断是否回文数的实例详解
2019/02/08 Python
css sprite简单实例
2016/05/23 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
金融事务专业求职信
2014/04/25 职场文书
安全生产标语
2014/06/06 职场文书
文明倡议书
2015/01/19 职场文书
正规欠条模板
2015/07/03 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android