CSS知识总结
浏览器渲染原理
- 步骤
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSDOW)
- 将两棵树合并成一颗渲染树(Render Tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose合成(根据层叠关系展示画面)
- DOM,CSSOM,Render Tree
Transition和Animation(CSS动画)
- 语法:
- transition: 属性名 时长 过渡方式 延迟
例如: transition: all 2s ease 2s;
其中过渡方式有: linear/ease/ease-in/ease-out/ease-in-out
#heart{
display: inline-block;
margin: 100px;
position: relative;
transition: all 1s;
}
#heart:hover{
transform: scale(1.5);
}
- animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
例如: animation: .5s heart infinite alternate-reverse;
#heart{
display: inline-block;
margin: 100px;
position: relative;
animation: .5s heart infinite alternate-reverse;
}
@keyframes heart {
0%{
transform: scale(1);
}
100%{
transform: scale(1.2);
}
}
资料来源:饥人谷