一、基本概念
刷新QQ 空間動態時，發現一則廣告，隨著用戶上下滑動動態列表，就會自動切換廣告圖片，這樣的效果對行動端本就不大的螢幕來說，無疑是很精妙的考慮，這樣的效果是怎麼達成的呢？
接下來就說說這個效果的具體實現想法：
將兩張圖片通過定位，相對於圖片容器堆疊在一起；
#在圖片容器的左上角或右下角選取一個圓心，畫出一個圓，不斷加大圓的半徑來顯示第二張圖片；
上劃下拉時，根據滑動速度動態改變圓的半徑；
當圖片容器與螢幕頂部或底部的距離為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 等標籤可以製作更多的有趣的圖案。
二、用法實作
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%);
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 瀏覽器相容情況。
三、經驗總結
使用URL(#path) 內聯SVG 的方式，我們可以很輕易的裁剪出複雜的形狀，也能夠包含一些形像生動的動畫效果，例如在撲克遊戲出牌下注的倒數計時上添加扇形遮罩，或在矩形邊緣添加倒數進度，加載中的動畫等等，都能夠使用clip-path 屬性巧妙的實現，同時在使用clip-path 屬性可以裁剪圖形時可以靈活的使用相對單位。
相關推薦：
基於clip-path的任意元素的碎片拼接動效_html/css_WEB-ITnose
#以上是CSS3中clip-path的用法簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！
