CSS3中clip-path怎么用-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)CSS3中clip-path怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、黃浦網(wǎng)絡(luò)推廣、成都小程序開(kāi)發(fā)、黃浦網(wǎng)絡(luò)營(yíng)銷(xiāo)、黃浦企業(yè)策劃、黃浦品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪(fǎng)、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供黃浦建站搭建服務(wù)，24小時(shí)服務(wù)熱線(xiàn)：028-86922220，官方網(wǎng)址：muchs.cn

了解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

View the code on codepen

.clipClass {   
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);   
}

Star

View the code on codepen

.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怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站題目：CSS3中clip-path怎么用-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article16/dejhgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營(yíng)銷(xiāo)、電子商務(wù)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)