利用CSS添加渐变（Transition）效果

By axiu

2010年05月23日

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: 数字

转载请注明转自：利用CSS添加渐变（Transition）效果

您已经发表过意见了！

2013年03月07日在首页和（或）feed里排除某个分类下的文章43
2011年03月07日WordPress主题SummEve66
2010年08月16日解决IE6下png图片不透明的问题51
2009年09月19日WordPress:Fatal error: Allowed memory…7
2012年12月13日WP3.5警告：Missing argument 2 for wpdb::prepa…48
2010年08月20日WordPress速度优化之Expires Headers136
2010年03月13日应该借鉴出自己的知识5

上一篇超级超级马里奥

下一篇网赚首次收款纪念-来自7b.cn

Comments: 24

CSS3确实挺强大的，但对于这个还是一无所知，没可以去学习CSS3！

苏扬 2010年05月23日
- @苏扬遇到的时候用就行啦
  
  axiu 2010年05月23日
CSS我也想学啊，不过现在没那么多时间。现在只会简单的加背景颜色什么的。

朵未 2010年05月23日
- @朵未都是从添加背景颜色过来的。熟悉了就简单啦
  
  axiu 2010年05月23日
CSS3太多，就像我那样，在IE下就很平淡了，唉。。。

万戈 2010年05月23日
- @万戈对。这些事目前还是做给非IE用户的。
  
  axiu 2010年05月24日
什么时候IE6会消失啊？

FORECE 2010年05月24日
- @FORECE XP彻底退出后IE6就消失了。
  
  axiu 2010年05月24日
用到时翻翻

Ebo 2010年05月24日
- @Ebo 欢迎翻翻看看~~
  
  axiu 2010年05月24日
CSS3了啦~
我还只会改改字体、背景颜色~

Lazyyyyyy 2010年05月24日
- @Lazyyyyyy 从基础开始吧，一步一步就会熟练啦
  
  axiu 2010年05月24日
目前来讲还是不能大量使用

zwwooooo 2010年05月24日
- @zwwooooo 的确这些效果很炫，但是只能在小地方使用，主体部分使用的话可能影响网页可读性
  
  axiu 2010年05月24日
CSS3 越来越牛了，很强大啊！

淘宝网网上购物女鞋 2010年05月25日
这个我也打算在下次折腾的时候弄上去

A.shun 2010年05月25日
建议RSS文末加个指向真是文章地址的链接吧~
有时在外边开GR不方便翻墙~

这个渐变效果暂时还没想到有什么可用的地方，嘿嘿~
个人蛮喜欢圆角的。

夏影殘雪 2010年05月26日
- @夏影殘雪啊，我没想到这个。以前做的主题带着，到这个给忘记了，我添加试试，谢谢提醒。
  渐变用在链接上啊，图片上啊都很不错
  
  axiu 2010年05月27日
还有HTML5…嘿嘿

隐残影 2010年05月31日
有种看不过来的感觉，学弄的东西太多了

Always.Life 2010年06月01日
主题又改了？好像没完工

zwwooooo 2010年06月01日
- @zwwooooo 改了改小地方，其实一直都没完工~~
  
  axiu 2010年06月01日
确实很强大的说，学过我一直没用~

小杜博客 2010年06月02日
- @小杜博客强大是强大，但是IE不适用还是问题啊
  
  axiu 2010年07月09日