闲谈CSS3动画
发布时间：2010-05-07 12:34:00
随着CSS3越来越热，CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头，小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果)。与其说是渐进增强，不如说是满足了技术人小小的虚荣心。
以下是自己的一点理解，希望能对大家有所帮助。
…
淘宝案例解析
需求：鼠标移动到菜单上时旋转箭头，且给支持CSS3的浏览器加上旋转动画。
源码请查看demo源文件。
demo (http://fiddle.jshell.net/pjRVT/show/light/)
…
关于CSS3动画
从(http://www.w3.org/Style/CSS/current-work)可以看出，CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。
Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性，如rotate, scale, skew。
Transition 和 Animation 用于定义动画的过程。其中Transition 可以实现简单的动画；Animation则可以通过设定多个关键帧实现相对复杂的动画。
…
Can I Use? 兼容性
(数据来自http://caniuse.com/)
| IE | Firefox | Safari | Chrome | Opera | |
|---|---|---|---|---|---|
| CSS 2D Transform | no | 3.5 | 3.2 | 2.0 | 10.5 |
| CSS 3D Transform | no | no | 4.* (Mac) | no | no |
| CSS Transition | no | 3.7 | 3.2 | 2.0 | 10.5 |
| CSS Animation | no | no | 4.0 | 2.0 | no |
可以看到，CSS Animation目前只有Webkit内核浏览器支持，目前只能自己玩玩；而Transition用来做渐进增强则较为合适。
…
一个简单的例子
需求：让一个div元素在鼠标移上去时变大1倍，旋转180度，且背景由红变蓝。
html code::
<div></div>
css code::
div { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; /* 定义动画的过程 */ -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in; -moz-transition: -moz-transform .5s ease-in, background .5s ease-in; -o-transition: -o-transform .5s ease-in, background .5s ease-in; transition: transform .5s ease-in, background .5s ease-in;}div:hover { /* 定义动画的状态 */ -webkit-transform: rotate(180deg) scale(2); -moz-transform: rotate(180deg) scale(2); -o-transform: rotate(180deg) scale(2); -transform: rotate(180deg) scale(2); background: blue;}
demo (http://fiddle.jshell.net/NVErB/show/light/) (no IE)
…
0
投稿猜你喜欢
- 一、前言：在经过一段时间的存储过程开发之后，写下了一些开发时候的小结和经验与大家共享，希望对大家有益，主要是针对Sybase和SQL Ser
- 学习JQUERY就应该从最基本的学起，基本的就应该是语法了，在这里，我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了，都是
- GetObject 函数返回对文件中 Automation 对象的引用。GetObject([pathname] [, class])参数P
- 代码如下:'===================================== '转换内容，防止意外 '==
- 昨天在写“同IP站点查询”工具的时候，需要先用ASP获取查询域名的IP，本来是用WSHSHELL组件，代码如下：<％@LANGUAGE
- 这些年来，我发现许多开发者对于何时使用数据操纵语言(DML)触发器与何时使用约束感到迷惑。许多时候，如果没有正确应用这两个对象，就会造成问题
- IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件，是当图片加载完成之后，就处触发。img.complete 这
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装，其中包括很多功能和很多体验。功能越多会被认为越实用，体验越好会被认为越方便。方便
- 我正在开发一个档案管理系统，需要从数据库中同时调出图像及相关的文字说明，可我只做到了单纯地显示图片，像有一个数据库CHUNFENG，在数据库
在编写 XMLHttpRequest 请求时，需要掌握服务器端返回的内容。针对 Firefox 浏览器，我们常用的 Firebug 就能非常- 国外纷纷传言IE8将是Internet Explorer的最后一个版本，这个猜测来源于Microsoft的CEO Steve
- 很多年前，我们就可以轻易的从很多国营商场、火车车厢、饭馆旅馆中看到墙上挂的那个小本本-意见薄，作为经营方与顾客沟通的
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 有没有办法更快一点？ 有没有办法一次性收缩所有数据库？ 代码如下:alter database 数据库名 set recovery simp
- 遵循Web标准的思想，网页要表现出一种亲和力。那么，针对残障用户来说，其“阅读”器可不能读取图像上传递的信息的。所以我们会采用一种Using
- 本文介绍如何建立基于Web的日历，同时为不熟悉Active Server Pages(ASP)、SQL和ADO的开发者提供建立Web站点的过
- 在my.cnf中设置了sql_mode='STRICT_TRANS_TABLES';却发现还是有非法数据的写入，比如无符号整
- 用asp程序进行网页设计，大多因为需要访问数据库，然后再将数据显示到页面，如果数据很多的话，页面的访问速度也就变慢了，为了解决这个问题，可以
- 以下是几个文件操作过程，创建文件，删除文件，修改文件:
- 许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象，其实只要一句简单的CSS（层叠样式表），你也能在网页上实现这种效果。首先，你需要一个鼠
