css filter

filter：CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

定义和使用

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

状态	值
默认值	none
继承	no
动画支持	是。详细可查阅 CSS 动画
版本	CSS3
JavaScript 语法	object.style.WebkitFilter="grayscale(100%)"

CSS 语法

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

Filter 函数

官方 demo：MDN

CSS filter 的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数（下面 blur、brightness、contrast 等），我们可以通过指定这些函数的值来实现想要的效果：

blur [blɜː(r)]

图片使用高斯模糊效果：菜鸟

img {
  -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
  filter: blur(5px);
}

Brightness [braɪtnəs]

使图片变亮：菜鸟

img {
  -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
  filter: brightness(200%);
}

Contrast [ˈkɒntrɑːst]

调整图像的对比度:菜鸟

img {
  -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
  filter: contrast(200%);
}

Saturate [ˈsætʃəreɪt]

转换图像饱和度:菜鸟

img {
    -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */\
    filter: saturate(800%);\
}

后续的其他参考：菜鸟

实际用例

电影效果

滤镜中的 brightness 用于调整图像的明暗度。默认值是 1；小于 1 时图像变暗，为 0 时显示为全黑图像；大于 1 时图像显示比原图更明亮。

我们可以通过调整背景图的明暗度和文字的透明度，来模拟电影谢幕的效果。

效果1

.pic {
  height: 100%;
  width: 100%;
  position: absolute;
  background: url("xxx.webp") no-repeat;
  background-size: cover;
  animation: fade-away 2.5s linear forwards;
  /* //forwards当动画完成后，保持最后一帧的状态 */
}
.text {
  position: absolute;
  line-height: 55px;
  color: #fff;
  font-size: 36px;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
}

@keyframes fade-away {
  /* //背景图的明暗度动画 */
  30% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(0);
  }
}
@keyframes show {
  /* //文字的透明度动画 */
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

模糊效果

.card:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 20px;
  filter: blur(0px) opacity(1);
  transition: 200ms linear;
}
/*
     这里不能将滤镜直接加在.card元素，而是将背景和滤镜都加在伪类上。
     因为，父元素加了滤镜，它的子元素都会一起由该滤镜改变。
     如果滤镜直接加在.card元素上，会导致上面的文字也变模糊。
*/

/* 
    通过 css 选择器选出非 hover 的 .card 元素，给其伪类添加模糊、透明度和明暗度的滤镜  
*/

.cards:hover > .card:not(:hover):before {
  filter: blur(5px) opacity(0.8) brightness(0.8);
}

/* 
    对于hover的元素，其伪类增强饱和度，尺寸放大 
*/

.card:hover:before {
  /* 增强饱和度 */
  filter: saturate(1.2);
  transform: scale(1.05);
}

融合效果

<div class="container">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
</div>

.container {
  margin: 50px auto;
  height: 140px;
  width: 400px;
  /* //给融合元素的父元素设置背景色 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* //给融合元素的父元素设置contrast */
  filter: contrast(30);
}
.circle {
  border-radius: 50%;
  position: absolute;
  /* //给融合元素设置blur */
  filter: blur(10px);
}
.circle-1 {
  height: 90px;
  width: 90px;
  background: #03a9f4;
  transform: translate(-50px);
  animation: 2s moving linear infinite alternate-reverse;
}
.circle-2 {
  height: 60px;
  width: 60px;
  background: #0000ff;
  transform: translate(50px);
  animation: 2s moving linear infinite alternate;
}
@keyframes moving {
  /* //两个元素的移动 */
  0% {
    transform: translate(50px);
  }
  100% {
    transform: translate(-50px);
  }
}

实现水滴代码

codePen v1， codePen v2，哔哩哔哩

CSS 中 filter 简单学习