CSS知识总结

116 阅读1分钟

CSS知识总结

1. 浏览器渲染原理

2. CSS 动画的两种做法(transition 和 animation)

3. 其他任何你想写的

一、浏览器渲染原理
1、处理HTML标记并构建DOM树。
2、处理CSS标记并构建CSSOM树。
3、将DOM和CSSOM合并成一个渲染树。
4、根据渲染树来进行布局,以此来计算每个节点的几何信息。
5、将各个节点绘制到屏幕上。
二、CSS动画的两种做法
1、transition
作用:补充中间整帧 transition:属性名 时长 过渡方式 延迟 transition:left 200ms linear all代表所有属性,过渡方式:linear | ease |ease-in等等,具体请查看MDN;
并不是所有属性都能过渡,display:none =>block没法过渡;background颜色可以过渡,opacity透明度可以过渡;过渡必须有起始 2、animation
animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名称;
animation:1s linear infinite alternate forwards paused; @keyframes keyframe语法.png 3、CSS学习理解
CSS必须实践,并且CSS的样式动画特效等等都是带有艺术创作性质的,没有绝对的标准答案;