幻術，一行代碼實現鏤空效果

【深圳】DJI 大疆創新 互聯網團隊 前端及大量職位招聘中 (內推 15-50k + 豐厚年終 + 股份)簡歷請發至 evan.zhou@dji.com，合適的話當天回覆，當天內推。 更多福利

這篇文章分享我最近遇到的需求和解決過程當中遇到的問題，以及學到新知識。發佈於w3ctrain

學習以前能夠先看看酷炫的動畫效果，想一想怎麼實現。

從最近在作的需求提及，一個優惠券樣式，過設計稿的時候認爲沒什麼大不了的，滿口答應了。真正開始開發的時候遇到問題，主要是鏤空效果實現方式上比較費勁。要求是背景可配，而且票身能夠配背景圖，而後鏤空是真鏤空。

設想並嘗試了不少種方案，僞類模擬，背景貼圖，Canvas 繪製，沒有一個能讓我滿意。前端就是這麼難，即便跪下來求設計師妹紙改稿，也沒能獲得同情，不只如此，還被甩一臉，你看看，人家滴滴就能作。

咱們不同！！！

沒辦法，如今的痛都是當初腦子進的 shi，沒有商量的餘地，幹！搜索 ticket 關鍵字，我在 Codepen 上找到相似的效果。

See the Pen CSS Concert ticket purchase by Helkyle (@HelKyle) on CodePen.

看到鏤空，漸變，我堅信找到最終解了。看源碼，贊！分三段拼接絕對是個好主意！

然鵝！咱們的需求是，優惠券整塊背景漸變，分紅三段那麼漸變也得相應地拆成三段寫，不能接受。

想起來 ClipPath 貌似能夠用來裁切內容。搜到之前在 CSS Tricks 上看過的文章，爲效果讚歎不已（你能夠在clippy上調教 clip-path）。從 文檔上看，用在這個場景也一樣不合適。鏤空部分並非既不是規則圖形，更不是一個總體，放棄。

CSS Mask 屬性

和 Sketch 裏面的 Mask 同樣，CSS Mask 可讓蒙版區域區域透過去，不透明區域保留顯示出來。

用法和 background 基本一致，學習零成本。好比 mask-image, mask-origin, mask-position, mask-repeat, mask-size 都和 background 一致。由於過於簡單，不在這裏囉嗦，更多用法仍是看文檔 或者 張鑫旭-CSS遮罩CSS3 mask/masks詳細介紹，

使用 mask 最終個人需求實現效果是這樣的：

See the Pen Using Mask To Create Ticket Hollow Effect. by Helkyle (@HelKyle) on CodePen.

思考半天的需求，切一張圖，寫一行核心代碼就解決了。關鍵點足夠簡單！好用！隨隨便便都能作出很酷炫的效果。

See the Pen Mask Effect - DJI by Helkyle (@HelKyle) on CodePen.

值得一提，mask 支持 svg, png 還能夠用 gif，好比 Codepen 有人作了個海綿寶寶動畫。

See the Pen #CodePenChallenge - Animated css mask-image by Tony Banik (@tonybanik) on CodePen.

核心代碼只有一行, 用了一張海綿寶寶 gif。沒有 mask 屬性，真不知道怎麼下手。

img {
  mask-image: url(https://user-gold-cdn.xitu.io/2018/10/18/1668599f2b92301d?w=500&h=295&f=gif&s=296531);
}
複製代碼

等等，那兼容性怎麼樣？

兼容性

從 CanIUse 上看，當前 mask 兼容性達到 83.15%（大部分須要加上 -webkit- 前綴），IE && Edge 徹底不支持。對於部分不支持的瀏覽器，還可使用 Feature Query 進行兼容。

@supports not (mask-size: cover) {
	// 不支持的樣式
}
複製代碼

毒雞湯時刻

前端技術更新迭代速度特別快，不少幾年前仍是實驗性的屬性，轉眼已經到了收成的時候。這就體現平時多積累新知識的重要性，好比 grid，houdini，剛接觸短時間內看不到收成，須要用到的時候想起來有這麼個東西，剛好兼容性也跟上來，在別人看來你就很優秀。雲淡風輕地說上一句：

沒啥，只是由於在人羣中多看了一眼。

相關文章

• Clipping and Masking in CSS
• Using CSS Clip Path to Create Interactive Effects
• CSS Masking
• CSS遮罩CSS3 mask/masks詳細介紹

Changelog

fix: 事實上設計師很好說話，沒有刁難我。

部分風景圖片來自skypixel