web前端开发技术博客
当前位置: HTML/CSS > 干货分享css滤镜与混合模式

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

2019-06-14 分类:HTML/CSS 作者:码云 阅读(2127)

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

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

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

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

CSS混合模式

目前已经完全可以在实际项目中应用,只要你的项目不需要兼容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基础应用

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

 filter:blur基础应用

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

弹框与页面元素模糊

2.filter:drop-shadow基础应用

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

filter:drop-shadow基础应用

3.filter:grayscale基础应用

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

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);
}

效果如下图:

径向模糊

也可以局部模糊:

&lt;div class=&quot;box-blur&quot;&gt;
    &lt;img src=&quot;./example.jpg&quot; class=&quot;local-blur&quot;&gt;
    &lt;img src=&quot;./example.jpg&quot;&gt;
&lt;/div&gt;

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可以实现很多不错的视觉效果,例如,七彩文字闪啊闪。

360度色调无缝旋转动画

代码如下:

<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代码:

&lt;div class=&quot;box box-1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box box-2&quot;&gt;&lt;/div&gt;

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代码:

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

需要粘滞融合元素的父元素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的融合会把里面的文字搞看不见,这个东西不会。于是可以实现一些很棒的效果。

HTML元素粘滞融合效果

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/

css3绘制的背景纹理

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

背景纹理的造型和色彩

混合模式与web开发

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

mix-blend-mode:difference

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

混合模式与web开发

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

例如:

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

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
0

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

共有 2 条评论 - 干货分享css滤镜与混合模式

  1. 吓一跳 Linux Chrome 62.0.3202.84

    写的不错,css滤镜与混合模式在一些项目中使用还是不错的方法

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @吓一跳感谢认可,还有很多好的文章,欢迎留言讨论

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论

服务热线:
 13888888888

 QQ在线交流