让人惊艳的css filter滤镜

滤镜函数

• blur()：模糊图像
• brightness() ：让图像更明亮或更暗淡
• contrast()：增加或减少图像的对比度
• drop-shadow()：在图像后方应用投影
• grayscale()：将图像转为灰度图
• hue-rotate()：改变图像的整体色调
• invert()：反转图像颜色
• opacity()：改变图像透明度
• saturate()：超饱和或去饱和输入的图像
• sepia()：将图像转为棕褐色

效果

1. 与box-shadow不同的阴影效果

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
//如
filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));

下图是分别使用 box-shadow 和 filter: drop-shadow 为透明元素添加阴影的对比：

<div class="box-shadow">
  <img src="../assets/logo.png" alt="">
</div>
<div class="drop-shadow">
  <img src="../assets/logo.png" alt="">
</div>

.box-shadow{
  box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
}
.drop-shadow{
  filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));
}

2. 网页置灰
这个效果很简单，只要在body里加入这一行代码就行了。

.gray {
  filter: grayscale(100%);
}

如果需要兼容ie的话，可以加上浏览器前缀或者svg滤镜

.gray {
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter: grayscale(100%);
}

置灰功能一般用在重大灾难哀悼日之类的，上线一天就需要撤下来，会很麻烦，可以用js控制，到点下架

(function setGray() {
  var endTime = Date.parse("Apr 06 2077 00:00:01");
  var timestamp = Date.parse(new Date());
  if (timestamp <= endTime) {
    document.querySelector('html').classList.add('gray');
  }
})();

3. 毛玻璃效果

毛玻璃效果有两种实现方式，即filter: blur 和 backdrop-filter: blur

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>

//公共的类，设置基础属性
.glass {
  height: 300px;
  width: 300px;
  border: 1px groove #EFEFEF;
  border-radius: 12px;
  background: rgba(242, 242, 242, 0.5);
  box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

filter: blur 方法，给元素添加了一个 ::before 伪类设置 blur 方法并将其置于底层实现毛玻璃效果。

.glass-by-filter {
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}
.glass-by-filter::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: inherit;
  filter: blur(10px);
}

backdrop-filter: blur 直接在元素上添加 blur 方法实现毛玻璃效果。

.glass-by-backdrop-filter {
  backdrop-filter: blur(10px);
}

实现效果如下图所示（左：filter、右：backdrop-filter）：