玄而又玄的颜色混合情势

有意思的CSS标题(17):无缘无故的颜色混合形式 mix-blend-mode

2017/05/10 · CSS ·
CSS

正文作者: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
欢迎参加伯乐在线 专栏撰稿人。

CSS3 新增了三个很风趣的属性 — mix-blend-mode ,其中 mix 和 blend
的中文意译均为混合,那么那天本性的效用直译过来就是交织混合形式,当然,大家我们司空眼惯号称掺杂形式

错落情势最普遍于 photoshop 中,是 PS
中这个强有力的机能之一。当然,瞎用乱用混合方式何人都会,利用混合格局将三个图层混合拿到1个新的功用,只是要用到合适,大概说在
CSS 中采取混合方式创设出部分成效则必要对混合情势很深的明亮及不断的尝试。

自作者个人对混合形式的知晓也十分浅显,本文只是指导大家走进 CSS
混合情势的社会风气,初浅的打听混合方式及尝试选取它打造一些功用。

议论一些妙趣横生的CSS标题(十七)– 不可捉摸的颜色混合格局 mix-blend-mode,cssmix-blend-mode

开本体系,谈谈一些幽默的 CSS 标题,标题类型天马行空,想到什么说哪些,不仅为了加大一下消除难题的思绪,更涉及部分便于忽略的
CSS 细节。

解题不考虑兼容性,标题天马行空,想到怎么着说哪些,即使解题中有您倍感到生僻的
CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,首要的事情说二回。

议论一些有趣的CSS标题(一)– 左侧竖条的落到实处方式

商量一些妙不可言的CSS标题(二)– 从条纹边框的落到实处谈盒子模型

座谈一些诙谐的CSS标题(三)– 层叠顺序与堆栈上下文知多少

议论一些妙趣横生的CSS标题(四)– 从倒影说起,谈谈 CSS 继承 inherit

研究一些幽默的CSS题目(五)– 单行居中,两行居左,超过两行省略

座谈一些好玩的CSS标题(六)– 全包容的多列均匀布局难题

议论一些有意思的CSS题目(七)– 消失的边界线难点

议论一些好玩的CSS标题(八)– 纯CSS的领航栏Tab切换方案

商讨一些有意思的CSS标题(九)– 巧妙的贯彻 CSS 斜线

商量一些好玩的CSS标题(十)– 结构性伪类接纳器

探讨一些幽默的CSS标题(十一)– reset.css知多少

切磋一些妙趣横生的CSS标题(十二)– 深入探究 CSS 性情检测 @supports 与
Modernizr

探究一些幽默的CSS标题(十三)– 巧妙地创设背景观渐变动画!

座谈一些好玩的CSS标题(十四)– 纯 CSS 情势贯彻 CSS 动画的中断与广播!

商量一些有意思的CSS题目(十五)– 谈谈 CSS 关键字 initial、inherit 和
unset

探究一些有趣的CSS标题(十六)– 奇妙的 background-clip: text

不无难题汇总在小编的 Github 。

正文从此处开端:

CSS3 新增了1个很风趣的性质 — mix-blend-mode ,其中 mix 和 blend
的国语意译均为混合,那么那天性子的机能直译过来就是混合混合形式,当然,大家大家一般号称混合情势

掺杂形式最广泛于 photoshop 中,是 PS
中相当强劲的效果之一。当然,瞎用乱用混合格局哪个人都会,利用混合方式将八个图层混合得到3个新的效益,只是要用到适当,只怕说在
CSS 中行使混合形式打造出一部分成效则须求对混合方式很深的知情及不断的品尝。

小编个人对混合格局的通晓也充足初叶,本文只是率领我们走进 CSS
混合方式的社会风气,初浅的刺探混合格局及品尝使用它制作一些成效。

 

开本体系,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到怎么着说什么样,不仅为了加大一下消除难点的思绪,更关乎一些便于忽视的
CSS 细节。

开本种类,谈谈一些幽默的 CSS 标题,标题类型天马行空,想到什么说如何,不仅为了加大一下解决难点的思绪,更波及部分便于忽略的
CSS 细节。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的内容应当与成分的亲情父成分的故事情节和要素的背景怎么着混合。我们将
PS 中图层的概念替换为 HTML 中的成分。

探访可取的值有何样:

JavaScript

{ 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; //
亮度 mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode:
unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  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;     // 亮度
  
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个具有 CSS
属性都得以取的值外,还有别的的 拾肆个有血有肉的取值,对应不一样的混合效果。

设若不是明媒正娶的 PSer
天天和混合情势打交道,想要记住这么多效益,照旧挺困苦的。但是有前人帮大家总计了一番,看看哪些比较好的接头可能说纪念这个职能,摘自Photoshop中高等进阶连串之一——图层混合格局原理:

金沙澳门官网 1

理所当然,上图是 PS 中的混合方式,数量比 CSS
中的多出多少个,不过分类还是通用的。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的始末应当与成分的直系父成分的内容和因素的背景怎么样混合。我们将
PS 中图层的概念替换为 HTML 中的元素。

探望可取的值有如何:

{
  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;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个拥有 CSS
属性都足以取的值外,还有别的的 16 个实际的取值,对应区其余混杂效果。

设若不是标准的 PSer
每一日和交集格局打交道,想要记住这么多职能,照旧挺勤奋的。不过有前人帮大家计算了一番,看看怎么样比较好的明亮恐怕说回忆那些成效,摘自Photoshop中高等进阶体系之一——图层混合形式原理:

金沙澳门官网 2

当然,上图是 PS 中的混合情势,数量比 CSS
中的多出多少个,不过分类如故通用的。

 

解题不考虑包容性,标题天马行空,想到什么说什么样,如若解题中有您感觉到到生僻的
CSS 属性,赶紧去补习一下呢。

解题不考虑包容性,题目天马行空,想到如何说如何,假若解题中有你感到到生僻的
CSS 属性,赶紧去补习一下啊。

mix-blend-mode 实例

眼见为实,要会选拔 mix-blend-mode ,关键依旧要跨过使用这一步。那里自个儿写了三个简练的
德姆o,蕴含了具有的搅和模式,可以大致试一下各样形式的职能:

See the Pen mix-blend-mode
混合方式示例 by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

自然,仅仅是这么是感受不到混合方式的吸引力的,上边就罗列几个利用了混合情势创设的
CSS 动画。

mix-blend-mode 实例

眼见为实,要会利用 mix-blend-mode ,关键依旧要迈出使用这一步。这里作者写了三个粗略的
德姆o,包涵了全体的鱼目混珠格局,可以大体试一下各样形式的成效:

CodePen Demo(-webkit- Only)

自然,仅仅是这么是感受不到混合情势的魅力的,上面就罗列多少个利用了交集格局打造的
CSS 动画。

不断更新,不断更新,不断更新,紧要的业务说一遍。

不断更新,不断更新,不断更新,首要的事体说3次。

 

座谈一些诙谐的CSS标题(一)–
左侧竖条的贯彻方式

议论一些妙不可言的CSS标题(一)–
左边竖条的兑现形式

使用 mix-blend-mode: screen 滤色方式构建 loading 效果

为了照顾少数访问 codepen 慢同学,特意制作了该意义的 Gif,看看效果:

金沙澳门官网 3

See the Pen mix-blend-mode:
screen玄而又玄的颜色混合情势。 by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

那边运用了 mix-blend-mode: screen 滤色方式,那是一种提亮图像形混合形式。滤色的英文是
screen,约等于八个颜色同时投影到3个显示器上的合成颜色。具体做法是把多少个颜色都反相,相乘,然后再反相。简单记念为”让白更白,而黑不变”。(不肯定十一分纯粹,如有错误还请指正)

大家将多个 div
依据不同延时(animation-delay)小幅旋转起来,来达到一种很明朗很魔性的功效,适合做
loading 图。

使用 mix-blend-mode: screen 滤色格局创设 loading 效果

为了照顾少数访问 codepen 慢同学,特意制作了该意义的 Gif,看看效果:

金沙澳门官网 4

CodePen Demo(-webkit- Only)

此间运用了 mix-blend-mode: screen 滤色形式,那是一种提亮图像形混合情势。滤色的英文是
screen,约等于几个颜色同时投影到3个显示屏上的合成颜色。具体做法是把五个颜色都反相,相乘,然后再反相。容易回想为”让白更白,而黑不变”。(不必然万分纯正,如有错误还请指正)

我们将四个 div
依据不一致延时(animation-delay)大幅度旋转起来,来达到一种很醒目很魔性的作用,适合做
loading 图。

座谈一些诙谐的CSS标题(二)–
从条纹边框的兑现谈盒子模型

议论一些妙不可言的CSS标题(二)–
从条纹边框的兑现谈盒子模型

 

探讨一些诙谐的CSS标题(三)–
层叠顺序与堆栈上下文知多少

商讨一些妙趣横生的CSS题目(三)–
层叠顺序与堆栈上下文知多少

使用 mix-blend-mode: difference 差值形式

再举个例证, mix-blend-mode: difference 差值格局。查看各种通道中的颜色音信,相比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与反动混合将使底色反相;与黑褐混合则不发出变化。

深远浅出一点就是上边图层的亮区将人世图层的颜色举行反相,暗区则将颜色平常彰显出来,效果与原图像是全然相反的颜料。

看望利用了那几个混合形式,运用在一部分多图层效果里,可以生出拾叁分花团锦簇的混合效果:

金沙澳门官网 5

See the Pen pureCssAnimation(webkit
Only) by Chokcoco
(@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

上图近似复杂,其实通晓原理之后非凡的简要,6 个旋转的 div
,通过 mix-blend-mode: difference 混合在一块。

使用 mix-blend-mode: difference 差值情势

再举个例证, mix-blend-mode: difference 差值情势。查看种种通道中的颜色消息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与反动混合将使底色反相;与深青莲混合则不发出变化。

浅显一点就是上面图层的亮区将人世图层的颜料实行反相,暗区则将颜色平常突显出来,效果与原图像是完全相反的颜料。

探访利用了那个混合格局,运用在一部分多图层效果里,可以暴发拾壹分灿烂的交集效果:

金沙澳门官网 6

CodePen Demo(-webkit- Only)

上图近似复杂,其实驾驭原理之后非常粗大略,6 个旋转的 div
,通过 mix-blend-mode: difference 混合在一块。

座谈一些妙趣横生的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

议论一些幽默的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

 

议论一些好玩的CSS题目(五)–
单行居中,两行居左,当先两行省略

座谈一些有意思的CSS标题(五)–
单行居中,两行居左,领先两行省略

行使多交集格局创设文字故障效果

终极,想到自身事先制作的一个文字故障效果,也足以很好的万众一心混合格局,制作出下列效果:

金沙澳门官网 7

See the Pen
mixblendmode制作文字故障效果
by Chokcoco (@Chokcoco) on
CodePen.

CodePen Demo(-webkit- Only)

不用猜疑您的肉眼,上图的功效是纯 CSS
已毕的作用,运用了两种颜色混合情势已毕颜色叠加,变亮等作用。

本文涉及的科班理论知识很少,没有用相当的大的字数去讲述每二个掺杂方式的功能及效用。小编对混合情势的了解也相比粗浅,本文意在通过一些
德姆o
让读者学会开端去采取那个混合情势功能,俗话说修行在个人,如果真的感兴趣的可以自行深切钻研。

采取多掺杂形式打造文字故障效果

终极,想到本人后面制作的三个文字故障效果,也得以很好的同甘共苦混合方式,制作出下列效果:

金沙澳门官网 8

CodePen Demo(-webkit- Only)

不用困惑你的眼眸,上图的效用是纯 CSS
完毕的成效,运用了各个颜色混合情势完结颜色叠加,变亮等效果。

正文涉及的正式理论知识很少,没有用相当大的篇幅去描述每1个掺杂格局的法力及效益。作者对混合形式的知情也正如粗浅,本文目的在于通过有些德姆o
让读者学会开端去行使这么些混合形式效率,俗话说修行在个人,若是真的感兴趣的可以自行深远研究。

 

座谈一些有趣的CSS标题(六)–
全包容的多列均匀布局难题

探讨一些妙趣横生的CSS题目(六)–
全包容的多列均匀布局难点

兼容性

最后,看一眼包容性吧,那种奇特的属性包容性经常都不怎么好,作者事先几篇小说也波及过了,面向今后编程,所以本文的
CodePen 德姆o 都须求在 -webkit- 内核浏览器下看看:

金沙澳门官网 9

到此本文甘休,如果还有啥样疑点依然提出,可以多多交流,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

  • 有趣的CSS标题(1):
    左侧竖条的兑现格局
  • 有意思的CSS题目(2):
    从条纹边框的兑现谈盒子模型
  • 有意思的CSS标题(3):
    层叠顺序与堆栈上下文知多少
  • 有意思的CSS标题(4): 从倒影说起,谈谈 CSS 继承
    inherit
  • 有意思的CSS标题(5):
    单行居中,两行居左,超过两行省略
  • 有意思的CSS标题(6):
    全包容的多列均匀布局难题
  • 幽默的CSS标题(7):消失的边界线难点
  • 诙谐的CSS标题(8):纯CSS的领航栏Tab切换方案
  • 有趣的CSS标题(9):巧妙已毕 CSS
    斜线
  • 有意思的CSS标题(10):结构性伪类采取器
  • 有趣的CSS题目(11):reset.css
    知多少?
  • 幽默的CSS标题(12):你该知情的字体
    font-family
  • 诙谐的CSS标题(13):巧妙地打造背景象渐变动画!
  • 诙谐的CSS标题(14): 纯 CSS 形式达成 CSS
    动画的中止与播音!
  • 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和
    unset
  • 有趣的CSS题目(16): 奇妙的 background-clip:
    text

打赏支持自个儿写出更加多好小说,多谢!

打赏小编

兼容性

末尾,看一眼包容性吧,那种古怪的性质包容性温时都有点好,小编事先几篇小说也事关过了,面向今后编程,所以本文的
CodePen 德姆o 都务求在 -webkit- 内核浏览器下看到:

金沙澳门官网 10

到此本文停止,尽管还有怎么着疑点如故提议,可以多多互换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

无缘无故的颜色混合情势 mix-blend-mode,cssmix-blend-mode
开本连串,谈谈一些有意思的 CSS 标题,标题类型天马…

议论一些有趣的CSS标题(七)–
消失的边界线难题

议论一些有意思的CSS标题(七)–
消失的边界线难题

打赏扶助自身写出越来越多好小说,多谢!

任选一种支付格局

金沙澳门官网 11
金沙澳门官网 12

3 赞 3 收藏
评论

议论一些妙趣横生的CSS标题(八)–
纯CSS的领航栏Tab切换方案

探讨一些诙谐的CSS标题(八)–
纯CSS的领航栏Tab切换方案

有关小编:chokcoco

金沙澳门官网 13

经不住小运似水,逃可是此间少年。

个人主页 ·
我的篇章 ·
63 ·
   

金沙澳门官网 14

琢磨一些好玩的CSS标题(九)–
巧妙的落成 CSS
斜线

议论一些妙不可言的CSS标题(九)–
巧妙的贯彻 CSS
斜线

座谈一些有意思的CSS标题(十)–
结构性伪类采纳器

座谈一些诙谐的CSS标题(十)–
结构性伪类选用器

座谈一些妙不可言的CSS标题(十一)–
reset.css知多少

座谈一些有趣的CSS标题(十一)–
reset.css知多少

座谈一些有意思的CSS标题(十二)– 深切商量CSS 性格检测 @supports 与
Modernizr

座谈一些有趣的CSS标题(十二)– 深远切磋CSS 性格检测 @supports 与
Modernizr

议论一些有意思的CSS标题(十三)– 巧妙地创建背景象渐变动画!

研究一些诙谐的CSS标题(十三)– 巧妙地创设背景观渐变动画!

座谈一些妙趣横生的CSS标题(十四)–
纯 CSS 格局贯彻 CSS
动画的暂停与播音!

探究一些幽默的CSS题目(十四)–
纯 CSS 方式贯彻 CSS
动画的暂停与广播!

座谈一些有趣的CSS标题(十五)– 谈谈
CSS 关键字 initial、inherit 和
unset

议论一些有意思的CSS标题(十五)– 谈谈
CSS 关键字 initial、inherit 和
unset

商讨一些有趣的CSS标题(十六)– 奇妙的
background-clip:
text

切磋一些有意思的CSS标题(十六)– 奇妙的
background-clip:
text

具备题目汇总在作者的 Github 。

怀有毛病汇总在自家的 Github 。

正文从此处起初:

正文从那边初阶:

CSS3 新增了叁个很有意思的性质
— mix-blend-mode ,其中 mix 和 blend
的粤语意译均为混合,那么这些脾气的效率直译过来就是混合混合方式,当然,大家大家日常称为掺杂方式

CSS3 新增了1个很有趣的品质– mix-blend-mode ,其中 mix 和 blend
的华语意译均为混合,那么那特天性的法力直译过来就是交织混合情势,当然,大家大家一般称为错落格局

掺杂格局最常见于
photoshop 中,是 PS
中尤其强劲的效果之一。当然,瞎用乱用混合形式何人都会,利用混合方式将四个图层混合拿到2个新的效应,只是要用到适当,或许说在
CSS
中行使混合情势塑造出一部分成效则要求对混合格局很深的知情及不断的品尝。

掺杂方式最普遍于
photoshop 中,是 PS
中分外精锐的效劳之一。当然,瞎用乱用混合形式何人都会,利用混合格局将八个图层混合得到一个新的效能,只是要用到合适,或许说在
CSS
中采取混合形式创设出部分功能则须要对混合形式很深的敞亮及不断的尝试。

自家个人对混合格局的知道也11分浅显,本文只是指点大家走进
CSS 混合方式的社会风气,初浅的领会混合形式及品尝选拔它创设一些功用。

本身个人对混合方式的驾驭也13分浅显,本文只是率领我们走进
CSS 混合格局的世界,初浅的问询混合情势及尝试采取它创设一些职能。

金沙澳门官网 , 

 

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的内容应当与成分的亲情父成分的情节和因素的背景怎么样混合。大家将
PS 中图层的定义替换为 HTML 中的成分。

看看可取的值有啥样:

{
  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;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承
和 unset 还原这 3 个有着 CSS 属性都得以取的值外,还有别的的 拾伍个有血有肉的取值,对应不一致的交集效果。

假使不是正式的
PSer
每日和交集方式打交道,想要记住这么多职能,如故挺费力的。可是有前人帮我们总括了一番,看看怎么样比较好的驾驭或许说纪念那么些意义,摘自Photoshop中高等进阶体系之一——图层混合情势原理:

金沙澳门官网 15

当然,上图是 PS
中的混合格局,数量比 CSS 中的多出多少个,不过分类依旧通用的。

 

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了成分的故事情节应当与成分的血肉父成分的始末和因素的背景如何混合。大家将
PS 中图层的定义替换为 HTML 中的元素。

探望可取的值有哪些:

{
  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;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承
和 unset 还原那 3 个拥有 CSS 属性都足以取的值外,还有别的的 拾陆个实际的取值,对应差其他搅和效果。

倘诺不是业内的
PSer
每一日和交集方式打交道,想要记住这么多职能,还是挺忙碌的。可是有前人帮大家总括了一番,看看如何比较好的驾驭只怕说回想这几个作用,摘自Photoshop中高等进阶体系之一——图层混合形式原理:

金沙澳门官网 16

自然,上图是 PS
中的混合格局,数量比 CSS 中的多出多少个,不过分类如故通用的。

 

mix-blend-mode 实例

眼见为实,要会采纳 mix-blend-mode ,关键依旧要跨过使用这一步。那里本身写了多少个简短的
德姆o,包括了全数的鱼龙混杂形式,可以大体试一下种种形式的效益:

CodePen
Demo(-webkit- Only)

当然,仅仅是那样是感受不到混合形式的魔力的,上面就罗列多少个利用了交集方式打造的
CSS 动画。

mix-blend-mode 实例

眼见为实,要会动用 mix-blend-mode ,关键依旧要跨过使用这一步。那里自个儿写了三个简练的
德姆o,包涵了颇具的混杂情势,可以大约试一下各种形式的效益:

CodePen
Demo(-webkit- Only)

理所当然,仅仅是这样是感受不到混合格局的魔力的,下边就罗列多少个使用了混合格局创设的
CSS 动画。

 

 

使用 mix-blend-mode: screen 滤色情势构建 loading 效果

为了照看少数访问
codepen 慢同学,特意制作了该意义的 Gif,看看效果:

金沙澳门官网 17

CodePen
Demo(-webkit- Only)

那里运用了 mix-blend-mode: screen 滤色形式,那是一种提亮图像形混合形式。滤色的英文是
screen,也等于五个颜色同时投影到三个显示屏上的合成颜色。具体做法是把三个颜色都反相,相乘,然后再反相。简单记念为”让白更白,而黑不变”。(不肯定十一分可倚重,如有错误还请指正)

我们将多少个div
根据不相同延时(animation-delay)大幅度旋转起来,来达到一种很明显很魔性的机能,适合做
loading 图。

使用 mix-blend-mode: screen 滤色方式创设 loading 效果

为了照顾少数访问
codepen 慢同学,特意制作了该功效的 Gif,看看效果:

金沙澳门官网 18

CodePen
Demo(-webkit- Only)

此处运用了 mix-blend-mode: screen 滤色方式,那是一种提亮图像形混合情势。滤色的英文是
screen,约等于四个颜色同时投影到七个显示器上的合成颜色。具体做法是把多个颜色都反相,相乘,然后再反相。不难回想为”让白更白,而黑不变”。(不自然十三分纯粹,如有错误还请指正)

咱俩将多个div
依据差别延时(animation-delay)小幅旋转起来,来落成一种很醒目很魔性的效益,适合做
loading 图。

 

 

使用 mix-blend-mode: difference 差值格局

再举个例子, mix-blend-mode: difference 差值形式。查看各种通道中的颜色音信,相比底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与孔雀绿混合将使底色反相;与森林绿混合则不暴发变化。

浅显一点就是上面图层的亮区将人世图层的颜料进行反相,暗区则将颜色平常呈现出来,效果与原图像是一点一滴相反的颜料。

看看利用了这些混合格局,运用在一部分多图层效果里,可以生出拾壹分光彩夺目的混杂效果:

金沙澳门官网 19

CodePen
Demo(-webkit- Only)

上图接近复杂,其实了解原理之后分外的简便,6个旋转的 div ,通过 mix-blend-mode: difference 混合在同步。

使用 mix-blend-mode: difference 差值形式

再举个例子, mix-blend-mode: difference 差值情势。查看各种通道中的颜色音信,相比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与洋红混合将使底色反相;与粉色混合则不暴发变化。

初阶一点就是上边图层的亮区将人世图层的水彩进行反相,暗区则将颜色不奇怪显示出来,效果与原图像是完全相反的颜色。

探访利用了这么些混合形式,运用在一些多图层效果里,可以产生分外绚烂的交集效果:

金沙澳门官网 20

CodePen
Demo(-webkit- Only)

上图接近复杂,其实领会原理之后非常粗大略,六个旋转的 div ,通过 mix-blend-mode: difference 混合在同步。

 

 

行使多掺杂方式打造文字故障效果

末尾,想到我在此之前制作的1个文字故障效果,也足以很好的融合混合形式,制作出下列效果:

金沙澳门官网 21

CodePen
Demo(-webkit- Only)

不用怀疑您的眼眸,上图的功力是纯
CSS 落成的出力,运用了多样颜色混合情势完毕颜色叠加,变亮等职能。

本文涉及的业内理论知识很少,没有用十分的大的字数去讲述每叁个混合方式的成效及作用。小编对混合形式的明亮也比较粗浅,本文目的在于通过一些
Demo
让读者学会初阶去采用这一个混合方式功用,俗话说修行在个人,倘使真的感兴趣的可以活动深切钻研。

 

利用多交集情势打造文字故障效果

末了,想到本身事先制作的三个文字故障效果,也得以很好的同舟共济混合形式,制作出下列效果:

金沙澳门官网 22

CodePen
Demo(-webkit- Only)

不用狐疑你的眼眸,上图的功用是纯
CSS 落成的功能,运用了二种颜色混合情势完毕颜色叠加,变亮等职能。

本文涉及的专业理论知识很少,没有用非常大的篇幅去讲述每二个混合方式的法力及意义。作者对混合方式的知晓也相比较浅显,本文目的在于通过一些
德姆o
让读者学会开端去拔取这几个混合情势功用,俗话说修行在个人,就算真的感兴趣的能够活动深远钻研。

 

兼容性

末尾,看一眼包容性吧,那种古怪的性质包容性经常都微微好,作者后面几篇作品也波及过了,面向将来编程,所以本文的
CodePen 德姆o 都须求在 -webkit- 内核浏览器下看看:

金沙澳门官网 23

到此本文截至,假使还有何样疑难照旧指出,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

兼容性

最后,看一眼包容性吧,那种奇特的个性包容性经常都有个别好,我事先几篇作品也涉嫌过了,面向未来编程,所以本文的
CodePen 德姆o 都务求在 -webkit- 内核浏览器下观察:

金沙澳门官网 24

到此本文甘休,若是还有何难题仍旧提出,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图