一、浏览器渲染原理概述
1，浏览器的渲染过程
步骤1-根据HTML构建HTML树（DOM）
步骤2-根据CSS构建CSS树（CSSOM）
步骤3-将两棵树合并成一颗渲染树（render tree）
二、如何更新样式
- 一般我们用js来更新样式
div.style. background:'red' ;
div.style.display='none'
div.classList.add('red')
div.remove()直接删除节点
- 三种更新方式有什么不同
三、CSS动画的两种做法（transition 和 animation）
transition
4个常用功能
- 位移 translate
- 缩放 scale
- 旋转 rotate
- 倾斜 skew
经验 一般都需要配合transition过渡 inline元素不支持transform，需要先变成block
translate 位移
- translateX 在2D平面中水平方向上重新定位元素
- translateY 在2D平面中垂直方向上重新定位元素
- translateZ 沿着z轴在三维空间中重新定位元素
- translate3d 在三维空间中重新定位一个元素
scale 缩放
- scaleX(number)
- scaleY(number)
- scaleZ(number,number?)
使用较少，因为出现模糊
rotate 旋转
- rotate([<angle>|<zero>])
- rotateZ([<angle>|<zero>])
- rotateX([<angle>|<zero>])
- rotateY([<angle>|<zero>])
- rotate3d复杂
skew 倾斜
- skewX([<angle>|<zero>])
- skewY([<angle>|<zero>])
- skew([<angle>|<zero>],[<angle>|<zero>]?)
transition 过渡
- 作用于补充中间帧
语法
transiton:属性名 时长 过渡方式 延迟transition:left 200ms linear- 可以用逗号分隔两个不同属性
transiton:left 200ms, top 400ms- 可以用
all代表所有属性 transition:all 200ms- 过渡方式:
linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
animation
@keyframes完整语法 两种写法
-
animation：时长|过渡方式|延迟|次数|方向|填充次数|是否暂停|动画名 -
时长：1s或者1000ms
-
过渡方式：跟
transition取值一样，如linear -
方向：
reverse|alternate|alternate-reverse -
填充模式：
forwards|backwards|both -
是否暂停：
paused|running -
以上所有的属性都有对应的单独属性
