CSS 知识总结

95 阅读1分钟

浏览器渲染原理

浏览器渲染一共分为6个步骤

  1. 首先根据HTML构建一个HTML树;
  2. 根据css构建css树;
  3. 将两棵树合并成一颗渲染树;
  4. Layout布局(文档流,盒模型,计算大小和位置)
  5. Paint绘制(边框颜色,文字颜色,阴影等画出来)
  6. 合成(根据层叠关系展示画面)

CSS 动画的两种做法

使用transform搭配transition来制作动画

  1. transform一共有4个常用功能
  • 位移translate;
  • 缩放scale;
  • 旋转rotate;
  • 倾斜skew;
  1. 一般需要配合transition过渡 inline元素不支持transform 需要先变成block;

  2. transition语法

  • transition: 属性名 时长 过渡方式 延迟
  • 比如transition:left 200ms linear;
  • 可以用逗号分隔两个不同的属性;
  • 可以用all代表所有属性;
  • 过渡方式有常用的有linear,ease,ease-in ,ease-out,ease-in-out; 4.注意:不是所有属性都可以过渡
  • display:none => block无法过渡;一般改成visibility:hidden => visible;

animation动画

  1. 添加关键帧
@keyframes xxx{
  0%{
    transform:scale(1.0);
  }
   100%{
    transform:scale(1.5);
  }
}
  1. 添加动画 animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;
  • 时长:1s或者1000ms;
  • 过渡方式:和transition取值一样;
  • 次数: 3或者 2.4 或者无限次 infinite;
  • 方向: reverse | alternate | alternate-reverse;
  • 填充模式: none | forwards | backwards | both
  • 是否暂停: paused | running
  • 注意:以上所有属性都有对应的单独属性;