一、基本概念

刷新 QQ 空間動(dòng)態(tài)時(shí)，發(fā)現(xiàn)一則廣告，隨著用戶(hù)上下滑動(dòng)動(dòng)態(tài)列表，就會(huì)自動(dòng)切換廣告圖片，這樣的效果對(duì)移動(dòng)端本就不大的屏幕來(lái)說(shuō)，無(wú)疑是很精妙的考慮，這樣的效果是怎么實(shí)現(xiàn)的呢？

接下來(lái)就說(shuō)說(shuō)這個(gè)效果的具體實(shí)現(xiàn)思路：

1. 將兩張圖片通過(guò)定位，相對(duì)于圖片容器堆疊在一起；
2. 在圖片容器的左上角或右下角選取一個(gè)圓心，繪制一個(gè)圓，不斷加大圓的半徑來(lái)顯示第二張圖片；
3. 上劃下拉時(shí)，根據(jù)滑動(dòng)速度動(dòng)態(tài)改變圓的半徑；
4. 當(dāng)圖片容器距屏幕頂部或底部的距離為 0 時(shí)，則相應(yīng)的改變圖片堆疊順序及圓心位置。

在圖片上繪制圓，為什么就能顯示出第二張圖片呢？說(shuō)到這里，就不得不說(shuō)一下咱們今天的主角 clip-path，引用 MDN 上的描述：

clip-path屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。剪切區(qū)域是被引用內(nèi)嵌的URL定義的路徑或者外部svg的路徑，或者作為一個(gè)形狀例如circle().。clip-path屬性代替了現(xiàn)在已經(jīng)棄用的剪切 clip屬性。

clip-path 的含義就是裁剪路徑，通過(guò)指定的閉合路徑或者形狀，甚至是 SVG 中 clipPath 標(biāo)簽定義的形狀，裁剪出部分需要保留的區(qū)域，這樣網(wǎng)頁(yè)中的布局實(shí)現(xiàn)可以是多種多樣的。

在 clip-path 出現(xiàn)之前，CSS2.1 中的 clip 屬性也有裁剪的效果，但是它只支持矩形，而且只對(duì) position:absolute 或者 position:fixed 的元素生效，使用方式如下：

clip: rect(60px, 60px, 60px, 60px); // 標(biāo)準(zhǔn)寫(xiě)法clip: rect(60px  60px  60px  60px); // 兼容 ie 及 火狐瀏覽器

注意: rect 參數(shù)的順序?yàn)?top、right、botton、left

所有主流瀏覽器都支持 clip 屬性，在雪碧圖（ CSS Sprite ）的展示仍然有它的用武之地，但是由于 clip 屬性的局限性， clip 已經(jīng)被 clip-path 代替。平常開(kāi)發(fā)中我們可以使用 border、border-radius 等屬性制作三角形、圓或圓角矩形等簡(jiǎn)單圖案，clip-path 為我們提供了更多的可能，結(jié)合 SVG 的 path、animate 等標(biāo)簽可以制作更多的有趣的圖案。

二、用法實(shí)踐

clip-path 屬性可以裁剪出很多圖形，circle、ellipse、polygon、inset，同時(shí)也可以使用動(dòng)畫(huà)和 SVG 的 clipPath 標(biāo)簽。

圓 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;}

值得說(shuō)明的是使用 SVG 的 clipPath 標(biāo)簽可以包裹 animate，其中 animate 標(biāo)簽的 attributeName 是指設(shè)置圓的半徑，values 可以設(shè)置動(dòng)畫(huà)的幀，可以有多個(gè)值用分號(hào)分割，dur 是指動(dòng)畫(huà)的持續(xù)時(shí)間，repeatCount 是指動(dòng)畫(huà)的次數(shù)。

兼容性

目前 IE 和 Edge 都不支持這個(gè)屬性。Firefox 僅部分支持 clip-path，部分支持是指只支持形狀和 URL(#path) 內(nèi)聯(lián)SVG的語(yǔ)法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前綴兼容此屬性。不支持外部的 SVG 形狀。更多兼容信息可以點(diǎn)擊這里查看 clip-path 瀏覽器兼容情況。

三、經(jīng)驗(yàn)總結(jié)

使用 URL(#path) 內(nèi)聯(lián)SVG 的方式，我們可以很輕易的裁剪出復(fù)雜的形狀，也能夠包含一些形象生動(dòng)的動(dòng)畫(huà)效果，比如在撲克游戲出牌下注的倒計(jì)時(shí)上添加扇形遮罩，或是在矩形邊緣添加倒計(jì)時(shí)進(jìn)度，加載中的動(dòng)畫(huà)等等，都能夠使用clip-path 屬性巧妙的實(shí)現(xiàn)，同時(shí)在使用 clip-path 屬性可以裁剪圖形時(shí)可以靈活的使用相對(duì)單位。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。