語法
最基本锌唾，使用 mask 的方式是借助圖片韵洋，類似這樣：
{
? ? /* Image values */
? ? mask: url(mask.png);? ? ? ? ? ? ? ? ? ? ? /* 使用位圖來做遮罩 */
? ? mask: url(masks.svg#star);? ? ? ? ? ? ? ? /* 使用 SVG 圖形中的形狀來做遮罩 */
}
當(dāng)然嗜湃，使用圖片的方式后文會(huì)再講。借助圖片的方式其實(shí)比較繁瑣，因?yàn)槲覀兪紫冗€得準(zhǔn)備相應(yīng)的圖片素材患雇，除了圖片，mask 還可以接受一個(gè)類似 background 的參數(shù)踏揣，也就是漸變庆亡。
類似如下使用方法：
{
? ? mask: linear-gradient(#000, transparent)? /* 使用漸變來做遮罩 */
}
那該具體怎么使用呢？一個(gè)非常簡單的例子捞稿，上述我們創(chuàng)造了一個(gè)從黑色到透明漸變色又谋，我們將它運(yùn)用到實(shí)際中，代碼類似這樣：
下面這樣一張圖片娱局，疊加上一個(gè)從透明到黑色的漸變彰亥，
1{
? ? background: url(image.png) ;
? ? mask: linear-gradient(90deg, transparent, #fff);
}
應(yīng)用了 mask 之后，就會(huì)變成這樣：
這個(gè) DEMO衰齐，可以先簡單了解到 mask 的基本用法任斋。
這里得到了使用 mask 最重要結(jié)論：圖片與 mask 生成的漸變的 transparent 的重疊部分，將會(huì)變得透明耻涛。
值得注意的是废酷，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這里的 #fff 純色部分其實(shí)換成任意顏色都可以抹缕，不影響效果澈蟆。
CodePen Demo -- 使用 MASK 的基本使用
使用 MASK 進(jìn)行圖片裁切
利用上述簡單的運(yùn)用，我們可以使用 mask 實(shí)現(xiàn)簡單的圖片裁剪卓研。
使用 mask 實(shí)現(xiàn)圖片切角遮罩
使用線性漸變趴俘，我們實(shí)現(xiàn)一個(gè)簡單的切角圖形：
.notching{
? ? width: 200px;
? ? height: 120px;
? ? background:
? ? linear-gradient(135deg, transparent 15px, deeppink 0)
? ? top left,
? ? linear-gradient(-135deg, transparent 15px, deeppink 0)
? ? top right,
? ? linear-gradient(-45deg, transparent 15px, deeppink 0)
? ? bottom right,
? ? linear-gradient(45deg, transparent 15px, deeppink 0)
? ? bottom left;
? ? background-size: 50% 50%;
? ? background-repeat: no-repeat;
}
像是這樣：
我們將上述漸變運(yùn)用到 mask 之上睹簇，而 background 替換成一張圖片，就可以得到運(yùn)用了切角效果的圖片：
background: url(image.png);
mask:
? ? linear-gradient(135deg, transparent 15px, #fff 0)
? ? top left,
? ? linear-gradient(-135deg, transparent 15px, #fff 0)
? ? top right,
? ? linear-gradient(-45deg, transparent 15px, #fff 0)
? ? bottom right,
? ? linear-gradient(45deg, transparent 15px, #fff 0)
? ? bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;
得到的效果如下:
CodePen Demo -- 使用 MASK 實(shí)現(xiàn)圖片切角遮罩
當(dāng)然寥闪，實(shí)現(xiàn)上述效果還有其他很多種方式太惠，譬如 clip-path，這里的 mask 也是一種方式疲憋。
多張圖片下使用 mask
上述是單張圖片使用 mask 的效果凿渊。下面我們看看多張圖片下，使用 mask 能碰撞出什么樣的火花柜某。
假設(shè)我們有兩張圖片嗽元，使用 mask，可以很好將他們疊加在一起進(jìn)行展示喂击。最常見的一個(gè)用法：
div {
? ? position: relative;
? ? background: url(image1.jpg);
? ? &::before {
? ? ? ? position: absolute;
? ? ? ? content: "";
? ? ? ? top: 0;left: 0; right: 0;bottom: 0;
? ? ? ? background: url(image2.jpg);
? ? ? ? mask: linear-gradient(45deg, #000 50%, transparent 50%);
? ? }
}
兩張圖片剂癌，一張完全重疊在另外一張之上，然后使用 mask: linear-gradient(45deg, #000 50%, transparent 50%) 分割兩張圖片：
CodePen Demo -- MASK 的基本使用翰绊，多張圖片下的基本用法
當(dāng)然佩谷，注意上面我們使用的 mask 的漸變，是完全的實(shí)色變化监嗜，沒有過度效果谐檀。
我們稍微修改一下 mask 內(nèi)的漸變：
{
- mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ mask: linear-gradient(45deg, #000 40%, transparent 60%)
}
即可得到圖片1向圖片2過渡切換的效果：
CodePen Demo -- MASK 的基本使用，多張圖片下的基本用法2
使用 MASK 進(jìn)行轉(zhuǎn)場動(dòng)畫
有了上面的鋪墊裁奇。運(yùn)用上面的介紹的一些方法桐猬，我們就可以使用 mask 來進(jìn)行一些圖片切換間的轉(zhuǎn)場動(dòng)畫。
使用線性漸變 mask:linear-gradient() 進(jìn)行切換
還是上面的 Demo刽肠，我們通過動(dòng)態(tài)的去改變 mask 的值來實(shí)現(xiàn)圖片的顯示/轉(zhuǎn)場效果溃肪。
代碼可能是這樣：
div {
? ? background: url(image1.jpg);
? ? animation: maskMove 2s linear;
}
@keyframes {
? 0% {
? ? mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
? }
? 1% {
? ? mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
? }
? ...
? 100% {
? ? mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
? }
}
當(dāng)然，像上面那樣一個(gè)一個(gè)寫音五，會(huì)比較費(fèi)力惫撰，通常我們會(huì)借助 SASS/LESS 等預(yù)處理器進(jìn)行操作。像是這樣：
div {
? ? position: relative;
? ? background: url(image2.jpg) no-repeat;
? ? &::before {
? ? ? ? position: absolute;
? ? ? ? content: "";
? ? ? ? top: 0;left: 0; right: 0;bottom: 0;
? ? ? ? background: url(image1.jpg);
? ? ? ? animation: maskRotate 1.2s ease-in-out;
? ? }
}
@keyframes maskRotate {
? ? @for $i from 0 through 100 {
? ? ? ? #{$i}% {
? ? ? ? ? ? mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
? ? ? ? }
? ? }
}
可以得到下面這樣的效果（單張圖片的顯隱及兩張圖片下的切換）：
CodePen Demo -- MASK linear-gradient 轉(zhuǎn)場
使用角向漸變 mask: conic-gradient() 進(jìn)行切換
當(dāng)然躺涝，除了 mask: linear-gradient()厨钻，使用徑向漸變或者角向漸變也都是可以的。使用角向漸變的原理也是一樣的：
@keyframes maskRotate {
? ? @for $i from 0 through 100 {
? ? ? ? #{$i}% {
? ? ? ? ? ? mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
? ? ? ? }
? ? }
}
可以實(shí)現(xiàn)圖片的角向漸顯/切換：
CodePen Demo -- MASK conic-gradient 轉(zhuǎn)場
這個(gè)技巧坚嗜，在張鑫旭的這篇文章里夯膀，有更多豐富的例子，可以移步閱讀：
你用的那些CSS轉(zhuǎn)場動(dòng)畫可以換一換了
運(yùn)用這個(gè)技巧苍蔬，我們就可以實(shí)現(xiàn)很多有意思的圖片效果棍郎。像是這樣：
mask4
mask 碰撞濾鏡與混合模式
繼續(xù)下一環(huán)節(jié)。CSS 中很多有意思的屬性银室，和濾鏡和混合模式一結(jié)合，會(huì)碰撞出更多火花。
mask & 濾鏡 filter: contrast()
首先蜈敢，我們利用多重徑向漸變辜荠，實(shí)現(xiàn)這樣一張圖。
{
? background: radial-gradient(#000, transparent);
? background-size: 20px 20px;
}
看著沒什么特別抓狭，我們利用 filter: contrast() 對(duì)比度濾鏡伯病，改造一下。代碼大概是這樣：
html,body {
? ? width: 100%;
? ? height: 100%;
? ? filter: contrast(5);
}
div {
? ? position: relative;
? ? width: 100%;
? ? height: 100%;
? ? background: #fff;
? ? &::before {
? ? ? ? content: "";
? ? ? ? position: absolute;
? ? ? ? top: 0; right: 0; bottom: 0; left: 0;
? ? ? ? background: radial-gradient(#000, transparent);
? ? ? ? background-size: 20px 20px;
? ? }
}
即可得到這樣的圖形否过，利用對(duì)比度濾鏡午笛，將圖形變得非常的銳化。
這個(gè)時(shí)候苗桂，我們?cè)侬B加上不同的 mask 遮罩药磺。即可得到各種有意思的圖形效果。
body {
? ? filter: contrast(5);
}
div {
? ? position: relative;
? ? background: #fff;
? ? &::before {
? ? ? ? background: radial-gradient(#000, transparent);
? ? ? ? background-size: 20px 20px;
? ? ? + mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
? ? }
}
CodePen Demo -- 使用 mask 搭配濾鏡 contrast
我們疊加了一個(gè)線性漸變的 mask linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))煤伟，注意癌佩，兩個(gè)漸變顏色都是帶透明度的。
或者換一個(gè)徑向漸變：
{
? ? mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
}
CodePen Demo -- 使用 mask 搭配濾鏡 contrast
好的便锨，下一步围辙，與上文類似，我們添加上動(dòng)畫放案。
div {
? ? ...
? ? &::before {
? ? ? ? background: radial-gradient(#000, transparent);
? ? ? ? background-size: 20px 20px;
? ? ? ? mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
? ? ? ? animation: maskMove 15s infinite linear;
? ? }
}
@keyframes maskMove {
? ? @for $i from 0 through 100 {
? ? ? ? #{$i}% {
? ? ? ? ? ? mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 +? '%'});
? ? ? ? }
? ? }
}
看看姚建，可以得到了非常酷炫的動(dòng)畫效果：
CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫
還記得使用 filter: hue-rotate() 色相濾鏡嗎吱殉。再加上它掸冤，我們可以讓顏色也變化起來。
CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫2
mask & 濾鏡 filter: contrast() & 混合模式
接下來我們?cè)侬B加上混合模式考婴。
注意到上面贩虾，其實(shí)我們的容器背景色是白色 #fff沥阱。
我們可以通過多嵌套一層層級(jí)缎罢，再增加一個(gè)容器背景色，再疊加上混合模式考杉，產(chǎn)生不一樣的效果策精。
先不添加使用 mask，重新構(gòu)造一下結(jié)構(gòu)崇棠，最終的偽代碼帶個(gè)是這樣：
.wrap {
? ? position: relative;
? ? height: 100%;
? ? background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
.inner {
? ? height: 100%;
? ? background: #000;
? ? filter: contrast(700%);
? ? mix-blend-mode: multiply;
? ? &::before {
? ? ? ? content: "";
? ? ? ? position: absolute;
? ? ? ? top: 0; right: 0; bottom: 0; left: 0;
? ? ? ? background: radial-gradient(#fff, transparent);
? ? ? ? background-size: 12px 12px;
? ? }
}
深圳網(wǎng)站建設(shè)www.sz886.com
