CSS3一二三

[gnosis23]

CSS 3

• [ ] animation
• [x] box-shadow
• [x] clip-path
• [ ] contain
• [x] filter
• [ ] isolation
• [ ] mask | mask-image | mask-border != none
• [ ] mix-blend-mode
• [ ] perspective
• [x] transform
• [x] transition
• [ ] webkit-overflow-scrolling
• [x] will-change

[gnosis23]

will-change

根据 MDN 上所说，will-change 会提示浏览器元素的某些属性会发生变化。浏览器会在元素变化前进行优化。这些优化能预先进行。

误区

• 不要过度使用 will-change，否则会让页面变慢
• 会影响页面样式，比如会建立重叠上下文

用法

当我们要改变一个元素的 opacity or transform 时候，修改 will-change 属性

.box {
    will-change: opacity, transform;
}

原理

引用自 https://time.geekbang.org/column/article/141842

浏览器渲染引擎生成图像分几个阶段：重排、重绘、合成。其中重排和重绘都是在渲染进程的主线程上执行，比较耗时；而合成线程是在渲染进程的合成线程上执行，执行速度快，且不占用主线程。

will-change 能提前告诉浏览器元素的哪些属性需要变化，浏览器能单独为元素准备一个独立层，变化的时候让合成线程去处理，不会涉及主线程。顺带一提，这也是 css 动画比 JavaScript 动画高效的原因。

[gnosis23]

clip-path

裁剪路径，提供了多个裁剪函数可供选择

polygon

指定四个角的位置

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

[gnosis23]

filter 滤镜效果

drop-shadow

用法和作用同 box-shadow，区别是

• filter 不仅仅是边缘，连里面的文字都有阴影
• filter 不忽略透明部分

sepia

一种降饱和度的橙黄色染色效果...

saturate

另一种饱和度滤镜...

[gnosis23]

Transform

• translate 位移
• scaleXYZ 放大、缩小: 比如 scaleX(0) -> scaleX(1) 会沿着 x 轴“伸缩”，效果还和 transform-origin 属性有关，比如默认的就是在中心方向“伸缩”。
• rotateXYZ: 沿着x轴、y轴、z轴旋转
• skew 歪曲如菱形
• perspective: 距离z-index 0的距离，越大越远

[gnosis23]

box-shadow

value

• inset: 控制光向上还是向下打
• offset-x offset-y: 阴影的偏移
• blur-radius: 模糊半径，>= 0，越大越模糊
• spread-radius: 展开半径？？，正值让阴影变大，负值让阴影缩小。

example

.one-edge-shadow {
  box-shadow: 0 8px 6px -6px black;
}

.multiple-border {
box-shadow: 
  inset 5px 5px 10px #000000, 
  inset -5px -5px 10px blue;
}

Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
• https://css-tricks.com/almanac/properties/b/box-shadow/

[gnosis23]

transition

可以让属性变化时平滑地过度显示过度。

value

• transition-property
• transition-duration
• transition-timing-function: ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
• transition-delay

[gnosis23]

animation

value

• animation-name
• animation-duration
• animation-delay
• animation-iteration-count: n 表示进行几次动画
• animation-timing-function: cubic-bezier, step

keyframes

问：from（即0%）, to（即100%） 的默认值 ？ 答：如果不指定，就使用当前元素的style。

例子

@keyframes bounce {
      60%, 80%, to { 
        transform: translateY(350px);
        animation-timing-function: ease;
      }
      70% { transform: translateY(250px);}
      90% { transform: translateY(300px);}
}