本文主要介绍CSS过滤器的不常见用法，希望给读者带来一些干货！

好的，直接转到下面的文本。本文描述的过滤器是指CSS3问世后的过滤器，而不是工业工程系列时代的过滤器。语法如下。如果您没有接触过这个属性，您可以像MDN-Filter一样简单地理解它:

``

{

滤波器:模糊(5px)；

filter:亮度(0.4)；

filter:对比度(200%)；

filter : drop-shadow(16px 16px 20px蓝色)；

filter:灰度(50%)；

filter:色调旋转(90度)；

filter:反转(75%)；

filter:不透明度(25%)；

filter:饱和(30%)；

filter : sepia(60%)；

``

``

/*应用多个滤镜*/

滤镜:对比度(175%)亮度(3%)；

/*全局值*/

filter:继承；

filter: initial

filter: unset

}

```

## 基本用法

先简单看看几种滤镜的效果：


你可以通过 hover 取消滤镜，观察该滤镜的效果。

简单来说，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。通常被用于调整图片，背景和边界的渲染。本文就会围绕这些滤镜展开，看看具体能怎么使用或者玩出什么花活。


## 常用用法

既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的 CSS 滤镜用法有：

- 使用 `filter: blur()`生成毛玻璃效果

- 使用 `filter: drop-shadow()`生成整体阴影效果

- 使用 `filter: opacity()`生成透明度

如果对上面的技巧不是很了解，可以稍稍百度谷歌一下，下文将由浅及深，介绍一些不大常见的滤镜的具体用法及一些小细节：

## contrast/brightness — hover 增亮图片

通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。但是一些图片展示，则很少有 hover 的交互，运用` filter: contrast()`或者`filter: brightness()`可以在 hover 图片的时候，调整图片的对比图或者亮度，达到聚焦用户视野的目的。

`brightness表示亮度，contrast 表示对比度。`

当然，这个方法同样适用于按钮，简单的 CSS 代码如下：

```

.btn:hover,

.img:hover {

transition: filter .3s

filter:亮度(1.1)对比度(110%)；

}

```



## blur — 生成图像阴影

通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成阴影是阴影只能是单色的。

有读者同学会问了，你这么说，难道还可以生成渐变色的阴影不成？


额，当然不行。


这个真不行，但是通过巧妙的利用 filter: blur

模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。

假设我们有下述这样一张头像图片：


下面就利用滤镜，给它添加一层与原图颜色相仿的阴影效果，核心 CSS 代码如下：

。avator {

相对位置:

background: url($img)不重复中心中心；

背景尺寸: 100% 100%；

``

``

:after {

content :“”；

position:绝对值；

top : 10%；

宽度:±100%；

height : 100%；

background: inherit

背景尺寸: 100% 100%；

filter:模糊(10px)亮度(80%)不透明度(. 8)；

z-index :-1；

}

}

``

看看效果:

！[](http://上传-图片。建设/上传-图片/8373224-7af75a4486f98a54.png？imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)

其简单原理是使用伪元素生成与原始图像大小相同的新图像，并将其叠加在原始图像下，然后使用滤镜模糊滤镜:模糊()

与其他亮度/对比度、透明度和其他滤镜合作，创建一个虚幻的阴影，并将其伪装成原始图像的阴影效果。

嗯，最重要的是这句话:滤镜:模糊(10px)亮度(80%)不透明度(. 8)；

.

代码pendemo-filtercreate)

##模糊混合对比度产生融合效果

这是本文的重点。模糊滤镜叠加对比度滤镜产生的融合效果。让你知道什么是CSS黑色技术！

分别取出两个过滤器。他们的职能是:

1。filter: blur():在图像上设置高斯模糊效果。

2。filter: contrast():调整图像的对比度。

然而，当它们“结合在一起”时，会有一种奇妙的融合现象。通过对比度滤波消除高斯模糊的模糊边缘，通过高斯模糊实现融合效果。

让我们看一个简单的例子:

！[微信图片_ 201710131002608.gif] (http://上传-图片。建shu.io/upload _图片/8373224-f58712a351cb8253.gif？imageMogr 2/自动定向/剥离)

仔细观察两个圆圈相交的过程。当边缘相互接触时，将产生边界融合效应。

上述效果的实现基于两点:

1。图形在画布背景上以滤镜:对比度设置为动画()

2。要被动画化的图形用过滤器: blur()设置(要被动画化的图形的父元素需要用过滤器:对比度()设置)

画布)

意味着上面两个圆圈的运动背后实际上是一个叠加的对比度()和滤波器:

有一个大的白色背景，而这两个圆是用filter: blur()设置的

，两个条件是必不可少的。

当然，背景颜色不一定是白色。我们稍微修改了上面的演示。简单示意图如下:

！[](http://上传-图片。建设/上传-图片/8373224-ef2e140b3ac33409。巴布亚新几内亚？imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)

燃烧的火焰

好吧，在介绍了上面的原理之后，让我们来看看用这种效果产生的一些强大的CSS效果。其中，最惊人的是利用融合效应产生火焰。这种效果最早是由作者中野裕介看到的:

！[微信图片_ 20171013102804.gif] (http://上传-图片。建shu.io/Upload _图片/8373224-28D 45081db917631.gif？imageMogr 2/自动定向/剥离)

不要怀疑你的眼睛，上面的GIF效果是用纯CSS实现的。

内核或滤波器:对比度()

和滤波器:模糊()

一起使用，但实施过程也很有趣。我们需要用CSS画一个火焰形状。

火焰形状CSS核心代码如下:

``

。火

width : 0；

height : 0；

border-radius : 45%；

box-sizing : border-box；

border: 100px固体# 000；

border-bottom : 100 pxsolid transparent；

background-color : # b 5932 f；

transform : Scalex(. 4)；

filter:模糊(20px)对比度(30)；

}

``

看起来像这样:

！[(http://上传-图片。建书。io/上传-图片/8373224-5f 0 b5 db 61eb 476 EC。png？imageMogr 2/自动定向/条带%7CimageView2/2/w/1240)

分解流程:


在纯黑色背景上，你会得到上图的效果。

这里会有一个大问题，添加滤镜:模糊(20px)对比度(30)；

在
之后，为什么黑色和黄色之间会出现红色边框？

我在这里咨询了几位设计师和前端同事，我得到的答案可能是，两个不同滤镜的颜色值处理算法在边界重叠以获得另一种颜色。 (不一定准确，请评论)，尝试在PS中恢复这种效果，但PS没有对比度()过滤器，结果偏差相当大。

好，继续课文。接下来，我们只需要把火放在火里。

在这个分区内，从下到上使用大量黑色圆圈，不规则地穿过火焰。由于过滤器的融合效果，产生火焰效果。为了便于理解，我将背景颜色切换为白色。火焰动画的原理一目了然:

！[](http://上传-图片。建设/上传-图片/8373224-86 a5 F5 da 6a 95080 . gif？imageMogr 2/自动定向/剥离)

##文本融合动画

此外，我们可以在动画制作过程中动态更改元素滤镜的滤镜:模糊()

的价值。

使用这种方法，我们还可以设计一些文本融合效果:

！[](http://上传-图片。建设/上传-图片/8373224-b0725f40883e356e.gif？imageMogr 2/自动定向/剥离)

！[](http://上传-图片。建设. io/上传-图片/8373224-3a 91b 42e 02821添加. gif？imageMogr 2/自动定向/剥离)

具体实施情况见下文:

Code Pendemo-Word动画|文字过滤器(https://codepen.io/Chokcoco/pen/jLjNRj)

##值得注意的细节

虽然动画很美，但在具体使用过程中仍有一些需要注意的地方:

1。CSS滤镜可以同时为同一元素定义多个滤镜，例如，滤镜:对比度(150%)亮度(1.5)

，但不同顺序的过滤器效果不同。

也就是说，使用:°对比度(150%)亮度(1.5)。

和滤波器:亮度(1.5)对比度(150%)

处理同一张图片会产生不同的结果，因为滤镜的颜色值处理算法会按顺序处理图片。

2。过滤动画需要大量的计算和连续重绘页面。这是一个非常消耗性能的动画。使用它时，你应该注意场景。记住打开硬件加速，合理使用分层技术；

3。模糊()混合对比度()滤镜效果，设置不同的颜色会产生不同的效果，这种颜色叠加的具体算法暂时不是很清楚，更好的使用方法是尝试不同的颜色并观察以获得最佳效果；

4。CSS3过滤器的兼容性不是很好，但可以在移动端正常使用。要获得更准确的兼容性列表，请选中“我可以使用吗”。

福州友诚互联网，一家致力于福州网站建设的网站制作公司，为客户提供小程序制作，促进福州网络全网推广，准确开发客户。欢迎来到http://www.g303.com