利用CSS添加渐变(Transition)效果

By
WP札记

既然已经使用CSS3的特性了,那就不妨再多加几个。这里介绍一下前天折腾的-过渡效果(Transition),添加后的样子如首页标题栏、导航栏和各类链接的鼠标滑过效果。

Transition:这个是CSS3中新添加的特性,当元素在大小、颜色、布局、透明度等数值改变时(请注意是数值的改变),可以使其产生过渡的动画效果,比如当元素的大小变动时,可以使用Transition将这个变动过程变得分平滑。

为了不影响其他不支持CSS3的浏览器(主要还是IE全系列),这个属性一般用在增强网站的体验上,而不是在菜单等主体位置使用它,否则版面可能会混乱(在其他浏览器下)。所以这个效果主要可以增强图片、文字的层次感。

基础知识

浏览器支持状况

Chrome 2+(-webkit-transition)

Firefox3.7+(-moz-transition)

Safari 3.1+(-webkit-transition)

Opera 10.5+(-o-transition)

Transition对应的CSS属性列表

transition-property
* 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。
* 初始默认值为all.
transition-duration
* 指定“转换”过程的时间,如:1s、none。
* 初始默认值为0.
transition-timing-function
* 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.
transition-delay
* 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

实例

鼠标移动到元素上观察效果

可供变化的属性类型

background-color
颜色值
background-image
梯度
background-position
百分比, 长度值
border-bottom-color
颜色值
border-bottom-width
长度值
border-color
颜色值
border-left-color
颜色值
border-left-width
长度值
border-right-color
颜色值
border-right-width
长度值
border-spacing
长度值
border-top-color
颜色值
border-top-width
长度值
border-width
长度值
bottom
长度值, 百分比
color
颜色值
crop
角度值
font-size
长度值, 百分比
font-weight
数值
grid-*
various
height
长度值, 百分比
left
长度值,百分比
letter-spacing
长度值
line-height
数值, 长度值, 百分比
margin-bottom
长度值
margin-left
长度值
margin-right
长度值
margin-top
长度值
max-height
长度值, 百分比
max-width
长度值, 百分比
min-height
长度值, 百分比
min-width
长度值, 百分比
opacity
数值
outline-color
颜色值
outline-offset
数字
outline-width
长度值
padding-bottom
长度值
padding-left
长度值
padding-right
长度值
padding-top
长度值
right
长度值, 百分比
text-indent
长度值, 百分比
text-shadow
shadow
top
长度值, 百分比
vertical-align
keywords,长度值, 百分比
visibility
可视度
width
长度值, 百分比
word-spacing
长度值, 百分比
z-index
数字
zoom
数字

Comments: 30

  1. 这个对我来说,太有难度了,先观望学习

    2010年07月10日
  2. 俺是特地从书签来到这里地~
    折腾主题中= =

    2010年12月31日
  3. 通过百度娘找TRANSPARENT,竟然来到了阿修这儿~ :twisted:

    2011年02月21日
  4. 额。。是transition。。。

    2011年02月21日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz:

引用(已关闭):1

pingback from Wordpress折腾手记 6 | A.shun's Blog 2010/07/08