首先,一些变换的想法
CSS变换将不会替代所有的DHTML,不过它会提供一些支持过渡的方法来提高您在浏览器中的设计。
你需要到下载Apple Safari 3+ 或Google Chrome浏览器来查看这些变换效果。这两个浏览器都支持Mac和PC系统。
滚动效果
变换最常见的用法就是当用户的鼠标悬放到元素上的时候将元素高亮(无论是链接、表格、表单还是其它的什么元素),变换是为页面添加平滑的界面的非常棒的方法。
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
变换、状态与动作
但是请稍等一下。在深入了解变换之前,我们需要理解一个元素能变换的不同的状态。
状态定义当前页面中相应的元素如何与用户进行交互,它们在CSS中通过伪类来定义,比如当用户的鼠标经过一个元素的时候,那个元素就会被hover伪类控制。
动态伪类 |
起作用的元素 |
描述 |
:link |
只有链接 |
未访问的链接 |
:visited |
只有链接 |
访问过的链接 |
:hover |
所有元素 |
鼠标经过元素 |
:active |
所有元素 |
鼠标点击元素 |
:focus |
所有可被选中的元素 |
元素被选中 |
None |
所有元素 |
所有元素的默认状态 |
变换通过改变不同元素状态之间的一个时间段内的样式来起作用。比如,一个元素的默认状态的颜色值将会在呈现hover状态的色彩值之前逐渐显示色盘中的中间颜色。
出处:前端观察
责任编辑:bluehearts
上一页 CSS3变换入门 [1] 下一页 CSS3变换入门 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|