CSS知识总结

awast
146 阅读2分钟

浏览器渲染原理

浏览器渲染步骤：

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

浏览器渲染样式:

  1. JS/CSS>样式(Style)>布局(Layout>绘制(Paint)>合成(Composite) 例：div.remove()会触发当前消失，其他元素Layout

  2. JS/CSS>样式(Style)>绘制(Paint)>合成(Composite) 例：改变背景颜色，直接repaint+composite

  3. JS/CSS>样式(Style)>合成(Composite) 例：transform只需要composite

具体哪种属性触发什么流程可以在csstriggers.com 查询。

transform的语法

tansform一般需要配合transition过渡

inline元素不支持transform，需要先变为block

transition: all 1s;

transform的四个常用功能：

  1. translate 位移

常用写法：

translateX(<length-percentage>)
translateY(<length-percentage>)
translate(<length-percentage>,<length-percentage>)
translateX(<length>)
translate3d(x,y,z)

使绝对定位元素居中

translate(-50%,-50%)

2. scale 缩放

常用写法：

scaleX(<number>)
scaleY(<number>)
scale(<number>,<number>)

scale会出现模糊很少使用

  1. rotate 旋转

常用写法：

rotate([<angle>|<zero>])
rotateZ([<angle>|<zero>])
rotateY([<angle>|<zero>])
rotateX([<angle>|<zero>])

一般用于360°旋转制作loading动画

  1. skew 倾斜

常用写法：

rotateX([<angle>|<zero>])
rotateY([<angle>|<zero>])
rotate([<angle>|<zero>,<angle>|<zero>])

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

  1. transition(过渡) 作用：可以自动补充中间帧

语法：

transition: 属性 时长 过渡方式 延迟；

属性:width heigth all

时长: Xs Xms

过渡方式包含: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps

并非所有属性都能通过transition来进行过渡，如displya: none=>block没法过渡，需要使用visibility: visible=>hidden来实现标签从可见渐变至消失。 利用transition动画制作的跳动的心： github.com/awaster/jum…

  1. animation(有节点的动画)

animation缩写语法:

animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

过渡方式：与transition的取值相同

次数：整数、小数、infinite

方向：reverse|alternate|alternate-reverse

填充模式：forwards|backwards|both|none

是否暂停：paused|running

声明关键帧：

@keyframe xxx(id){
0%{
    transform: none;
 }
50%{
    transformX(200px);
 }
100%{
    transformX(200px)
    transformY(100px);
 }
}

用forwards可以使动画停留在最后一帧 利用animation动画制作的跳动的心： github.com/awaster/jum…

css动画优化

chrome浏览器选择开发者工具->控制台->Rendering->Paint flashing 可以追踪浏览器的渲染

css动画优化靠背诵

例：JS优化利用requestAnimationFrame代替setTimeout或者setInterval

css优化利用will-change或translate

css动画优化文章： 坚持仅合成器的属性和管理层计数  |  Web  |  Google Developers

avatar
文章
阅读
粉丝