请问一下CSS里面linear什么意思

html-css08

请问一下CSS里面linear什么意思,第1张

css中“linear”其实和英文意思差不多。

英文解释为:直线的,线形的长度的<数>一次的,线性的

而css中正式这种意思,例如线性渐变(linear-gradient)

有效的过渡属性包括:background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等

transition-duration:time[,time]*:指定对象过渡的持续时间

transition-timing-function是transition属性里最为复杂的一个,针对的是过渡效果的特效。

五种预留特效:

linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)

ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)

ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)

ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)

ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

transition-timing-function是transition属性里最为复杂的一个,针对的是过度效果的特效。

也可以自己制定过渡特效:cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型,4个数值需在[0,1]区间内。(贝塞尔曲线,有人也翻译为贝兹曲线)

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。

linear-gradient( [ <angle>| to <side-or-corner>,]? <color-stop-list>)

  \---------------------------------/ \----------------------------/

    Definition of the gradient line        List of color stops 

where <side-or-corner>= [ left | right ] || [ top | bottom ]

  and <color-stop-list>= [ <linear-color-stop>[, <color-hint>? ]? ]#, <linear-color-stop>

  and <linear-color-stop>= <color>[ <color-stop-length>]?

  and <color-stop-length>= [ <percentage>| <length>]{1,2}

  and <color-hint>= [ <percentage>

栗子:

div {

  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)

}