Heim  >  Artikel  >  Web-Frontend  >  css3 过渡记_html/css_WEB-ITnose

css3 过渡记_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:40:54889Durchsuche

CSS3 过渡

  CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]

  transition-property:指定过渡的CSS属性。
  transition-duration:指定完成过渡所需的时间。
  transition-timing-function:指定过渡调速函数。
  transition -delay:指定过渡开始出现的延迟时间。

  transition属性类似于border,font这些属性,可以简写,也可以单独来写。简写时,各函数之间用空格隔开,且需要按一定的顺序排列。另外,作用于多个过渡属性时,中间用逗号隔开。如下:

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       /*分开使用transition的扩展属性*/       transition-property:width,height,background;       transition-duration:1s;       transition-timing-function:ease;       transition-delay:.2s;       /*使用transition简写属性*/       transition:width 1s ease .2s,height 1s ease .2s,background 1s ease .2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

transition-property语法:

transition-property:no | all | <single-transition-property> [, <single-transition-property>] *

  none:没有指定任何样式。
  all:默认值,表示指定元素所有支持transition-property属性的样式。
  :指定一个或多个样式。
  并不是所有样式都能应用transition-property进行过渡,只有具有一个中点值的样式才能具备过渡效果,如颜色,长度,渐变等。

transition-duration语法

transition-duration:<time> [,<time>] *  

  

transition-timing-function语法

transition-timing-function:<single-transition-timing-function> [,<single-transition-timing-function>] *  

  单一的过渡函数

  指单一的过渡函数,主要包括下面几个属性值。
  ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。
  linear:元素样式从初始状态过渡到终止状态速度是恒速。
  ease-in:元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态。这种效果称为渐显效果。
  ease-out:元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态。这种效果称为渐隐效果。
  ease-in-out:元素样式从初始状态到终止状态时,先加速再减速。这种效果称为渐显渐隐效果。

  三次贝塞尔曲线:用来定义精确度更高的过渡函数。

  定义三次贝赛尔曲线的语法如下:

cubic-bezier(p0,p1,p2,p3)

  每个点值只允许0~1的值,相当于0%到100%,p0与p3的值固定的,他们始终代表起点坐标(0,0)与终点坐标(1,1)。因此只需要设置p1,p2的点值就行了。

可以用在线的三次贝塞尔工具模拟并实现。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>   div{       width:50px;       height:100px;       background:#ffd800;       transition-property:width,height,background;       transition-duration:1s;		/*定义了三次贝塞尔曲线函数,p1的坐标是(.57,.07),p2的坐标是(.69,.16)*/       transition-timing-function:cubic-bezier(.57,.07,.69,.16);       transition-delay:.2s;   }   div:hover{       width:100px;       height:50px;       background:#00ff90;   }</style></head><body>	<div></div></body></html>

  steps()函数:用于把整个操作领域划成同样大小的间隔,每个间隔都是相等的。

steps(<integer> [, [start | end]]?)

  第一个参数是一个数值,主要用来指定steps()函数的间隔数量,此值必须是一个大于0的正整数。
  第二个参数是可选的,默认值为end。

  transition-timing-function:steps(3,start);
  

  表示分3个步骤,动画的步骤效果从每步的开始时跳,所以步骤是3/1, 3/2, 3/3。

  transition-timing-function:steps(3,end);

  

  表示分3个步骤,动画的步骤效果从每步的结束时跳,所以步骤是0, 3/1, 3/2。

transition-delay语法

transition-delay:<time> [, <time>] *

  transition-delay:用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行过渡效果,它可以是正整数,负整数和0,非零的时候必须将单位设置为s(秒)或ms(毫秒)。
  正整数时好理解,就是延迟几秒开始执行过渡,负整数时,将元素的之前时间截断,也就是transition-duration过渡时间所用的值减去transition-delay的延迟值,这中间的值不会发生,直接跳到剩下的值进行过渡。

CSS3过渡的基础知识你已经掌握了,简单来说就是一个属性四个值,接下来只需要打几遍代码,体会一下各值效果,就可以融会贯通了。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn