CSS3多列布局和过渡效果

CSS3多列布局和过渡效果

1、column-count属性
定义栏目的数量
column-count:number | auto
number 指定栏目的数量 auto 自动，如果设为auto，需要配合其他属性使用实现多列效

2、column-width属性
定义每一个栏目的宽
column-width: length | auto
length 指定每一栏的具体宽度 auto 自动

3、column-gap属性
指定列与列之间的间隔距离
column-gap:length;
length 指定间距是多少

4、column-rule属性
设置列之间的分割线的宽度、样式和颜色
column-rule: column-rule-width column-rule-style column-rule-color;

二、过渡效果
元素从一种样式逐渐改变为另一种的效果
transition属性 1、transition-property属性
规定设置过渡效果的 CSS 属性的名称
transition-property： property | all | none

2、transition-duration属性
规定完成过渡效果需要多少秒（s）或毫秒（ms）。

3、transition-timing-function属性
规定速度效果的速度曲线。
linear 匀速 ease 慢速开始—加速-----慢速结束 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 慢速开始-----慢速结束

4、transition-delay属性
定义过渡效果从何时开始，设置过渡的延迟时间。