CSS部分知识总结(html5和css3知识点整理)
浏览器渲染原理
浏览器渲染步骤
处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将DOM 与 CSSOM 合并成一个渲染树 (Render Tree)。
根据渲染树来布局 (Layout)，以计算每个节点的几何信息。
将各个节点绘制 (Paint) 到屏幕上，绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成 (Compositing)，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
DOM树，CSSOM树，渲染树
相关链接
渲染树构建、布局及绘制
渲染页面：浏览器的工作原理
深入浅出浏览器渲染原理
CSS动画
CSS动画的两大组成部分：transition和animation。
CSS Transform
四个常用属性
位移translate
缩放scale
旋转rotate
倾斜skew各个属性的用法：
/* 旋转10度 */ transform: rotate(10deg); /* 倾斜20度 */ transform: skew(20deg); /* 以1.5的比例放大 */ transform: scale(1.5); /* 向右位移120像素， */ transform: translate(120px, 0px); transform: translateX(120px); /* 向左向下位移则为负值 */ transform: translate(120px, -10px); transform: translateY(-10px); 复制代码
CSS Transition
作用：补充中间帧，也就是给元素添加一个 transition，让其某个属性从状态 A 变化到状态 B 时，不再是非常直接突兀，而是带有一个补间动画。
CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。
控制transition的属性
| 属性 | 含义 |
|---|---|
transition-property | 指定使用过渡效果的属性 |
transition-duration | 设置过渡动画持续时间 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 设置动画的延迟时间 |
缩写语法
div { transition: <property> <duration> <timing-function> <delay>; } 复制代码举个栗子
/* 多个属性一起动画示例 */ .box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; transition: width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #FFCCCC; width: 200px; height: 200px; transform: rotate(180deg); } 复制代码再举个栗子
nav { display: flex; gap: 0.5rem; } a { flex: 1; background-color: #333; color: #fff; border: 1px solid; padding: 0.5rem; text-align: center; text-decoration: none; transition: all 0.5s ease-out; } a:hover { background-color: #fff; color: #333; } 复制代码注意⚠️
并不是所有属性都能过渡，比如display：none/block没法过渡，一般改成visibility：hidden/visible
CSS Animation
animation通过关键帧@keyframes来实现更为复杂的动画效果。
animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画。
@keyframes两种写法
/* from/to */ @keyframes identifier { 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%; } } 复制代码缩写语法
以下所有属性都有对应的单独属性
div { animation: <duaration> <timing-function> <delay> <iteration-count> <play-state> <fill-mode> <direction>; } 复制代码子属性
| 属性 | 含义 |
|---|---|
animation-delay | 设置延时。 |
animation-direction | 设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。 |
animation-duration | 设置动画一个周期的时长。 |
animation-iteration-count | 设置动画重复次数， 可以指定infinite无限次重复动画。 |
animation-play-state | 允许暂停和恢复动画。 |
animation-fill-mode | 设置CSS动画在执行之前和之后如何将样式应用于其目标。 |
animation-timing-function | - 设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。 |
举个栗子
p { animation-duration: 3s; animation-name: slidein; /* animation: 3s slidein; */ } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }
作者：跟我出门喝可乐
链接：https://juejin.cn/post/7031201749385871391