CSS知识总结

小X
532 阅读2分钟

CSS知识总结

动画的原理

定义

  • 由许多静止的画面（帧）
  • 以一定的的速度（如每秒30张）连续播放时
  • 肉眼因视觉残象产生错觉
  • 而误以为是活动的画面

概念

  • 帧：每个静止的画面都叫做帧
  • 播放速度：每秒24帧（影视）或者每秒30帧（游戏）

浏览器渲染原理

步骤

  • 根据HTML构建HTML树（树）
  • 根据CSS构建CSS树（CSSOM）
  • 将两棵树合并成一棵渲染树（render tree）
  • Layout布局（文档流、盒模型、计算大小和位置）
  • Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  • Comepose合成（根据层叠关系展示画面）

三棵树

image.png

如何更新样式

一般JS来更新样式

  • 比如div.style.background = 'red'
  • 比如div.style.display = 'none'
  • 比如div.classList.add('red')
  • 比如div.remove()删除节点

三种更新方式

image.png

  • 第一种，全走 div.remove() 触发当前消失，其他元素relayout
  • 第二种，跳过layout 改变背景颜色，直接repaint+composite
  • 第三种，跳过layout和paint 改变transform，只需composite （注意必须全屏查看效果，在iframe里看问题）

CSS动画优化

transform

四个常用功能

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew 经验：
  • 一般都需要配合transition过度
  • inline元素不支持transform，需要先改变成block

transform: translate

  • translateX(像素(px) / 百分比(%))
  • translateY(像素(px) / 百分比(%))
  • translate(<像素 / 百分比>,<像素 / 百分比>？)
  • translateZ(像素) 且父容器加perspective
  • translate3d(x,y,z) 经验：
  • 多看MDN语法
  • translate(-50%,-50%)可做绝对定位元素居中
#demo{
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
    .wrapper{
  border: 1px solid black;
  position: relative;
  height: 400px;
}
#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  margin: 150px;
  background: pink;
  transition: all 1s;
}
#demo:hover{
  transform: rotateZ(45deg) scale(1.5);
}
  </style>
<body>
  <div class="wrapper">
    <div id="demo"></div>
  </div>
</body>
</html>

image.png

transform: scale

  • scaleX(倍数)
  • scaleY(倍数)
  • scale(倍数，倍数) 经验：
  • 用的较少，容易出现模糊

transform: rotate

  • rotate( | )
  • rotateZ( | )
  • rotateZ( | )
  • rotateY( | )
  • rotate3d

transform: skew

  • sskewX( | )
  • skewY( | )
  • skew( | )

transform 可以组合使用

  • transform：scale（0.5）translate（-100%，-100%）；
  • transform：none；取消所有
  • 实例演示

transition 过渡

作用

  • 补充中间帧

语法

  • transition: 属性名 时长 过渡方式 延迟
  • transition: left 200ms linear
  • 可以用逗号分隔开两个不同的属性
  • transition: left200ms，top400ms
  • 可以用all代表所有属性
  • transition: 200ms
  • 过度方式有： **linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具体含义要靠数学知识 ###并不是所有的属性都能过度
  • display: none => block 不能过渡
  • 要改成visibility: hidden => visible
  • background 颜色可以过渡
  • opacity 透明度可以过渡

animation

缩写语法

  • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
  • 时长: 1s 或者 1000ms
  • 过渡方式: 跟transition的取值一样，如linear
  • 次数: 3 或 n 或者 infinite
  • 方向: reverse | alternate | alternate-reverse
  • 填充模式: none | forwards | backwards | both
  • 是否暂停: paused | running
  • 这些属性都有对应的单独属性

@keyframes

avatar
文章
阅读
粉丝