200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > html的过渡属性 CSS过渡属性 transition

html的过渡属性 CSS过渡属性 transition

时间:2022-01-14 16:34:38

相关推荐

html的过渡属性 CSS过渡属性  transition

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

过渡属性需要触发事件,如:hover(鼠标划过事件)

1、transition-property:检索或设置对象中的参与过渡的属性 说明:属性值可以单独设置否个属性,也可以设置多个属性 width,height; 还可以设置为all(默认值)代表所有属性

2、transition-duration:检索或设置对象过渡的持续时间 说明:设置过度时间(s, ms) 1s = 1000ms

3、transition-delay:检索或设置对象延迟过渡的时间 说明:设置延迟过度时间(s, ms) 属性值为正值的时候是延迟执行过渡效果,为负值的时候是提前只想过渡效果;

4、transition-timing-function:检索或设置对象中过渡的动画类型

说明:

linear 匀速

ease(默认值) 逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

贝塞尔曲线网址:http://cubic-/

复合式写法:

transition:all 2s 1s linear ;

transition: 2s linear 1s all ;

说明:当使用复合式写法的时候,过度时间和延迟时间的顺序是不能互换的,第一个值代表过度时间,第二个值代表延迟时间;

注:哪个元素发生变形,就把过渡属性添加给谁; 建议写给元素初始的效果里;

Like

Like

Love

Haha

Wow

Sad

Angry

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。