快速业务通道

CSS教程:CSS变换(transition)

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-26
pple已经添加到webkit中的表现。

关于设计增强的一个简要介绍

在我们继续之前,让我强调一点:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话(也就是说,所有的常用浏览器都支持)。

对错过的同学再一次强调:永远不要让网站的功能依赖样式,如果该样式不是浏览器通用的话

这也就是说,你可以使用样式,比如变换,作为设计增强以提高用户体验——在不牺牲看不到它们的用户的可用性的前提下。如果你不用CSS变换照样能用而且用户依然能够完成他们的任务,就没问题,你就可以使用CSS变换。

首先,一些变换的想法

CSS变换将不会替代所有的DHTML,不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。

你需要到下载Apple Safari 3+Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。

滚动效果

变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素),变换是为页面添加平滑的界面的非常棒的方法。

例一

Link

下拉菜单

纯CSS菜单比较容易实现,而变换还可以让你给菜单添加下拉和高亮效果。

例二

动画

你可以在页面上的两点之间移动一个对象,然后使用变换给它添加动画效果。

例三

点击一下,不要放开!

CSS教程:CSS变换(transition)

 

变换、状态与动作

但是请稍等一下。在深入了解变换之前,我们需要理解一个元素能变换的不同的状态。

状态定义当前页面中相应的元素如何与用户进行交互,它们在CSS中通过伪类来定义,比如当用户的鼠标经过一个元素的时候,那个元素就会被hover伪类控制。

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中
None 所有元素 所有元素的默认状态

变换通过改变不同元

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多
你可能对下面的文章感兴趣

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号