1、浏览器渲染原理
学习基础的CSS知识之前先了解一下浏览器的渲染原理,这样有利于我们更好的理解CSS代码背后的逻辑。
渲染步骤
1、根据HTML构建HTML树(DOM树)
2、根据CSS构建CSS树(CSSOM)
3、将两颗树合并成一颗渲染树(render tree)
4、Layout布局(文档流、盒模型、各个对象的大小及位置)
5、Paint绘制(把边框颜色、文字颜色、阴影等效果“画”出来)
6、Compose合成(根据层叠关系展示画面)
下图是一个简单的示例来自谷歌开发者平台,包括包含静态DOM和内部样式
Document Object Model(DOM)
style.css
当浏览器要加载这个页面时会先将页面解析成DOM树和CSSOM数。
2、CSS动画中transition和animation的用法及优缺点
2.1 transition
作用:
补充中间帧
语法:
transition:属性名 时长 过渡方式 延迟
transition:left 200ms linear
可以用逗号隔开两个不同属性
transition:left 200ms,top 400ms
可以用all代表所有属性
transition:all 200ms
过度方式:
linear
ease
ease-in
ease-in-out
ease-out
step-start
step-end
cubic-bezier
steps
PS:并非所有的属性都能过渡
如display:none=>block
改成visibility:hidden=>visible即可
过渡必须有起始
2.2 animation
语法:
animation:时长|过渡方式|延迟|次数|方向|填充方式|是否暂停|动画名;
时长:1s/1000ms
过渡方式:同transition如linear
次数:可以是小数或者infinite(无限)
方向:reverse|alternate|alternate-reverse
填充模式:none|forwards|backwards|both
是否暂停:paused|running
@keyframes
关键帧指动画序列中特定的节点画面,通过规则控制动画的进程及效果达到较为理想的画面
语法:
from to
@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%; }
}
关键帧中出现: !important
会忽视!important
3、transition与animation的区别
transition是由元素变化而触发的,无论这个触发是不是我们想要的,只要属性改变了就会触发。
animation的触发则是我们设置的,我们在规定值下指定我们想要的规则即可,可以一开始执行也可以只执行一次然后固定效果。
就效果而言animation具有更优秀的细节控制能力,可以在一次动画过程中出现多次转折更容易开发者定量控制。而transition则相对的粗糙一点,变化较为单一。
anime是一个优秀的开源轻量级的JS animation 库,里面有众多常见动画效果的demo演示示例。
文章有(2)条网友点评
[…] 点击此处了解浏览器是如何渲染网页的 […]
[…] DOM是树形结构,当我们在页面上单击一个按钮,页面上的哪些元素会触发这个事件,是发生在这个按钮上还是按钮的父元素|容器元素也会触发这个事件,如果两者都会触发那么两者谁先谁后呢?这个就是事件流。而触发的先后顺序就要看是采用的哪种类型的事件流。 […]