css设置过度的代码是什么?

html-css013

css设置过度的代码是什么?,第1张

CSS中设置过渡的代码为:

/* 使用过渡效果 */

transition: property duration timing-function delay

/* 例如: */

transition: background-color 2s ease-in-out 0.5s

其中,property表示需要过渡的属性,duration表示过渡时间,timing-function表示过渡效果,delay表示延迟时间。

也可以使用缩写的形式:

/* 使用缩写形式 */

transition: all 2s ease-in-out 0.5s

表示所有属性都过渡。

还有一个简写方式是:

transition:2s

它会使用默认值,即所有属性都过渡,过渡效果为"ease",没有延迟

有效的过渡属性包括: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]区间内。(贝塞尔曲线,有人也翻译为贝兹曲线)