CSS3的过渡效果

 在CSS2的世界中,过渡常常是非常单薄的,要么是从一种颜色变成另一种颜色、要么是从不透明变到透明,总而言之就是由一种状态变到另外一种状态。这就导致了很多页面给人的感觉很突兀,没有一个平滑的过渡。

  虽然我们可以使用DHTML或者诸如jQuery等其他第三方的库文件来完成过渡效果,但是为了完成一个简单的效果我们就需要大量的编码。

  我们所需要的就是用一种简单的方法来实现这些过渡,因为我相信在今后的WEB应用中,平滑的过渡越来越成为一种标准的展现形式。

  CSS3 现在已经添加到了Webkit中,现在 Apple Safari 和 Google Chrome 都已经开始支持。再往前推几个月,那个时候人们还在争论是否将这些过渡写在CSS3中,一些人坚持认为过渡并不是一种样式属性,应当用脚本来进行处理。经过众多人的努力,样式不仅限于静态的样式,动态的样式也是非常需要的。于是过渡的样式终于开始写入CSS3的官方文档中。

  废话少说,进入正题。

  本文的例子需要支持CSS3的浏览器,所以你最好使用 Safari 或者 Chrome 来测试。

  过渡、状态和动作

  我们知道,CSS中都是通过伪类来实现页面中的一个元素与用户互动的。例如,用户鼠标的悬停和移动。下面列出了几个伪类:

  Dynamic Pseudo Class  Elements Affected  Description
  :link  Links only  Unvisited links
  :visited  Links only  Visited links
  :hover  All elements  Mouse cursor over element
  :active  All elements  Mouse clicks element
  :focus  All elements that can be selected  Element is selected
  None  All elements  Default state of all elements

  过渡包含哪些元素

  一个从蓝色变成红色的动态过渡包含哪些元素呢,我们先看一个实例:

#css3tr a:link { 
    display:block; 
    height:30px; 
    line-height:30px; 
    width:100px; 
    border:5px solid #cccccc; 
    text-align:center; 
    -webkit-transition:width .25s ease-in-out, background-color .25s linear; 
    transitiona:width .25s ease-in-out, background-color .25s linear; 
} 
#css3tr a:hover { 
    color:red; 
    background-color:#e9e9e9; 
    width:200px; 
    -webkit-transition: width .25s ease-in-out, background-color .25s linear; 
    transition:width .25s ease-in-out, background-color .25s linear; 
}

  由此可见,transition 属性中包含了三个基本的属性:样式属性(CSS property)、持续时间(Duration)、计时函数(Timing Function)、延时(Delay)

CSS3的过渡效果

  看到这个图,大家对于这几个参数的作用应该了解了吧。很简单的几个参数设置,实现了我们之前需要用大量js脚本实现的效果,那么有什么理由不期待CSS3的到来呢。

  可以应用过渡的元素:

  CSS Property  What Changes
  background-color  Color
  background-image  Only gradients
  background-position  Percentage, length
  border-bottom-color  Color
  border-bottom-width  Length
  border-color  Color
  border-left-color  Color
  border-left-width  Length
  border-right-color  Color
  border-right-width  Length
  border-spacing  Length
  border-top-color  Color
  border-top-width  Length
  border-width  Length
  bottom  Length, percentage
  color  Color
  crop  Rectangle
  font-size  Length, percentage
  font-weight  Number
  grid-*  Various
  height  Length, percentage
  left  Length, percentage
  letter-spacing  Length
  line-height  Number, length, percentage
  margin-bottom  Length
  margin-left  Length
  margin-right  Length
  margin-top  Length
  max-height  Length, percentage
  max-width  Length, percentage
  min-height  Length, percentage
  min-width  Length, percentage
  opacity  Number
  outline-color  Color
  outline-offset  Integer
  outline-width  Length
  padding-bottom  Length
  padding-left  Length
  padding-right  Length
  padding-top  Length
  right  Length, percentage
  text-indent  Length, percentage
  text-shadow  Shadow
  top  Length, percentage
  vertical-align  Keywords, length, percentage
  visibility  Visibility
  width  Length, percentage
  word-spacing  Length, percentage
  z-index  Integer
  zoom  Number

  过渡的时间和延时:

  Name  How It Works
  cubic-bezier(x1, y1, x2, y2)  X and Y values are between 0 and 1 to define the shape of a bezier curve used for the timing function.
  linear  Constant speed
  ease  Gradual slowdown
  ease-in  Speed up
  ease-out  Slow down
  ease-in-out  Speed up and then slow down

  现在,就期待CSS3早日全面普及吧。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值