css3强大的动画效果animate使用说明及浏览器兼容介绍


Posted in HTML / CSS onJanuary 09, 2013

好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新。这个星期总算是告一段落,补上几篇技术性的文章。好吧,第一篇是关于css3动画的使用。
昨天突然看到jing.fm(这个音乐网站非常不错,很多效果我都很喜欢,如果你有兴趣,可以去围观下)上音乐播放时,专辑的转动效果很不错,所以准备自己动手写下,以备后用。结果第一次使用animate就遇到了坑爹的事情,特吐槽下。
一、最终的效果
css3强大的动画效果animate使用说明及浏览器兼容介绍
如上图所示,最终是想让这个专辑的图片转动起来,模拟出唱片播放的效果(你可以去jing.fm上看看真实的效果,很赞,现在很多音乐网站都添加了这个效果)。
二、结构代码

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>音乐专辑播放模拟</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="bd">
<div id="musicBox">
<div class="cover rotateCD"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>

从上面的代码可以看出,由于是使用css3强大的动画效果,所以我的结构定义的非常简单(在符合语义的前提下),同时没有引用到javascript脚本文件。
musicBox来限定外围框的大小,内部的cover用来显示专辑封面图片,这个图片是下图左边图片这样的,四四方方,不是圆形,所以我在后面做了个mask的div,它不做其他事情,只是用来容纳一个遮罩(下图右边图片),盖住图片圆形之外的部分。
css3强大的动画效果animate使用说明及浏览器兼容介绍

css3强大的动画效果animate使用说明及浏览器兼容介绍
三、css3样式表

复制代码
代码如下:

@charset utf-8;
/* common: rotateCD */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
100%{
-webkit-transform : rotate(360deg);
}
}
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
100%{
-moz-transform : rotate(360deg);
}
}
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
100%{
-ms-transform : rotate(360deg);
}
}
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
100%{
-o-transform : rotate(360deg);
}
}
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
100%{
transform : rotate(360deg);
}
}
.rotateCD{
-webkit-animation: myrotate 9.5s infinite linear;
-moz-animation: myrotate 9.5s infinite linear;
-ms-animation: myrotate 9.5s infinite linear;
-o-animation: myrotate 9.5s infinite linear;
animation: myrotate 9.5s infinite linear;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-ms-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
/* module: bd */
#bd{width: 960px;margin: 200px auto 0;}
/* module: musicBox */
#musicBox{position: relative;width: 430px;height: 430px;margin: 0 auto;overflow: hidden;}
#musicBox .cover{width: 300px;height: 300px;margin: 65px;background: url(../img/music1.jpg) 0 0 no-repeat;}
#musicBox .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/playerMask.png) 0 0 no-repeat;}

rotateCD这部分的代码兼容了多种高级浏览器(当然是支持css3的),设置了动画执行的时间和其他一些设置,你可以查询animate的更多知识来深入了解。
对于上面的关于动画关键帧keyframes的写法,踩了比较多的坑,一开始,我是看《HTML5与CSS3权威指南》上的例子,它只写了chrome下的写法(比较坑爹,我猜测估计是作者认为其他浏览器的写法与此类似,所以让读者自己去摸索),我想当然的把其他浏览器的兼容性rotate设置写成了,如下面的代码所示:
复制代码
代码如下:

@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
}
....

这样导致的结果就是,chrome和safari下动画正常,FF、opera和IE下均无动画。其实这部分很好理解,myrotate的关键帧只是对webkit做了特殊说明,其他浏览器根本对此置之不理,所以没有动画的效果。
因此,我们在写关键帧适配样式的时候,一定要写成下面的形式:
复制代码
代码如下:

@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
...
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
...
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
...
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
...
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
...

opera浏览器还有个比较怪异的地方,它偏爱@keyframes myrotate{...},而对@-o-keyframes myrotate{...}不感冒,所以你发现两者只存其一的时候,前者可以实现动画,而后者不能实现动画效果。我一直对此很是不解,后来找到关于opera的介绍,说它是严格的执行W3C网页标准。这样想想,就明白了为什么它如此偏爱@keyframes myrotate{...}了。
四、总结
css3看起来非常美好,但是实际使用中还是存在不少的不确定性。如果不能看到已经实现的代码模板,你很难确信自己的代码格式就一定正确。所以你可以到一些不错的网站来观察各种动画效果,选择自己喜欢的动画并生成代码,下载下来后再按照自己的需求来编写动画代码。这样会让你的动画效果实现起来事半功倍(不要担心它达不到你的要求,上面有很多的效果,你可以自己组合,只要你的想象力够丰富)。
好吧,本文到此结束。
PS:文中使用到的浏览器为chrome(21.0.1180.15)、safari5.1.7(7534.57.2)、opera(12.11)、FF(17.0.1)和IE10(10.0.9200.16438)。
HTML / CSS 相关文章推荐
用纯css3和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 #HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 #HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 #HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 #HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 #HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 #HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 #HTML / CSS
You might like
php中文件上传的安全问题
2006/10/09 PHP
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
使用js画图之画切线
2015/01/12 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
浅谈python之新式类
2018/08/12 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
2014年五四青年节活动策划书
2014/04/22 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android