纯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绘制出各种几何图形
Aug 17 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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 图片上传类代码
2009/07/17 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP 实现重载
2021/03/09 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
在Django框架中设置语言偏好的教程
2015/07/27 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
神经网络python源码分享
2017/12/15 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
简单了解python数组的基本操作
2019/11/26 Python
python 弧度与角度互转实例
2020/04/15 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python和js交互调用的方法
2020/06/23 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
如何在Shell脚本中使用函数
2015/09/06 面试题
大二学生学习个人自我评价
2014/01/19 职场文书
银行服务感言
2014/03/01 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书