浏览器渲染过程
- 根据HTML构建HTML树
- 根据CSS构建CSS树
- 将两棵树合并成一颗渲染树
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
transform四个常用功能
-
位移translate
-
缩放scale
-
旋转rotate
-
倾斜skew
常用语法搜素：transform MDN
transition过渡
作用：补充中间帧
语法 transtion：属性名+时长+过渡方式+延迟
列：transtion:height 1s linear
过渡方式有
linear匀速的 ease缓慢的 ease-in 淡弱 ease-out淡出
ease-in-out淡弱淡出 cubic-bezier step-start step-end
详情搜素developer.mozilla.org/zh-CN/docs/…
animation
语法：animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
时长：1s或者1000ms
过渡方式：跟transition取值一样，比如linear
次数:3或者2.4或者infinite无限次
方向：reverse|alternate|alternate_reverse
填充模式：none|forwards|backwards|both
是否暂停：paused|running
@keyframes语法
@keyframes slidein {
from(
transform: translateX(0%);
)
to(
transform: translateX(100%);
)
}
@keyframes identifier(
0% { top: 0; left: 0;} )
30%{ top: 50px; }
68%,72%{ left :50px; }
100%{ top: 100px; left: 100%; }
}
跳动的心 js.jirengu.com/vasevafuti/…
