纯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 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 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
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
django输出html内容的实例
2018/05/27 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python进度条的制作代码实例
2019/08/31 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
深入了解Python在HDA中的应用
2019/09/05 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
行政经理岗位职责
2013/11/09 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学运动会入场口号
2015/12/24 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js