干货分享css滤镜与混合模式

现在是 2019 年了，00 后都快 20 岁了，5G 都已经来了，很多人思维还停留在几年前，以为新 CSS 特性都用不了，实际上不是的，现代浏览器的版本更新和迭代是非常迅速的。

比方说这个滤镜，2013 年就开始支持所以可以放心使用。

CSS 混合模式则是 2014 年底支持的，到现在差不多已经有 5 年时间了：

目前已经完全可以在实际项目中应用，只要你的项目不需要兼容 IE 和 Edge，例如中后台和内部系统，移动端项目等，可以放心使用。除非是那些国民级产品比如说淘宝，或者是微信，因为用户基数足够下沉，肯定要考虑兼容性，这个时候可能要考虑渐进增强，用户支持的用新技术，不支持的用普通的。

CSS filter 滤镜简介

滤镜	释义
filter:blur(5px)	模糊
filter:brightness(1.4)	亮度
filter:contrast(200%)	对比度
filter:drop-shadow(4px 4px 8px blue)	投影
filter:grayscale(50%)	灰度
filter:hue-rotate(90deg)	色调变化
filter:invert(75%)	反相
filter:opacity(25%)	透明度
filter:saturate(230%)	饱和度
filter:sepia(60%)	褐色

各个滤镜效果如下：

1.原图

 

2.滤镜-模糊

filter: blur(5px)

3.滤镜-亮度

filter: brightness(1.4);

4.滤镜-对比度

filter: contrast(2);

5.滤镜-投影

filter: drop-shadow(4px 4px 8px blue);

6.滤镜-灰度

filter: grayscale(50%);

7.滤镜-色调变化

filter: hue-rotate(90deg);

8.滤镜-反相

filter: invert(75%);

9.滤镜-透明度

filter: opacity(25%);

opacity 滤镜和 opacity 区别在于：部分浏览器下，opacity 滤镜可以启用硬件加速，性能会更好。

10.滤镜-饱和度

filter: saturate(230%);

11.滤镜-褐色

filter: sepia(60%);

你可能用过的 CSS 滤镜

介绍一些在 web 应用中常见的滤镜应用，以下展示的所有案例都是我在实际项目中用到的。

1. filter:blur 基础应用

一个是把封面图变得模糊，然后作为背景图。

还有一个是弹框出现的时候，让弹框背后的元素模糊，从而让视觉更聚焦。

2.filter:drop-shadow 基础应用

可以让任意的图形区域，只要是非透明的都能产生投影效果，例如下图绘制的小三角也是可以带投影的：

3.filter:grayscale 基础应用

点亮徽章再也不需要两张图了，只需要准备一张彩图，至于没有激活的灰图，我们可以使用滤镜控制：

你应该没用过的滤镜技术

CSS 滤镜更高级的一些应用案例举例。

1.局部模糊，径向模糊

平常我们实现的高斯模糊，都是整体模糊，实际上我们是可以实现局部模糊和径向模糊效果的。

例如，径向模糊，如下代码：

<div class="box-blur">
    <img src="./example.jpg" class="radial-blur">
    <img src="./example.jpg">
</div>

CSS 代码

.box-blur {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.radial-blur {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    filter: blur(20px);
    mask-image: radial-gradient(transparent, transparent 10%, black 60%);
    transform: scale(1.2);
}

效果如下图：

也可以局部模糊：

<div class="box-blur">
    <img src="./example.jpg" class="local-blur">
    <img src="./example.jpg">
</div>

CSS 代码：

.box-blur {
    width: 256px; height: 192px;
    position: relative;
    overflow: hidden;
}
.radial-blur {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    filter: blur(12px);
    mask: no-repeat center;
    mask-image: linear-gradient(black, black), linear-gradient(black, black);
    mask-size: cover, 60px 60px;
    mask-composite: exclude;
    mask-composite: source-out;
    transform: scale(1.1);
}

效果如下：

2.图标的变色

例如一个图标背景图希望从深色变成白色：

按照以前的时间，我们应该会准备两张不同颜色的图片，然后根据类名，然后进行切换，实际上，我们可以借助 CSS 滤镜一步到位，例如这里图标变成白色，我们可以直接一行简单的 CSS 即可：

.ui-button-primary .icon-delete {
    filter: brightness(100);
}

也就是设置图标的亮度非常亮，自然就表现为白色了。

4.色彩动画

主要展示 hue-rotate 色调旋转滤镜的一些应用。

如下 CSS 动画代码：

@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

一个 360 度色调无缝旋转动画，这个动画可以用在任何元素上，尤其那些色彩丰富的元素，可以得到非常精彩的色彩流动效果。

配合其他 CSS 可以实现很多不错的视觉效果，例如，七彩文字闪啊闪。

代码如下：

<h2 class="flow-slogon">码云笔记记录 web 前端开发的技术博客</h2>

css 代码：

.flow-slogon {
    font-size: 100px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia);
    animation: hue 6s linear infinite;
}
@keyframes hue {
    from { filter: hue-rotate(0deg); }
    to { filter: hue-rotate(360deg); }
}

很多公司的网站 LOGO 都是彩色的，挂在左上角觉得很单调可以使用这个动画，用户进来的时候发现 LOGO 在彩色不同的变化，虽然有点俗但是能吸引用户注意。

色调变化还有其他的用户，可以实现按纽的批量复制，网站的主按纽是蓝色，想要实现很多其他的颜色按纽，以前要一个个的写颜色，现在只需要一个色调变化就可以了。单位可以用 deg（度），可以用 turn（转、圈），也可以使用 rad（弧度）。

可以非常简单快捷基于主按钮生成其他颜色的按钮。

更进一步的滤镜技术

当我们两个滤镜混合的时候有时候会产生一些很奇妙的效果，比如这个模糊跟增强对比度，弄在一起的时候相互触碰的时候就会有融合黏着的效果，如下截图：

HTML 代码：

<div class="box box-1"></div>
<div class="box box-2"></div>

CSS 代码：

body {
    background-color: #000;
    filter: blur(10px) contrast(5);
    padding: 100px;
}
.box {
    width: 100px; height: 100px;
    border-radius: 50%;
    position: absolute;
}
.box-1 {
    background-color: deepskyblue;
    animation: fly-r 5s infinite alternate;
}
.box-2 {
    width: 60px; height: 60px;
    margin-top: 20px;
    background-color: white;
    animation: fly-l 5s infinite alternate;
}
@keyframes fly-r {
    from { transform: translateX(0); }
    to   { transform: translateX(120px); }
}
@keyframes fly-l {
    from { transform: translateX(120px); }
    to   { transform: translateX(0); }
}

这个效果可以用来做什么事情呢？

可以实现一个火焰的动画（作者：Chokcoco）：

 

Codepen 地址：https://codepen.io/Chokcoco/pen/aMRPjR

可以实现水滴滴落的效果（作者：Chokcoco）：

Codepen 地址：https://codepen.io/Chokcoco/pen/gZVjJw

如果做运营活动，由于这些效果成本很低，可以在项目中试一试。

引用 SVG 滤镜技术

CSS filter 还支持直接引用 SVG 滤镜，语法如下：

/* 外链 */
.filter {
    filter: url("filter.svg#filter-id");
}
/* 内联 */
.filter {
    filter: url("#filter-id");
}

同样是刚才融合黏着的效果，SVG 滤镜实现比那个效果好很多。

1.0 成本实现 SVG 滤镜粘滞融合

页面任意位置塞入这么一段 SVG 代码：

<svg width="0" height="0" style="position:absolute;">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

需要粘滞融合元素的父元素 CSS 加一句：

filter: url("#goo");

效果就有了。

例如下图是两个最基本的小球融合的效果：

拖动右边的圆球，靠近左边这一个，可以看到融合效果。

HTML 代码：

<svg width="0" height="0">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

<div class="target">
    <i id="ball1" class="ball"></i>
    <i id="ball2" class="ball"></i>
</div>

CSS 代码：

.target {
    filter: url("#goo");
}
.ball {
    width: 150px; height: 150px;
    border-radius: 50%;
    background-color: #beceeb;
    position: absolute;
}

这个实现比 CSS 实现好很多，不会把你这个元素里面的文字弄没了，CSS 的融合会把里面的文字搞看不见，这个东西不会。于是可以实现一些很棒的效果。

2.其它 SVG 滤镜动效示意

还可以实现一些其他很酷的东西，例如点击任意元素，出现水波荡漾的效果。底层实现使用的是 SVG feDisplacementMap 滤镜

混合模式简介

混合模式相关属性如下：

background-blend-mode 用于混合元素背景图案、渐变和颜色

mix-blend-mode 用于元素与元素之间的混合

isolation：isolate 用在祖先元素上，限制 mix-blend-mode 混合模式应用范围。

混合模式属性值包括，以 mix-blend-mode 示意：

API 名称	释义
mix-blend-mode: normal	正常
mix-blend-mode: multiply	正片叠底
mix-blend-mode: screen	滤色
mix-blend-mode: overlay	叠加
mix-blend-mode: darken	变暗
mix-blend-mode: lighten	变亮
mix-blend-mode: color-dodge	颜色减淡
mix-blend-mode: color-burn	颜色加深
mix-blend-mode: hard-light	强光
mix-blend-mode: soft-light	柔光
mix-blend-mode: difference	差值
mix-blend-mode: exclusion	排除
mix-blend-mode: hue	色调
mix-blend-mode: saturation	饱和度
mix-blend-mode: color	颜色
mix-blend-mode: luminosity	亮度

background-blend-mode:multiply

CSS 一姐有一个比较著名的项目，就像 css3 绘制的背景纹理：https://leaverou.github.io/css3patterns/

现在有了混合模式，可以让我的背景纹理的造型和色彩变得更加丰富，有人专门做了 CodePen：https://codepen.io/bennettfeely/pen/wJbtk

混合模式与 web 开发

下面讲一下重点，前面都是效果相关的，接下来是跟 Web 开发相关的，第一个差值，第二个变暗变亮，第三个滤色，第四个柔光。

mix-blend-mode:difference

第一个是差值，大家只要记住白色使用差值模式的时候可以实现反相效果，让你的文字跟背景永远是反色对比的，当你的背景在形成动画的时候，背景会根据文字自动对比变色，特别适合于黑白的动效。

HTML 代码：

<div class="box">
    <h1>码云笔记记录 web 前端开发的技术博客</h1>
</div>

CSS 代码：

body {
    background: #000;
}
.box {
    position: absolute;
    overflow: hidden;
    isolation: isolate;
}
h1 {
    margin: 0;
    mix-blend-mode: difference;
    font-size: 300%;
    color: #fff;
    position: relative;
    z-index: 1;
}
.box::before {
    content: '';
    position: absolute;
    width: 100vw; height: 100vw;
    left: calc(50% - 50vw); top: calc(50% - 50vw);
    margin: auto;
    background: linear-gradient(#fff 50%, #000 50%);
    animation: spin 5s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   {  transform: rotate(360deg); }
}

mix-blend-mode:darken/lighten

第二个讲一下混合模式 darken/lighten，呈现的颜色结果取决于两个颜色的对比，darken 是哪个颜色深显示哪个颜色，lighten 是哪个颜色浅显示哪个颜色。

我们可以用来做什么事情？

可以实现 CSS 图标任意的变色，准备一个白底黑字的小图标，这个时候使用 background-blend-mode 实现任意图标的变色，因为任意的颜色跟他对比都是浅的，这样就实现任意颜色的变色效果。

不过这个方法并非是最佳实现，因为还需要我们的图片是白色背景，不能是透明色，比较啰嗦。最好的实现还是遮罩。

darken/lighten 还可以用来优化 CSS 滚动指示器，这个可以参见前段时间写的文章：“纯 CSS 技术实现 Scroll Indicator 滚动指示器效果”，这不不再赘述。

mix-blend-mode:screen

screen 混合模式非常使用霓虹辉光效果，只要准备一个黑底的特效素材即可，这个素材甚至可以是黑底的视频元素，经测试，在小程序里面也是可以使用的。

例如：

上面 demo 还包括视频混合动效，对于一些运营活动开发还是非常有用的。

mix-blend-mode:soft-light

如果大家搞玩后期摄影的，或者你拍女朋友照片进行美化处理的时候，应该知道这种混合模式，发散聚光灯照射效果，非常适合人物 PS 还有素材着色。

动漫里面很多这种男女主角区分他的形象就是通过发色来区分的，记住 soft-light 混合模式，我们就可以只使用一套素材就可以生成多种人物角色。

滤镜与混合模式

CSS 滤镜和混合模式同时应用案例，这个主要用在图像处理里面，。

例如白天素材模拟夜晚：

传统线都是使用两张图片，但是现在我们只需要一张图片，然后配合一点 CSS 代码就能实现我们想要的效果：

.night {
    width: 256px; height: 256px;
    background: rgba(0,40,140,.6) url(./house-bed.jpg);
    background-size: 100%;
    background-blend-mode: darken;
    filter: brightness(80%) grayscale(20%) contrast(1.2);
}

如果我们想要傍晚火烧云的效果，我们可以着一个红色，然后再配合设计师的肉眼进行微调。

滤镜与混合模式对图像以及视频处理有专门的 CSS 库，很多，比方说 CSSgram，感兴趣的小伙伴可以下去看看这方面资料。

直接使用一个 CSS 类名，就能实现各种各样的图像滤镜处理效果，很方便。

甚至还可以把图像处理成素描这样的特别的效果。

CSSgram 中的图像处理

项目地址：https://github.com/una/CSSgram

以上关于干货分享css滤镜与混合模式的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。