浏览器渲染原理
浏览器渲染一共分为6个步骤
- 首先根据HTML构建一个HTML树;
- 根据css构建css树;
- 将两棵树合并成一颗渲染树;
- Layout布局(文档流,盒模型,计算大小和位置)
- Paint绘制(边框颜色,文字颜色,阴影等画出来)
- 合成(根据层叠关系展示画面)
CSS 动画的两种做法
使用transform搭配transition来制作动画
- transform一共有4个常用功能
- 位移translate;
- 缩放scale;
- 旋转rotate;
- 倾斜skew;
-
一般需要配合transition过渡 inline元素不支持transform 需要先变成block;
-
transition语法
- transition: 属性名 时长 过渡方式 延迟
- 比如transition:left 200ms linear;
- 可以用逗号分隔两个不同的属性;
- 可以用all代表所有属性;
- 过渡方式有常用的有linear,ease,ease-in ,ease-out,ease-in-out; 4.注意:不是所有属性都可以过渡
- display:none => block无法过渡;一般改成visibility:hidden => visible;
animation动画
- 添加关键帧
@keyframes xxx{
0%{
transform:scale(1.0);
}
100%{
transform:scale(1.5);
}
}
- 添加动画 animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
- 时长:1s或者1000ms;
- 过渡方式:和transition取值一样;
- 次数: 3或者 2.4 或者无限次 infinite;
- 方向: reverse | alternate | alternate-reverse;
- 填充模式: none | forwards | backwards | both
- 是否暂停: paused | running
- 注意:以上所有属性都有对应的单独属性;