CSS3变换入门
作者：神飞 来源：前端观察 发布时间：2010-01-30 13:29:00
尽管人们期望在屏幕上有些改变，但是CSS和HTML对页面中的交互能做的实在太少了，而那些还需要用代码来实现。
比如一个链接要么是这个颜色，要么是那个颜色；一个文本区域要么这么大，要么那么大；一张图片要么是透明的要么是不透明的；它们是从一个状态直接变到另一个状态——中间并没有过渡。
这导致大部分网页有些生硬，因为元素只会很死板的切换或改变。
是的，你可以使用DHTML、jQuery或者自己编写JS来实现过度，但是这需要更多的代码来实现本应该非常简单的功能。
我们需要的是快速而简单的方法来给页面添加简单的变换(transition)效果。在本文中，你会发现很有用的关于CSS变换(transition)以及如何使用它们的信息。
几个月之前，我就建议设计师应该开始使用新的CSS 3 技术来实现一些它们渴求已久的基本的功能了——唯一的问题就是，这些技术没有一个能在IE中可用，包括IE8。
一些读者认为的那些技术将会有75％的用户看不到的观点是不靠谱的。
对那些读者我想说，“坐稳了”，因为我将要向你介绍另一个新的CSS属性，它允许你通过简单的几行代码来为任意元素添加很酷的变换效果。
CSS 变换刚刚在CSS 3中被引入，但是已经被添加为webkit的扩展了。也就是说，现在它们只能用于基于webkit内核的浏览器，包括Apple Safari和Google Chrome。不过从Opera 10.5 pre-Alpha版本来看，Opera将在下一个10.5中支持CSS 3变换。所以要看到本文中提到的实际效果，强烈建议你使用Chrome或者Safari 4来查看本文。
CSS变换从哪里来？
变换曾经只是Webkit的一部分，而且是Safari UI能做而其它浏览器不能实现的一些很酷的东东的基础。
但是W3C CSS工作组曾经拒绝将变换添加到它的官方特性里面，一些成员坚持认为变换并非CSS属性而通过脚本来处理会更好。(内牛满面啊，我前一段也有类似的观点，也和高温讨论过，我认为CSS动画超出了表现的范围，交互的东西应该有脚本来实现，不过后来在鬼哥的点拨下，才开始有了新的认识——神飞)
但是很多设计师和开发人员，包括我自己，坚持认为这确实是样式——只是动态样式，而不是我们日常使用的传统的静态样式。
幸运的是，关于动态样式的争论已经成为过去。去年三月份，来自Apple和Mozilla的代表们开始将CSS变换模块添加到CSS 3特性里面，非常接近Apple已经添加到webkit中的表现。
关于设计增强的一个简要介绍
在我们继续之前，让我强调一点：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话(也就是说，所有的常用浏览器都支持)。
对错过的同学再一次强调：永远不要让网站的功能依赖样式，如果该样式不是浏览器通用的话。
这也就是说，你可以使用样式，比如变换，作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务，就没问题，你就可以使用CSS变换。
0
投稿猜你喜欢
- 感谢Mr.Cool 给asp之家投递精彩的文章!站长你好，我经常光临你的站点，因为我也特别喜欢ASP写网页，你的站点上提供的代码比较适用哈，
- 做一个项目用到Ajax,开始觉得挺好，后来发现一个问题，例如删除一项，恢复之后就不能再接着删除，必须要等一段时间，后来知道是IE缓存的问题。
- 出差到了中国雅虎，这里的风格和淘宝很不一样。和雅虎一比，淘宝的办公环境就是个菜市场，闹哄哄，到处是人，在走道里狂奔乱窜，在每个会议室争得面红
- asp之家注：长文章分页算是asp编程中一个比较经典单位问题，怎么分页，什么时候分页.方法挺多，有的是人为的加入分页标志，有的是程序自动加分
代码如下:SELECT [StartDate] FROM [dbo].[udf_Week](2012,2012) WHERE [- InnoDB和MyISAM是在使用MySQL最常用的两个表类型，各有优缺点，视具体应用而定。下面是已知的两者之间的差别，仅供参考。1.Inn
- 代码如下:ALTER function [dbo].[GetOrderNum]( @ebaystockflag varchar(20)//规
- 最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提
- 这是一种相对比较复杂的图表，但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多，一般我们在做列表的时候通
- 每次写完的东西就忘了，下次用时还要重查资料重新写，这是今天写的一段测试代码，保留下来，记录给自已，同时分享给大家。目标：把下边的这个上传文件
- sys;//系统管理员，拥有最高权限 system;//本地管理员，次高权限 scott;//普通用户，密码默认为tiger,默认未解锁 s
- 目录：分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件我们走到哪儿了？前两期思考了太多东西，你是否已有倦意？
- 以前有过一篇类似的文章, 讲的比较简单只有三个插件而已, 所以这篇文章将全持续更新.jQuery UI 大名顶顶, 不用介绍, 它的各个控件
- 经过一个阶段的asp学习,下面我们结合所学过的内容建立一个最简单的聊天室,虽然很简单,但是大家可以通过他来掌握一个聊天室建立的基本过程,并且
- 静态页面是蜘蛛喜欢的，会得到蜘蛛经常光顾的，以至于网站上的内容会得到搜索引擎更多的收录。这里介绍一个asp伪静态的程序实现方法数据库是acc
- 各人觉得这些LOGO的设计都很好，简洁，明了，大方。特整理出来与大家分享，希望能吸取设计经验。asp之家祝愿各位09年身体健康，万事如意，网
- 在网上游荡，看着别人的精彩主页难免心里痒痒的，但自己精心布置的家（个人主页），如果在不同的浏览器中呈现
- 我的原数据库是3.23版本的.前几天因为一个论坛转移.必须用5.1的.于是就是升级了数据库.论坛是正常的.可以是原来的一个老库因为是3.23
- 过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式，涌现了很多与之相关的技术与理论资料，其中相当重要的一个领域就是关于印刷中字号和行高的
- 什么是数据库镜像?Robidoux:数据库镜像是将数据库事务处理从一个SQL Server数据库移动到不同SQL Server环境中的另一个
