利用CSS添加渐变(Transition)效果
既然已经使用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
- 数字
CSS3确实挺强大的,但对于这个还是一无所知,没可以去学习CSS3!
@苏扬 遇到的时候用就行啦
CSS我也想学啊,不过现在没那么多时间。现在只会简单的加背景颜色什么的。
@朵未 都是从添加背景颜色过来的。
熟悉了就简单啦
CSS3太多,就像我那样,在IE下就很平淡了,唉。。。
@万戈 对。这些事目前还是做给非IE用户的。
什么时候IE6会消失啊?
@FORECE XP彻底退出后IE6就消失了。
用到时翻翻
@Ebo 欢迎翻翻看看~~
CSS3了啦~
我还只会改改字体、背景颜色~
@Lazyyyyyy 从基础开始吧,一步一步就会熟练啦
目前来讲还是不能大量使用
@zwwooooo 的确这些效果很炫,但是只能在小地方使用,主体部分使用的话可能影响网页可读性
CSS3 越来越牛了,很强大啊!
这个我也打算在下次折腾的时候弄上去
建议RSS文末加个指向真是文章地址的链接吧~
有时在外边开GR不方便翻墙~
这个渐变效果暂时还没想到有什么可用的地方,嘿嘿~
个人蛮喜欢圆角的。
@夏影殘雪 啊,我没想到这个。以前做的主题带着,到这个给忘记了,我添加试试,谢谢提醒。
渐变用在链接上啊,图片上啊都很不错
有种看不过来的感觉,学弄的东西太多了
@zwwooooo 改了改小地方,其实一直都没完工~~
确实很强大的说,学过我一直没用~
@小杜博客 强大是强大,但是IE不适用还是问题啊