纯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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 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二维数组排序详解
2013/11/06 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP学习记录之数组函数
2018/06/01 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python 正则表达式的高级用法
2016/12/04 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Python 爬虫性能相关总结
2020/08/03 Python
python如何操作mysql
2020/08/17 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Haggar官网:美国男装品牌
2020/02/16 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
vue实力踩坑之push当前页无效
2022/04/10 Vue.js