怎么用clip-path實(shí)現(xiàn)CSS形狀變換-創(chuàng)新互聯(lián)

這篇文章主要講解了“怎么用clip-path實(shí)現(xiàn)CSS形狀變換”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用clip-path實(shí)現(xiàn)CSS形狀變換”吧！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的遼陽縣網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

CSS3的“clip-path”，這個“clip-path”看起來有點(diǎn)眼熟，因?yàn)樗揪痛嬖谟赟VG里頭，利用掩碼（剪裁）的方法，連接坐標(biāo)繪制掩碼區(qū)域，就可以做出許多不同的形狀，讓底色或底圖顯現(xiàn)，隨著瀏覽器對于CSS3的支持度大幅提升，自然而然的就可以用它來做些與眾不同的變化。

運(yùn)用clip-path超強(qiáng)的網(wǎng)站

最先看到這個屬性的應(yīng)用，是從這個網(wǎng)站看到的： species-in-pieces.com/ ，不得不說這個網(wǎng)站做得實(shí)在太神了，一開始看到還真以為是用SVG做的，沒想到竟然是用CSS刻出來的…真是太驚人啦！

接著在找數(shù)據(jù)的過程中，又發(fā)現(xiàn)一個很強(qiáng)的網(wǎng)站： bennettfeely.com/clippy/ ，專門介紹「clip-path」這個CSS3的屬性，你可以直接在上面拖拉或修改，除了貝茲曲線外，幾乎任何形狀都做得出來（中空的部分要用組合的）

使用clip-path繪制多邊形

如果不考慮一些瀏覽器支持度的問題，使用clip-path來繪制多邊形，還比利用偽元素還制作多邊形來得簡單許多，而且也可以做到單一div繪制超過八邊形，使用偽元素的繪制是直接從長寬著手，而利用clip-path則是要由每個點(diǎn)的坐標(biāo)著手，因?yàn)槭亲鶚?biāo)點(diǎn)的緣故，要做出正多邊形就也同樣要用到許多基本的三角函式來計(jì)算坐標(biāo)，以下就利用clip-path來繪制圓形、橢圓和正多邊形給大家看看。

這里推薦一下我的前端學(xué)習(xí)交流扣qun：731771211 ，里面都是學(xué)習(xí)前端的，如果你想制作酷炫的網(wǎng)頁，想學(xué)習(xí)編程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設(shè)計(jì)模式】到移動端HTML5的項(xiàng)目實(shí)戰(zhàn)的學(xué)習(xí)資料都有整理，送給每一位前端小伙伴，每天分享技術(shù)

點(diǎn)擊： 加入

開始繪制之前，有兩點(diǎn)注意事項(xiàng)：

• 使用clip-path要從同一個方向繪制，如果順時(shí)針繪制就一律順時(shí)針，逆時(shí)針就一律逆時(shí)針，因?yàn)閜olygon是一個連續(xù)的線段，若線段彼此有交集，面積區(qū)域就會有相減的狀況發(fā)生（當(dāng)然如果這是你要的效果就無妨了）。

• 如果繪制時(shí)采用「比例」的方式繪制，長寬就必須要先行設(shè)定，不然有可能繪制出來的長寬和我們想像的就會有落差，使用「像素」繪制就沒有這種問題。

圓形circle（半徑at圓心坐標(biāo)）

.circle{
    width:100px;
    height:100px;
    background:#0cc;
    -webkit-clip-path:circle(50% at 50% 50%);
  }

橢圓形ellipse（長、短軸半徑at圓心坐標(biāo)）

 .ellipse{
    width:100px;
    height:100px;
    background:#aaa;
    -webkit-clip-path:ellipse(25% 50% at 50% 50%);
  }

內(nèi)置矩形inset（上右下左的邊距round上右下左圓角）

.inset{
    width:100px;
    height:100px;
    background:#99f;
    -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);
  }

image.png

正三角形

 .a{
    width:100px;
    height:87px;
    background:#c00;
    -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
  }

image.png

正方形

.b{
    width:100px;
    height:100px;
    background:#069;
    -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
  }

image.png

正五邊形

正五邊形就要計(jì)算一下了，59/（59+95）=38.31%，31/（81*2）=19.14%

.c{
    width:162px;
    height:154px;
    background:#095;
    -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
  }

image.png

正六邊形

正六邊形的計(jì)算比較簡單，50/（100+50

2）=25%，150/（100+50

2）=75%

.d{
    width:200px;
    height:174px;
    background:#f80;
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }

image.png

正七邊形

正七邊形是這里頭需要計(jì)算最多的形狀，22/（100+622）=10.09%，202/（100+622）=90.18%，43/（43+97+78）=19.72%，（43+97）/（43+97+78）=64.22%，62/（100+622）=27.68%，（100+62）/（100+622）=72.32%

.e{
    width:224px;
    height:218px;
    background:#09c;
    -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
  }

image.png

正八邊形

正八邊形的計(jì)算如下，71/（100+712）=29.34%，（71+100）/（100+712）=70.66%

.f{
    width:242px;
    height:242px;
    background:#f69;
    -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
  }

搭配clip-path做動畫

熟練了clip-path之后，當(dāng)然就要用它來做點(diǎn)動畫，下面提供兩個示例，第一個是正多邊形的變換，第二個則是三角形的變換組合，雖然看起來很簡單，但實(shí)際制作起來卻要考慮每個點(diǎn)的坐標(biāo)，為了讓形狀不要有「翻轉(zhuǎn)」的錯覺，形狀里頭每個點(diǎn)在進(jìn)行移動的時(shí)候，盡可能的不要交錯，因?yàn)橹灰唤诲e，就會有交集的空白產(chǎn)生，就會有不自然或是翻轉(zhuǎn)的現(xiàn)象喔！當(dāng)然同樣的，如果你希望有翻轉(zhuǎn)的效果，應(yīng)該就要讓他們交錯啰！

正多邊形的變換

三角形的變換組合

感謝各位的閱讀，以上就是“怎么用clip-path實(shí)現(xiàn)CSS形狀變換”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用clip-path實(shí)現(xiàn)CSS形狀變換這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁標(biāo)題：怎么用clip-path實(shí)現(xiàn)CSS形狀變換-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article28/ddphjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、做網(wǎng)站、自適應(yīng)網(wǎng)站、外貿(mào)建站、面包屑導(dǎo)航、服務(wù)器托管

廣告

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