这个星期回顾了一下CSS的知识,对于CSS的学习,是最重要的还是不懂得就上MDN查,其次就是多练习每个属性,所以,我们要了解的是浏览器的渲染原理和CSS动画。
浏览器的渲染原理
首先推荐这两篇篇文章:渲染树构建、布局与绘制,渲染性能,在了解完以后,我来介绍一下浏览器渲染过程:
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一颗渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose合成(根据层叠关系展示画面)
CSS动画
CSS动画通常通过transform
,animation
,transform有4个常用的功能:
- 位移
translate
- 缩放
scale
- 旋转
rotate
- 倾斜
skew
CSS过渡
CSS过渡属性是transition
,其作用是补充中间帧,下面我来介绍其语法:
- transtion: 属性名 时长 过渡方式 延迟
- 可以用逗号分隔两个不同的属性,例如:transition:top 200ms,left 100ms