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变换。
猜你喜欢
- package 机制package是模块的集合,每一个Package的根目录下面都应当有一个__init__.py 文件。当解释器发现目录下
- 最近做了一次口碑网注册流程改造,简单说一下激活邮件的设计上的一些小心得:1、尽量不要用图片,尤其是别把激活链接做成一个点击按钮。2、尽量少的
- Windows安装mysql-5.7.17-winx64.zip方式记录<1.去官网上下载.zip格式的文件.2.解压到一个文件夹,这
- 本文实例讲述了php简单获取复选框值的方法。分享给大家供大家参考,具体如下:html:<form id="form1&quo
- reduce() 函数在 python 2 是内置函数, 从python 3 开始移到了 functools 模块。官方文档是这样介绍的re
- 本文实例讲述了python对数组进行反转的方法。分享给大家供大家参考。具体实现方法如下:arr = [1,2,3]arr.reverse()
- 本文实例讲述了python数据结构之图的实现方法。分享给大家供大家参考。具体如下:下面简要的介绍下:比如有这么一张图:  
- 首先说明一下SQL Server内存占用由哪几部分组成。SQL Server占用的内存主要由三部分组成:数据缓存(Data Buffer)、
- 一个已知管用的方法是,使用session_set_save_handler,接管所有的session管理工作,一般是把session信息存储
- Python 二维码制作先介绍python 二维码制作的第三方库QRCode 、MyQR1、QRCode
- 先看map。map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回。举
- 例:MYSQL安装在 D:\ApacheServer\mysql 下开始==>运行==>cmd,或者 按住win键+r键输入cm
- 方法一:<span style="font-size:14px;">#read txt method one
- 在python中,循环有一个语句:for语句。简单的for循环例子>>> hello = "world"
- 字符串占位符的"{0:2}"看到这么奇怪的占位符,估计都是一脸懵逼。而且网上搜不到。其实很简单,试一下就知道了。prin
- 一.图像金字塔原理上一篇文章讲解的图像采样处理可以降低图像的大小,本文将补充图像金字塔知识,了解专门用于图像向上采样和向下采样的pyrUp(
- 本文实例为大家分享了python版百度语音识别功能的具体代码,供大家参考,具体内容如下环境:使用的IDE是Pycharm1.新建工程2.配置
- vue 百度地图 + 定位 前提需要自己有百度的密钥,如没有可以去百度地图申请一、在主目录下的index.html引入js,例如:
- 以下函数代码中“123456” 是个加密的key,自己可以随便改。php加密,js解密,貌似没什么意义,主要是key在js中会被看到。不过在
- 数组编程使用Numpy数组可以使你利用简单的数组表达式完成多项数据操作任务,而不需要编写大量的循环,这个极大的帮助了我们高效的解决问题。我们