calc() will-change filter属性

calc()函数，用于动态计算长度值。

任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则

• 注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

will-change属性

will-change属性可以提前通知浏览器我们要对元素做什么动画，这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变，渲染的也更快，这样页面可以快速更新，表现的更加流畅。

使用will-change提示浏览器关于即将发生的变形十分简单，添加个CSS属性就行

will-change: transform;

也可以告诉浏览器要改变元素的滚动条位置，或者多个要变化的属性，写下属性的名字就行，也可以写多个，逗号隔开
will-change: transform, opacity;

对于一般的优化，当变化完成的时候浏览器会撤销优化，恢复普通模式，但是如果使用了will-change会导致该优化迟迟不能释放，这就要求我们用完了就释放

这时候我们需要借助JavaScript

当然对于用户会反复触发的操作放在style中不移除也可以

filter

滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；举个栗子：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

• 1　　grayscale灰度

  2　　sepia褐色（有种复古的旧照片感觉）

  3　　saturate饱和度

  4　　hue-rotate色相旋转

  5　　invert反色

  6　　opacity透明度

  7　　brightness亮度

  8　　contrast对比度

  9　　blur模糊

  0　　drop-shadow阴影