浅析网站建设中CSS滤镜方法与细节

本文主要介绍 CSS 滤镜的不常用使用方法，期望能给读者带来一些干货！OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列年代的滤镜，语法如下，还未接触过这个属性的可以先简单到 MDNfilter 认识下：```{filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop|shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue|rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);``````filter: contrast(175%) brightness(3%);filter: inherit;filter: initial;filter: unset;}```## 基本使用方法先简单看看几种滤镜的成效：你可以通过 hover 取消滤镜，察看该滤镜的成效。简单来讲，CSS 滤镜就是提供类似 PS 的图形特效，像模糊，锐化或元素变色等功能。一般被用于调整图片，背景和边界的渲染。本文就会围绕这类滤镜展开，看看具体能如何用或者玩出什么花活。## 常用使用方法既然是标题是你所不了解的方法与细节，那样比较常见的一些使用方法就不再赘述，一般大家见得比较多的 CSS 滤镜使用方法有：| 用 `filter: blur()`生成毛玻璃成效| 用 `filter: drop|shadow()`生成整体阴影成效| 用 `filter: opacity()`生成透明度假如对上面的方法不是非常知道，可以稍稍百度Google一下，下文将由浅及深，介绍一些不大容易见到的滤镜的具体使用方法及一些小事：## contrast/brightnesshover 增亮图片一般页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。但一些图片展示，则极少有 hover 的交互，运用` filter: contrast()`或者`filter: brightness()`可以在 hover 图片的时候，调整图片的对比图或者亮度，达到聚焦用户视线的目的。`brightness表示亮度，contrast 表示对比度。`当然，这个办法同样适用于按钮，简单的 CSS 代码如下：```.btn:hover,.img:hover {transition: filter .3s;filter: brightness(1.1) contrast(110%);}```## blur生成图像阴影一般而言，大家生成阴影的方法大多是 box|shadow 、filter: drop|shadow() 、text|shadow 。但，用它们生成阴影是阴影只能是单色的。有读者同掌握问了，你这么说，难道还可以生成渐变色的阴影不成？!额，当然不可以。这个真不可以，但通过巧妙的借助 filter: blur模糊滤镜，大家可以假装生成渐变色或者说是颜色丰富的阴影成效。假设大家有下述如此一张头像图片：下面就借助滤镜，给它添加一层与原图颜色相仿的阴影成效，核心 CSS 代码如下：```.avator {position: relative;background: url($img) no|repeat center center;background|size: 100% 100%;``````::after {content: ;position: absolute;TOP: 10%;width: 100%;height: 100%;background: inherit;background|size: 100% 100%;filter: blur(10px) brightness(80%) opacity(.8);z|index: |1;}}```看看成效：其简单的原理就是，借助伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后借助滤镜模糊 filter: blur()配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影成效。嗯，非常重要的就是这一句 filter: blur(10px) brightness(80%) opacity(.8);。CodePen Demofilter create （web前端学习交流群：328058344 禁止闲聊，非喜勿进！）## blur混合 contrast产生融合成效下面介绍的这个，是本文的重点，模糊滤镜叠加对比度滤镜产生的融合成效。叫你了解什么是 CSS 黑科技！单独将两个滤镜拿出来，它们有哪些用途分别是：
1. filter: blur()： 给图像设置高斯模糊成效。
2. filter: contrast()： 调整图像的对比度。但，当他们合体的时候，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给干掉，借助高斯模糊达成融合成效。先来看一个简单的例子：仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的成效。上述成效的达成基于两点：
1. 图形是在被设置了 filter: contrast()的画布背景上进行动画的2. 进行动画的图形被设置了 filter: blur()（ 进行动画的图形的父元素需如果被设置了 filter: contrast()的画布）意思是，上面两圆运动的背后，其实是叠加了一张设置了 filter: contrast()的大白色背景，而两个圆形则被设置了 filter: blur()，两个条件缺一不可。当然，背景色可能不是白色，大家稍稍修改上面的Demo，简单的示意图如下：燃烧的火焰好，上面介绍完原理，下面看看用这个成效制作的一些强大 CSS 成效，其中最为惊艳的就是用融合成效制作生成火焰，这个成效我最早是见于 Yusuke Nakaya 这位作者：不需要怀疑你的双眼，上述 GIF 成效就是用纯 CSS 达成的。核心还是 filter: contrast()与 filter: blur()配合用，不过达成的过程也很有趣，大家需要用 CSS 画出一个火焰形状。火焰形状 CSS 核心代码如下：```.fire {width: 0;height: 0;border|radius: 45%;box|sizing: border|box;border: 100px solid #000;border|bottom: 100pxsolid transparent;background|color: #b5932f;transform: scaleX(.4);filter: blur(20px) contrast(30);}```大概是长如此：分解一下过程：放在纯黑的背景下，就得到了上述图片的成效。 这里会有个非常大的疑问，增加了 filter: blur(20px) contrast(30);之后，为何纯色黑色和黄色的中间，生成了一条红色的边框？ 这里我咨询了几个设计师、前端同事，得到的回话大概是两个不同滤镜的色值处置算法在边界处叠加用途得到了另外一种颜色。（未必准确，求赐教），在 PS 里尝试还原这个成效，但 PS 没 contrast() 滤镜，得到的成效偏差很大的。OK，继续正文，下面，大家仅需在火焰 .fire这个 div 内部，用很多的黑色圆形，由下至上，无规律穿过火焰即可。因为滤镜的融合成效，火焰成效随之产生，这里为了便捷理解，我把背景色切换成白色，火焰动画原理一看即懂：## 文字融合动画另外，大家可以在动画的过程中，动态改变元素滤镜的 filter: blur()的值。借助这个办法，大家还可以设计一些文字融合的成效：具体达成你可以看这里： CodePen Demoword animation | word filter（https://codepen.io/Chokcoco/pen/jLjNRj）## 值得注意的细节点动画虽然美好，但具体用的过程中，仍然有一些应该注意的地方：
1. CSS 滤镜可以给同个元素同时概念多个，比如 filter: contrast(150%) brightness(1.5)，但滤镜的先后顺序不同产生的成效也是不同的；也就是说，用 filter: contrast(150%) brightness(1.5)和 filter: brightness(1.5) contrast(150%)处置同一张图片，得到的成效是不同的，缘由在于滤镜的色值处置算法对图片处置的先后顺序。
2. 滤镜动画需要很多的计算，持续的重绘页面，是很消耗性能的动画，用时应该注意用场景。记得开启硬件加速及合理用分层技术；3. blur()混合 contrast()滤镜成效，设置不一样的颜色会产生不一样的成效，这个颜色叠加的具体算法本文作者暂时更不是非常了解，用时最好的办法是多尝试不同颜色，察看取最好的成效；4. CSS3 filter 兼容性不算太好，但在手机端已经可以比较正常的用法，更为精准的兼容性列表，查看 Can i Use。