1.浏览器的渲染原理
-
处理
HTML并构建DOM树。 -
处理
CSS构建CSSOM树。 -
将
DOM与CSSOM合并成一个渲染树。 -
根据渲染树来布局，计算每个节点的位置。
-
调用
GPU绘制，合成图层，显示在屏幕上。
2. CSS 动画的两种做法（transition 和 animation）
transform属性允许旋转，缩放，倾斜或平移给定元素。
@keyframes关键帧 通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。
transition 过渡 作用是补充中间帧
常用语法 transition:属性名 时长 过渡方式 延迟
常见过渡方式:
- linear: 规定以相同速度开始至结束的过渡效果
- ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果
- ease-in: 规定以慢速开始的过渡效果
- ease-out: 规定以慢速结束的过渡效果
- ease-in-out: 规定以慢速开始和结束的过渡效果
代码示例
<body>
<div id="demo"></div>
</body>
#demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 50px;
transition: all 1s;
/* all可以代表所有属性 */
}
#demo:hover {
width: 200px;
height: 150px;
}
预期效果：将鼠标移动到id为demo的border框内，border会在1秒内放大到宽200px、高150px。
animation 动画
常用语法 animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
代码示例
<body>
<div id="demo"></div>
</body>
#demo {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 50px;
animation: xxx 4s infinite;
}
@keyframes xxx {
0% {
transform: none;
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(200px) translateY(100px);
}
}
预期效果：假设初始坐标为(0,0)，前两秒border前往(200,0)，
后两秒border从(200,0)前往(200,100)，然后直接从(200,100)跳到(0,0)。
如此循环往复。
