1.什么是过渡
使得css属性值,在一段时间内平缓变化的效果
2.过渡语法
1.指定过渡属性
属性:transition-property
取值:
1.all 能使用过渡的属性,一律用过渡体现
2.具体属性名
ex:
transition-property:background
当背景的属性在发生变化时用过渡给体现出来
transition-property:border-radius;
当边框倒角在发生改变时用过渡体现出来
transition-property:all
允许设置过渡效果的属性:
1.颜色属性(背景,文字,边框颜色,阴影颜色)
2.取值为数字的属性(高宽,内外边距等)
3.转换属性(位移,旋转,缩放,倾斜)
4.阴影属性
5.渐变属性
6.visibility属性(能见度)
2.指定过渡时长
作用:指定在多长时间内完成过渡操作
属性:transition-duration
取值:
以s或ms为单位的数值
1000ms=1s
3.指定过渡速度时间曲线函数
属性:transition-timing-function
取值:
1.ease 默认值,慢速开始,快速变快,慢速结束
2.linear 匀速
3.ease-in 慢速开始,加速结束
4.ease-out 快速开始,慢速结束
5.ease-in-out 慢速开始和结束,中间先加速后减速
4.指定过渡延迟时间
CSS 3 过渡(transition)操作
最新推荐文章于 2024-03-04 16:00:44 发布