CSS3变换入门

作者:神飞 来源:前端观察 时间:2010-01-30 13:29:00 

尽管人们期望在屏幕上有些改变,但是CSSHTML对页面中的交互能做的实在太少了,而那些还需要用代码来实现。

比如一个链接要么是这个颜色,要么是那个颜色;一个文本区域要么这么大,要么那么大;一张图片要么是透明的要么是不透明的;它们是从一个状态直接变到另一个状态——中间并没有过渡

这导致大部分网页有些生硬,因为元素只会很死板的切换或改变。

是的,你可以使用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变换。

标签:css3,变换,入门,dhtml
0
投稿

猜你喜欢

  • 对python中list的拷贝与numpy的array的拷贝详解

    2023-06-13 02:18:35
  • python方向键控制上下左右代码

    2022-01-27 01:44:22
  • opencv读取视频并保存图像的方法

    2023-02-21 17:30:16
  • Go Grpc Gateway兼容HTTP协议文档自动生成网关

    2024-05-21 10:27:16
  • 精简高效的CSS命名准则和方法

    2010-09-17 18:38:00
  • Python定时执行之Timer用法示例

    2021-09-14 21:46:01
  • golang image图片处理示例

    2024-05-22 17:44:02
  • MySQL DDL 引发的同步延迟该如何解决

    2024-01-26 19:44:00
  • Oracle中返回结果集的存储过程分享

    2012-07-11 15:50:16
  • 使用Python机器学习降低静态日志噪声

    2021-11-09 23:48:57
  • python使用PyGame绘制图像并保存为图片文件的方法

    2023-05-13 16:17:03
  • Python使用wxPython实现计算器

    2021-08-31 11:23:54
  • 循环神经网络TextRNN实现情感短文本分类任务

    2021-12-14 04:24:26
  • php实现汉字验证码和算式验证码的方法

    2024-06-07 15:50:15
  • python 画条形图(柱状图)实例

    2021-12-06 19:09:26
  • Facebook:产品设计评价体系解密

    2011-05-24 17:13:00
  • 修改mysql最大连接数的方法

    2010-03-09 13:57:00
  • Python常用数据分析模块原理解析

    2023-07-12 03:46:31
  • Oracle学习笔记(五)

    2012-01-05 18:52:30
  • python 如何对logging日志封装

    2023-07-06 11:27:36
  • asp之家 网络编程 m.aspxhome.com