CSS3 clip-path 用法介紹

1、基本概念

刷新 QQ 空間動態時，發現一則廣告，隨着用戶上下滑動動態列表，就會自動切換廣告圖片，這樣的效果對移動端本就不大的屏幕來講，無疑是很精妙的考慮，這樣的效果是怎麼實現的呢？

你能夠點擊這裏：QQ空間廣告示意demo

接下來就說說這個效果的具體實現思路：

1. 將兩張圖片經過定位，相對於圖片容器堆疊在一塊兒；
2. 在圖片容器的左上角或右下角選取一個圓心，繪製一個圓，不斷加大圓的半徑來顯示第二張圖片；
3. 上劃下拉時，根據滑動速度動態改變圓的半徑；
4. 當圖片容器距屏幕頂部或底部的距離爲 0 時，則相應的改變圖片堆疊順序及圓心位置。

在圖片上繪製圓，爲何就能顯示出第二張圖片呢？說到這裏，就不得不說一下我們今天的主角 clip-path，引用 MDN 上的描述：

clip-path屬性能夠建立一個只有元素的部分區域能夠顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者做爲一個形狀例如circle().。clip-path屬性代替瞭如今已經棄用的剪切 clip屬性。

clip-path 的含義就是裁剪路徑，經過指定的閉合路徑或者形狀，甚至是 SVG 中 clipPath 標籤訂義的形狀，裁剪出部分須要保留的區域，這樣網頁中的佈局實現能夠是多種多樣的。

在 clip-path 出現以前，CSS2.1 中的 clip 屬性也有裁剪的效果，可是它只支持矩形，並且只對 position:absolute 或者 position:fixed 的元素生效，使用方式以下：

clip: rect(60px, 60px, 60px, 60px); // 標準寫法
clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐瀏覽器
複製代碼

注意: rect 參數的順序爲 top、right、botton、left

全部主流瀏覽器都支持 clip 屬性，在雪碧圖（ CSS Sprite ）的展現仍然有它的用武之地，可是因爲 clip 屬性的侷限性， clip 已經被 clip-path 代替。日常開發中咱們可使用 border、border-radius 等屬性製做三角形、圓或圓角矩形等簡單圖案，clip-path 爲咱們提供了更多的可能，結合 SVG 的 path、animate 等標籤能夠製做更多的有趣的圖案。

2、用法實踐

clip-path 屬性能夠裁剪出不少圖形，circle、ellipse、polygon、inset，同時也可使用動畫和 SVG 的 clipPath 標籤。

• 圓 circle

clip-path: circle(25% at 50% 50%);
複製代碼

• 橢圓 ellipse

clip-path: ellipse(25% 25% at 50% 50%);
複製代碼

• inset

clip-path: inset(35% 35% 35% 35% round 0 70% 0 70%);
複製代碼

• 多邊形 polygon

clip-path: polygon(50% 0, 25% 50% ,75% 50%);
複製代碼

你能夠點擊這裏：clip-path示意demo

• url

<section class="container">
  <img src="img01.jpg" class="contract">
  <img src="img02.jpg">
</section>
<svg height="0" width="0">
  <clipPath id="clip02">
    <circle cx="400" cy="210" r="0">
      <animate
        attributeType="CSS"
        attributeName="r"
        values="0;480;0"
        dur="9s"
        repeatCount="2"
      />
    </circle>
  </clipPath>
</svg>
複製代碼

.contract {
  clip-path: url(#clip02);
  z-index:1;
}
複製代碼

值得說明的是使用 SVG 的 clipPath 標籤能夠包裹 animate，其中 animate 標籤的 attributeName 是指設置圓的半徑，values 能夠設置動畫的幀，能夠有多個值用分號分割，dur 是指動畫的持續時間，repeatCount 是指動畫的次數。

兼容性

目前 IE 和 Edge 都不支持這個屬性。Firefox 僅部分支持 clip-path，部分支持是指只支持形狀和 URL(#path) 內聯SVG的語法。Chrome、Safari 和 Opera 須要使用 -webkit- 的前綴兼容此屬性。不支持外部的 SVG 形狀。更多兼容信息能夠點擊這裏查看 clip-path 瀏覽器兼容狀況。

3、經驗總結

使用 URL(#path) 內聯SVG 的方式，咱們能夠很輕易的裁剪出複雜的形狀，也可以包含一些形象生動的動畫效果，好比在撲克遊戲出牌下注的倒計時上添加扇形遮罩，或是在矩形邊緣添加倒計時進度，加載中的動畫等等，都可以使用clip-path 屬性巧妙的實現，同時在使用 clip-path 屬性能夠裁剪圖形時能夠靈活的使用相對單位。

4、參考連接

• clip-path

• species-in-pieces

• CSS3/SVG clip-path路徑剪裁遮罩屬性簡介

  ---

  關注微信公衆號：創宇前端（KnownsecFED），碼上獲取更多優質乾貨！