国产精品亚洲一区二区三区,精精国产xxxx视频在线野外,中文字幕亚洲视频

巧用 CSS 構(gòu)建漸變彩色二維碼

今日，群里有個(gè)很有意思的問(wèn)題，問(wèn)我如何實(shí)現(xiàn)一個(gè)彩色的，帶漸變的二維碼，像是這樣：

巧用 CSS 構(gòu)建漸變彩色二維碼

很有意思的問(wèn)題，我們?cè)诎俣裙雀瑁阉?qrcode，能搜到非常多在線制作二維碼的工具，它們其中一些也會(huì)帶有制作漸變二維碼的功能。但是它們大部分都是 Canvas 或者其它編程語(yǔ)言實(shí)現(xiàn)的。

如果我們現(xiàn)在已經(jīng)有了一張白底黑字的普通二維碼，想把它變成一個(gè)漸變色的二維碼?該如何做呢?

巧用 CSS 構(gòu)建漸變彩色二維碼

本文就將介紹，使用 CSS，快速將一個(gè)普通黑色二維碼，變成任意我們想要的彩色漸變二維碼。

強(qiáng)大的混合模式

擁有一張?jiān)瓐D，想改變其顏色。在 CSS 中，我們很快可以想到濾鏡 filter、或者是混合模式 mix-blend-mode。

這里，我們就需要用到混合模式 mix-blend-mode。混合模式最常見(jiàn)于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一。目前 CSS 已經(jīng)原生支持了大部分的混合模式。

原理其實(shí)非常簡(jiǎn)單，我們實(shí)現(xiàn)一張漸變圖形，這張圖形通過(guò)混合模式中的 mix-blend-mode: lighten 與白底黑字的二維碼重疊在一起后，二維碼中的白色區(qū)域?qū)⒈３植蛔儯S碼中的黑色區(qū)域?qū)⒄宫F(xiàn)為漸變圖案中的顏色。

聽(tīng)起來(lái)有點(diǎn)繞，通過(guò)一個(gè)示意圖，一看就懂，我們只需要兩層，原二維碼為一層，然后將漸變圖案疊加在其之上，并且設(shè)置 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;
    }
}

這里，我們用父元素的偽元素節(jié)省一個(gè)標(biāo)簽，用作漸變圖層，實(shí)際的重疊效果，我制作了一個(gè)動(dòng)畫(huà)：

巧用 CSS 構(gòu)建漸變彩色二維碼

這樣，我們可以通過(guò)混合模式，將一張黑色的二維碼圖片，變成了漸變色。

二維碼中間鏤空

當(dāng)然，這還沒(méi)完，有的時(shí)候，我們的二維碼中間還會(huì)有一些圖案，有一張圓形的或者方形的圖片。

如果使用上述方法，會(huì)有一些瑕疵：

巧用 CSS 構(gòu)建漸變彩色二維碼

那么，我們還需要根據(jù)二維碼的樣式，將漸變圖案中間鏤空!

有意思的是，二維碼中間的圖案，還會(huì)有圓形和矩形兩種，對(duì)于這兩種二維碼，處理的方式還不太一樣。

巧用 CSS 構(gòu)建漸變彩色二維碼

漸變圖案中心鏤空一個(gè)圓形

對(duì)于中心圖案是圓形的二維碼，我們只需要實(shí)現(xiàn)這樣一個(gè)漸變?cè)侬B加即可：

巧用 CSS 構(gòu)建漸變彩色二維碼

這個(gè)還是比較簡(jiǎn)單的，由于原本是一個(gè)線性漸變，中間需要鏤空一個(gè)圓形，最好的方式是使用 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%);
}

漸變圖案中心鏤空一個(gè)矩形

但是，對(duì)于中間是一個(gè)矩形的話，就不太好辦了，我們需要基于漸變圖案實(shí)現(xiàn)這樣一個(gè)圖形：

巧用 CSS 構(gòu)建漸變彩色二維碼

方法其實(shí)也有很多，譬如我們把中間透明部分想象成一個(gè) div 的 content 部分，而周?chē)鷿u變顏色區(qū)域是邊框區(qū)域。

當(dāng)然，這里我使用了 clip-path，使用它，也是可以非常方便的實(shí)現(xiàn)鏤空的矩形：

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