闲谈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
投稿猜你喜欢
前言本系列文章将依据官方文档讲解Webots R2022b的使用教程(Windows10环境)。一、Webots是什么？Webots是一个开- 深度遍历：原则：从上到下，从左到右逻辑（本质用递归）：1）、找根节点2）、找根节点的左边3）、找根节点的右边class Node(objec
- 关于python 使用xpath获取网页信息的方法？1、xpath的使用方法？XPath 使用路径表达式来选取 XML 文档中的节点或节点集
- 本文实例讲述了python日期相关操作。分享给大家供大家参考，具体如下：用 Python 做项目时，经常会遇到与日期转换相关，日期计算相关的
- 本文实例为大家分享了python实现双色球随机选号的具体代码，供大家参考，具体内容如下双色球随机选号实现代码from random impo
- 展示import tkinter if __name__ == '__main__': win =
- 在任何有监督机器学习项目的模型构建阶段，我们训练模型的目的是从标记的示例中学习所有权重和偏差的最佳值。如果我们使用相同的标记示例来测试我们的
- ---- Oracle是关系型数据库管理系统，它功能强大、性能卓越，在当今大型数据库管理系统中占有重要地位。在我们开发的一MIS
- 下面这几个小问题都是基于 InnoDB 存储引擎的。1. ID最大的记录删除后，新插入的记录ID是什么例如当前表中有ID为1,2,3三条记录
- mysql删除操作其实是假删除在 InnoDB 中，你的 delete 操作，并不会真的把数据删除，mysql 实际上只是给删除的数据打了个
- 前言图像分割是许多计算机视觉应用中的关键处理步骤，通常用于将图像划分为不同的区域，这些区域常常对应于真实世界的对象。因此，图像分割是图像识别
- 前言在我们日常生活中，时间概念常伴我们左右。让我们简单的回忆一下自己的一天，大致有以下时间点：8:00，清晨的阳光照射到床头伴着闹钟，你从睡
- 刚看到一个朋友写的用javascript连接excel数据库的程序，想把它改成access数据库的，就找到了这两篇文章 －－－－－－－－－－
- 我就废话不多说了，大家还是直接看代码吧~import kerasimport numpy as npimport matplotlib.py
- 我就废话不多说了，大家还是直接看代码吧~func ReadLine(fileName string) ([]string,error){f,
- 实际上，无论是jupyter lab还是juputer notebook其工作目录都是对应在实际磁盘的某个区域的，可以使用％pwd命令进行查
- 本文实例为大家分享了python爬取微信公众号文章的具体代码，供大家参考，具体内容如下# -*- coding: utf-8 -*-impo
- 在使用"get"时，抓取的页面最后加上编码类型 <％ 服务器端：servletactioncontext.getr
- 目录支持多种类型的过滤避免多个范围查询优化排序理解索引概念最简单的方式是通过一个案例来进行，以下就是这样的一个案例。假设我们需要设计一个在线
- 这里主要是讲在asp下两次由access数据库升级到sql server数据库后的经验及注意事项，其它语言也可以参考一下。欢迎讨论补充。1.
