css时光机,如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效...

在之前的文章中我们已经详细讲解过CSS3滤镜(filter，也可称之为过滤器)的工作方式，

本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。

我们首先实现一个勾勒轮廓的效果，这可以通过两张相同背景图细微错位然后求差值来获得：.colored-pencil-effect:before {

background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

}

上面的样式代码将得到如下效果：

由于是difference混合，那么颜色越接近的地方越黑，不存在人物的地方由于几个像素区域之间颜色几乎一样，所以经过这个混合后基本上都是黑色，而有人物的地方重点勾勒出了边界处。

接下来，我们给这个图加上反色滤镜、2倍亮度和灰度滤镜(也就是去掉彩色)效果：.colored-pencil-effect:before {

background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

-webkit-filter: brightness(2) invert(1) grayscale(1);

filter: brightness(2) invert(1) grayscale(1)

}

现在图片看起来像下面这样：

已经有点接近最终效果了，我们现在只要给这个灰度轮廓图涂上颜色即可，这刚好可以通过color混合模式来达到：.colored-pencil-effect:after {

background: inherit;

mix-blend-mode: color;

background-image: url(/uploads/161101/happy.jpg);

background-size: cover;

background-position: 50%;

}

color混合模式取上层(:after)的颜色和饱和度，取下层(原图img元素和:before的复合结果)的亮度，这样我们就得到了最终的效果图如下：

我们把这个称之为彩色蜡笔或者时光机特效。

我们注意到使用:before,:after伪元素来辅助完成图像混合是非常方便的。

CSS3执行混合计算时，有一个和z-index相关的堆栈上下文(Stacking Context)的概念，可参考阅读：

https://drafts.csswg.org/css21/visuren.html#x43

css时光机,如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效...相关推荐

CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
java 类的合成_Java设计模式-合成模式
合成模式有时也叫组合模式,对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性.掌握组合模式的重点是要理解清楚 "部分/ ...
java设计模式---合成模式3
实例下面以一个逻辑树为例子,以上面的原理图为蓝本,看看如何实现并如何使用这个树,这个结构很简单,但是如何去使用树,遍历树.为我所用还是有一定难度的. 这里主要用到树的递归遍历,如何递归.如何控制 ...
java设计模式---合成模式2
合成模式属于对象的结构模式,有时又叫做"部分--整体"模式.合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 合成模式 ...
java设计模式---合成模式
合成模式把部分和整体关系用树结构表示,是属于对象的结构模式.合成模式要对组合的对象进行管理,所以在一定位置给予对象的相关管理方法,如:add(),remove()等.合成模式中对象的管理有两种方案. ...
【Android 应用开发】Paint 图形组合 Xfermod 之合成模式表示方法 ( Xfermod 使用步骤 | 透明度颜色值公式表示方法 | 老版本表示方法 | 合成区域分块 )
文章目录 Xfermod 使用步骤合成方程 ( Compositing equations ) 老版本的表示方法合成模式相关区域 Xfermod 使用步骤 Xfermod 使用步骤 : ① 创 ...
合成模式(Composite Pattern)
http://www.cnblogs.com/singlepine/archive/2005/10/30/265001.html 一. 合成(Composite)模式合成模式有时又叫做部分-整体模式 ...
《JAVA与模式》之合成模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做"部分--整体"模式.合成模式将对象组织到树 ...

css时光机,如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效...

css时光机,如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效...相关推荐

最新文章

热门文章