mask-image的應用

遮罩層,若是學過Flash的同窗應該都聽過,跟PS的剪切蒙版差很少。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的,而遮罩層是不顯示的。相似於現實世界中一張A4卡紙剪了個洞,咱們能夠經過洞看卡紙後面的物體,這裏卡紙至關於遮罩層,只不過洞是遮罩層不透明的部分,其餘部分是遮罩層透明的部分,與咱們想象中的正好相反。css

CSS中也有遮罩這個屬性 —— mask-image,可是這麼多年了,支持的瀏覽器還要加前綴,如-webkit-mask-image。利用mask-image能作出一些不錯的效果,好比 https://codepen.io/inegoita/p...html

之前作過活動券的需求,右下角是水印,不一樣的券顏色不同。
圖片描述
若是直接用圖片的話可能就須要不一樣圖片,而用mask-image,只須要一張圖片,變換顏色用CSS控制就能夠了。http://demo.vczhan.com/css/ma...git

前幾天,一個朋友接到一個需求,用一個心形容器裏面的水波來體現親密度,水波是動畫效果而且限制在容器裏。
圖片描述github

想到用mask-image這個屬性正合適,因而要來了心型圖片,拿到設計師導出的SVG文件,用SVGO壓縮下獲得一個SVG。另外水波是顯示在內層容器裏的,原來是想直接縮當心形SVG,發現仍是有些差異的,還好能夠從這個SVG裏直接提取出內層的心形SVGweb

接下來是作水波,用SVG寫比較簡單,先定義一條波紋路徑,用二次貝塞爾曲線畫出重複的兩段橫向波紋,方便後面作動畫,而後引用這個路徑作兩條波紋出來。瀏覽器

<svg viewBox="0 0 120 125">
  <defs>
    <path id="wave" d="M 0 0 C 30 0, 30 15, 60 15, 90 15, 90 0, 120 0, 150 0, 150 15, 180 15, 210 15, 210 0, 240 0 v 125 h -240 z"/>
  </defs>
  <use class="wave" xlink:href="#wave" x="0" y="1" />
  <use class="wave" xlink:href="#wave" x="0" y="0" />
</svg>

最後在心形容器的元素上加上遮罩,把水波放在這個容器裏,加上動畫就行了。svg

其餘細節看demo代碼。動畫

參考:https://developer.mozilla.org...spa

相關文章
相關標籤/搜索