浏览器渲染原理

浏览器渲染过程

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一颗树
4. Layout布局（文档流，盒模型，计算大小和位置）
5. Paint绘制（把边框颜色，文字颜色，阴影等画出来）
6. Compose合成（根据层叠关系展示画面）

CSS动画的两种做法

transition过度

• 补充中间帧，可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换。
  语法：

1. transition:left 200ms linear 100ms
2. transition:属性名 时长 过渡方式 延迟

3. transition:left 200ms,top 400ms
可以用逗号分隔2个不同属性

4. transition：all 200ms
可以用all代替所有属性

animation

/* @keyframes 时长（duration）|过渡方式（timing-function）|延迟（delay）|次数（iteration-count）
|方向（direction）|填充模式（fill-mode）|状态（play-state）|动画名（name）*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

• 次数：number（次数）| infinite（无限次）
• 方向：reverse | alternate-reverse | alternate
• 填充模式：none | forwards | backwards both
• 是否暂停（状态）：paused | running

心得

• CSS需要有想象力，而不是逻辑
• CSS给的属性很简单，但可以组合的很复杂