关于前端:巧用-CSS-构建渐变彩色二维码

今日，群里有个很有意思的问题，问我如何实现一个黑白的，带突变的二维码，像是这样：

很有意思的问题，咱们在百度谷歌，搜寻 qrcode，能搜到十分多在线制作二维码的工具，它们其中一些也会带有制作突变二维码的性能。然而它们大部分都是 Canvas 或者其它编程语言实现的。

如果咱们当初曾经有了一张白底黑字的一般二维码，想把它变成一个渐变色的二维码？该如何做呢？

本文就将介绍，应用 CSS，疾速将一个一般彩色二维码，变成任意咱们想要的黑白突变二维码。

领有一张原图，想扭转其色彩。在 CSS 中，咱们很快能够想到 滤镜 filter、或者是 混合模式 mix-blend-mode。

这里，咱们就须要用到 混合模式 mix-blend-mode。混合模式最常见于 photoshop 中，是 PS 中非常弱小的性能之一。目前 CSS 曾经原生反对了大部分的混合模式。

原理其实非常简单，咱们实现一张突变图形，这张图形通过混合模式中的 mix-blend-mode: lighten 与白底黑字的二维码重叠在一起后，二维码中的红色区域将放弃不变，而二维码中的彩色区域将展示为突变图案中的色彩。

听起来有点绕，通过一个示意图，一看就懂，咱们只须要两层，原二维码为一层，而后将突变图案叠加在其之上，并且设置 mix-blend-mode: lighten 即可：

<div class="g-container">
    <img src="qrcode.png">
</div>

.g-container {
    position: relative;
    width: 200px;
    height: 200px;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(45deg, #673ab7, #ff5722);
        mix-blend-mode: lighten;
    }
}

这里，咱们用父元素的伪元素节俭一个标签，用作突变图层，理论的重叠成果，我制作了一个动画：

这样，咱们能够通过混合模式，将一张彩色的二维码图片，变成了渐变色。

当然，这还没完，有的时候，咱们的二维码两头还会有一些图案，有一张圆形的或者方形的图片。

如果应用上述办法，会有一些瑕疵：

那么，咱们还须要依据二维码的款式，将突变图案两头镂空！

有意思的是，二维码两头的图案，还会有圆形和矩形两种，对于这两种二维码，解决的形式还不太一样。

对于核心图案是圆形的二维码，咱们只须要实现这样一个突变再叠加即可：

这个还是比较简单的，因为本来是一个线性突变，两头须要镂空一个圆形，最好的形式是应用 mask：

div {background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    mask: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 16%, rgb(0, 0, 0) 16%);
}

然而，对于两头是一个矩形的话，就不太好办了，咱们须要基于突变图案实现这样一个图形：

办法其实也有很多，譬如咱们把两头通明局部设想成一个 div 的 content 局部，而四周突变色彩区域是边框区域。

当然，这里我应用了 clip-path，应用它，也是能够十分不便的实现镂空的矩形：

div {background: linear-gradient(45deg, rgb(51, 102, 153), rgb(255, 0, 204));
    clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 34%, 66% 34%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%);
}

基于下面的常识，咱们就能够简略的构建一个突变黑白二维码工具了。

这里我简略实现了一个：

咱们通过上传一个一般二维码，通过自定义突变色彩，抉择是否须要镂空，镂空的类型及大小，疾速制作一个突变黑白二维码。

简略演示一下：

一个外围利用 CSS 的小工具就实现啦。

残缺的代码，你能够戳这里：CodePen – Make A Gradient QrCode

总结一下，本文介绍了利用 CSS 混合模式失去突变二维码的小技巧，并且利用了 mask 或者 clip-path 镂空突变图形，一些相干知识点如果你还有所疑难，举荐你再看看我的下列文章：

不堪设想的混合模式 mix-blend-mode
不堪设想的混合模式 background-blend-mode
两行 CSS 代码实现图片任意色彩赋色技术
微妙的 CSS MASK
巧用 CSS 实现炫彩三角边框动画

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:巧用-CSS-构建渐变彩色二维码

弱小的混合模式

二维码两头镂空

突变图案核心镂空一个圆形

突变图案核心镂空一个矩形

制作一个二维码染色工具

最初