一.浏览器渲染原理 1.根据HTML构建HTML树(DOM)
2.根据CSS构建CSS树(CSSOM)
3.将两个树合并成一颗渲染树(render tree)
4.Layout布局(文档流·盒模型·计算大小和位置)
5.paint(把边框颜色·文字颜色·阴影等画出来)
6.Compose合成(根据层叠关系展示画面)
这是1-3的树;
如何更新样式?
1.一般我们用js来更新样式 div.style.background='red'
div.style.display='none'
div.classList.add('add')
div.remove()直接删除掉
2.以上方法有什么不同呢?
有三种不同的渲染方式
transform(变形)
有四个常用功能 1.translate
transition:translateX( ):左右位移
transition:translateY( ):上下位移
transition:translateZ( ):离视点远一些或者近一些。
2.scale
transition:scaleX( ):体型变胖
transition:scaleY( ):体型变高 注意这里border也会变粗
3.rotate
transition:rotateX( ):沿着横轴方向转动
transition:rotateY( ):顺时针转动
transition:rotateZ( ):默认垂直屏幕的轴转动;
4.skew
transition:skewX( ):左右倾斜
transition:skewY( ):上下倾斜
二.css动画的两种做法
transition(过渡)
animation
transition过渡代码示例
animation 代码示例