萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS3中的clip-path使用攻略

CSS3中的clip-path使用攻略

   根據她的以往經驗,這個網站的HTML和CSS是完全在她的能力范圍以內,於是我幫助她完成了這個效果。顯示nav被裁減的效果是一個不簡單的任務,我看到圖片的第一反應是創建一個相匹配的背景被部分裁剪的圖像,然後把它設置為一個after元素。問題是,至少要解決響應式問題,並且響應式並不完全可控的。

  了解CSS屬性:clip-path

  clip-path 是工作草案的一部分,它是一個通過屏蔽和裁減來隱藏元素的一部分的工具。盡管clip-path沒有被主流的浏覽器支持(包括IE和Firefox),但在webkit浏覽器中,它仍然是一個實現時尚效果的小工具。

  注意,在現代浏覽器中需要使用-webkit-前綴。

  clip-path 簡單的工作原理是提供一系列的X和Y值來創建路徑。當使用這些值創建一條完整路徑時,就會把圖像按照路徑內部的尺寸進行裁剪。

  利用clip-path,我們可以創建圓形、橢圓和多邊形等不同的形狀,創造力是唯一的限制。

  一個簡單的三角形裁減

201583171155605.png (418×364)

  View the code on codepen

  對元素簡單地運用clip-path就能實現上面的效果:

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

  }

  逐步分析

  很像定位屬性,我們需要考慮X值和Y值。X:0和Y:0表示從元素的左上角開始,並從左上角開始移動。X:100%指的是元素右邊,Y:100%指的是元素底部。

  對於上面創建的路徑,實際是創建了如下的點:

  CSS Code復制內容到剪貼板

  x: 0, y:100%

  x: 50%, y: 0

  x: 100%, y: 100%

  這個簡單路徑開始於左下角,水平移動50%,並到達頂部位置,然後又水平移動到100%的位置,垂直向下回到底部,到達第三個坐標點。三角形就出來了。

  形狀

  在上面的示例中,我們使用polygon來創建一個圖形,並通過多對用逗號(,)分開的X值和Y值定義了一個路徑。然後,我們可以通過取不同的值來創建不同的圖形。

  圓

201583171226122.png (442×346)

  View the code on codepen

  為了創建圓形,需要給circle傳入三個值:圓心的坐標(X值和Y值)以及半徑。當定義圓的半徑時,我們可以用at關鍵字來定義圓心坐標。

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: circle(50% at 50% 50%);

  }

  橢圓

201583171332873.png (295×213)

  View this code on codepen

  很多時候,你不需要一個簡單的圓,而是一個橢圓。

  為了實現橢圓,需要給ellipse提供4個值:橢圓的x軸半徑、y軸半徑、定位橢圓位置的x坐標和y坐標,後面兩個值用at關鍵字和前面兩個值分開。

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: ellipse(30% 20% at 50% 50%);

  }

  插圖

  (在老版本的chrome中有錯誤)

201583171359839.png (411×211)

  View the code on codepen

  因為多邊形邊緣銳利,所以它可能不是你想要的東西,你想創建的是圓角矩形,所以我們來看看Inset的值。Inset使用四個值(對應“上 右 下 左”的順序)來設置圓角半徑。

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);

  }

  上面的各個值分別對應為:

  CSS Code復制內容到剪貼板

  inset( round )

  其簡寫形式:

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: inset(25% 0 round 0 25%);

  }

  快速參考

  CSS Code復制內容到剪貼板

  Circle: circle(radius at x-axis y-axis)

  Ellipse: ellipse(x-rad y-rad at x-axis y-axis)

  Polygon: polygon(x-axis y-axis, x-axis y-axis, … )

  Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius)

  創建形狀

  正如你看到的,原型和圓角圖形被少數幾個值限制了,因而Polygons是創建復雜圖形的最好選擇。Polygons能定義多組點,允許我們用各種方式去裁圖形。

  Comic Textbox

201583171419994.png (407×326)

  View the code on codepen

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  }

  Star

201583171439854.png (382×349)

  View the code on codepen

  CSS Code復制內容到剪貼板

  .clipClass {

  -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);

  }

  動畫

  現在我們已經了解了各種圖形和怎麼創建它們,那怎麼利用這些圖形創建我們想要的效果呢?

  給形狀應用一個hover,並用過渡屬性來創建平滑的效果。但是需要記住,我們創建的初始默認狀態,必須同所有的hover狀態都使用相同的坐標系。

  View the code on codepen

  CSS Code復制內容到剪貼板

  .animateClass {

  -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);

  }

  .animateClass:hover {

  -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

  }

copyright © 萬盛學電腦網 all rights reserved