CSS3中的clip-path使用攻略

根據(jù)她的以往經(jīng)驗(yàn),這個(gè)網(wǎng)站的HTML和CSS是完全在她的能力范圍以內(nèi),于是我?guī)椭瓿闪诉@個(gè)效果。顯示nav被裁減的效果是一個(gè)不簡(jiǎn)單的任務(wù),我看到圖片的第一反應(yīng)是創(chuàng)建一個(gè)相匹配的背景被部分裁剪的圖像,然后把它設(shè)置為一個(gè)after元素。問(wèn)題是,至少要解決響應(yīng)式問(wèn)題,并且響應(yīng)式并不完全可控的。
了解CSS屬性:clip-path
clip-path 是工作草案的一部分,它是一個(gè)通過(guò)屏蔽和裁減來(lái)隱藏元素的一部分的工具。盡管clip-path沒(méi)有被主流的瀏覽器支持(包括IE和Firefox),但在webkit瀏覽器中,它仍然是一個(gè)實(shí)現(xiàn)時(shí)尚效果的小工具。
注意,在現(xiàn)代瀏覽器中需要使用-webkit-前綴。
clip-path 簡(jiǎn)單的工作原理是提供一系列的X和Y值來(lái)創(chuàng)建路徑。當(dāng)使用這些值創(chuàng)建一條完整路徑時(shí),就會(huì)把圖像按照路徑內(nèi)部的尺寸進(jìn)行裁剪。
利用clip-path,我們可以創(chuàng)建圓形、橢圓和多邊形等不同的形狀,創(chuàng)造力是唯一的限制。
一個(gè)簡(jiǎn)單的三角形裁減
View the code on codepen
對(duì)元素簡(jiǎn)單地運(yùn)用clip-path就能實(shí)現(xiàn)上面的效果:
- .clipClass {
- -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
- }
逐步分析
很像定位屬性,我們需要考慮X值和Y值。X:0和Y:0表示從元素的左上角開(kāi)始,并從左上角開(kāi)始移動(dòng)。X:100%指的是元素右邊,Y:100%指的是元素底部。
對(duì)于上面創(chuàng)建的路徑,實(shí)際是創(chuàng)建了如下的點(diǎn):
- x: 0, y:100%
- x: 50%, y: 0
- x: 100%, y: 100%
這個(gè)簡(jiǎn)單路徑開(kāi)始于左下角,水平移動(dòng)50%,并到達(dá)頂部位置,然后又水平移動(dòng)到100%的位置,垂直向下回到底部,到達(dá)第三個(gè)坐標(biāo)點(diǎn)。三角形就出來(lái)了。
形狀
在上面的示例中,我們使用polygon來(lái)創(chuàng)建一個(gè)圖形,并通過(guò)多對(duì)用逗號(hào)(,)分開(kāi)的X值和Y值定義了一個(gè)路徑。然后,我們可以通過(guò)取不同的值來(lái)創(chuàng)建不同的圖形。
圓
View the code on codepen
為了創(chuàng)建圓形,需要給circle傳入三個(gè)值:圓心的坐標(biāo)(X值和Y值)以及半徑。當(dāng)定義圓的半徑時(shí),我們可以用at關(guān)鍵字來(lái)定義圓心坐標(biāo)。
- .clipClass {
- -webkit-clip-path: circle(50% at 50% 50%);
- }
橢圓
View this code on codepen
很多時(shí)候,你不需要一個(gè)簡(jiǎn)單的圓,而是一個(gè)橢圓。
為了實(shí)現(xiàn)橢圓,需要給ellipse提供4個(gè)值:橢圓的x軸半徑、y軸半徑、定位橢圓位置的x坐標(biāo)和y坐標(biāo),后面兩個(gè)值用at關(guān)鍵字和前面兩個(gè)值分開(kāi)。
- .clipClass {
- -webkit-clip-path: ellipse(30% 20% at 50% 50%);
- }
插圖
(在老版本的chrome中有錯(cuò)誤)
View the code on codepen
因?yàn)槎噙呅芜吘変J利,所以它可能不是你想要的東西,你想創(chuàng)建的是圓角矩形,所以我們來(lái)看看Inset的值。Inset使用四個(gè)值(對(duì)應(yīng)“上 右 下 左”的順序)來(lái)設(shè)置圓角半徑。
- .clipClass {
- -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
- }
上面的各個(gè)值分別對(duì)應(yīng)為:
- inset(<top> <rightright> <bottombottom> <left> round <top-radius> <rightright-radius> <bottombottom-radius> <left-radius>)
其簡(jiǎn)寫(xiě)形式:
- .clipClass {
- -webkit-clip-path: inset(25% 0 round 0 25%);
- }
快速參考
- 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)
創(chuàng)建形狀
正如你看到的,原型和圓角圖形被少數(shù)幾個(gè)值限制了,因而Polygons是創(chuàng)建復(fù)雜圖形的最好選擇。Polygons能定義多組點(diǎn),允許我們用各種方式去裁圖形。
Comic Textbox
- .clipClass {
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
- }
Star
- .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%);
- }
動(dòng)畫(huà)
現(xiàn)在我們已經(jīng)了解了各種圖形和怎么創(chuàng)建它們,那怎么利用這些圖形創(chuàng)建我們想要的效果呢?
給形狀應(yīng)用一個(gè)hover,并用過(guò)渡屬性來(lái)創(chuàng)建平滑的效果。但是需要記住,我們創(chuàng)建的初始默認(rèn)狀態(tài),必須同所有的hover狀態(tài)都使用相同的坐標(biāo)系。
View the code on codepen
- .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%);
- }
相關(guān)文章
- 這篇文章主要介紹了CSS3 clip-path 用法介紹詳解的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-01