一.浏览器渲染原理
渲染过程:
- 根据HTML构建HTML树(DOM-Document Object Model)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一棵渲染树(Render Tree)
- 布局阶段(Layout 文档流 盒模型 计算大小和位置)
- 绘制阶段(Paint 边框颜色 文字颜色 阴影等)
- 合成阶段(Compose 根据层叠关系展示画面)
参考资料
三种不同渲染方式:
1.div.remove() 2.改变背景颜色 3.改变transform 什么属性会触发哪种渲染方式
二.CSS动画
transform
transform属性:translate,scale,rotate,skew
eg:
位移translateX(50px),translateY(50px),translate(-50%,-50%)元素绝对居中,translateZ(50px),translate3d(x,y,z)
缩放scaleX(1.5),scaleY(1.5),scale(1.5,1.5)
旋转rotate(180deg),rotateX(90deg),rotateY(90deg),rotateZ(90deg)
倾斜skewX(90deg),skewY(90deg),skew(90deg,90deg)
注:1.inline元素不支持transform,需要先变成block 2.一般需要配合transition过渡
transition
- transition : 属性名 时长 过渡方式 延迟;
- 可用all代表所有属性 eg: transition : all 1s;
animation
@keyframes
