CSS部分知识总结

跟我出门喝可乐
521 阅读3分钟

浏览器渲染原理

浏览器渲染步骤

  1. 处理 HTML 标记并构建 DOM 树。
  2. 处理 CSS 标记并构建 CSSOM 树。
  3. 将DOM 与 CSSOM 合并成一个渲染树 (Render Tree)。
  4. 根据渲染树来布局 (Layout)，以计算每个节点的几何信息。
  5. 将各个节点绘制 (Paint) 到屏幕上，绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。
  6. 当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成 (Compositing)，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

DOM树，CSSOM树，渲染树

render-tree-construction.png

相关链接

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%;
  }
}
  • 推荐阅读

动画有关链接🔗

avatar
文章
阅读
粉丝