3.7 CSS动画–页面特效
课程概要
- 2D、3D转换
- 过渡
- 动画
- 多列
1、“2D、3D转换”
1、通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
2、2D转换方法:
- translate()
- rotate()
- scale()
- skew()
- matrix()
3、3D转换方法
- rotateX()
- rotateY()
2、过渡
1、通过使用CSS3，可以给元素添加一些效果
2、CSS3过渡是元素从一种样式转换成另一种样式
- 动画效果的CSS
- 动画执行的时间
3、属性
| 属性 | 描述 |
|---|---|
| transition | 设置四个过渡属性 |
| transition-property | 过渡的名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线 |
| transition-delay | 过渡效果开始时间 |
3、动画
1、通过CSS3，也可以进行创建动画
2、CSS3的动画需要遵循@keyframes规则
- 规定动画的时长
- 规定动画的名称
4、多列
1、在CSS3中，可以创建多列来对文本或者区域进行布局 2、属性：
- column-count
- column-gap
- column-rule