干货分享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滤镜与混合模式
老师你好 我还是没找到如何制作成素描的方法,还是想请教一下,非常感谢!
你是要描边,还是说那种图片变成素描方式展示?
素描效果是如何实现的,CSSgram没有这种滤镜呀
有的,你可以看看下面链接里资料
写的不错,css滤镜与混合模式在一些项目中使用还是不错的方法
感谢认可,还有很多好的文章,欢迎留言讨论