CSS clip-path 屬性的妙用：探索多種創(chuàng)意技巧及應(yīng)用案例。本文將分享一系列使用 clip-path 屬性實現(xiàn)的有趣效果，希望能激發(fā)您在項目中應(yīng)用或進(jìn)行創(chuàng)意嘗試。

這已經(jīng)是筆者在 CSS-Tricks 上發(fā)表的第三篇關(guān)于 clip-path 的文章了，如果您想了解背景知識，可以先閱讀以下文章：

• 使用 CSS clip-path 創(chuàng)建交互式效果
• 使用 CSS clip-path 創(chuàng)建交互式效果，第二部分

本文將介紹全新的創(chuàng)意！

創(chuàng)意一：雙重裁剪

一個巧妙的技巧是多次使用 clip-path 來裁剪內(nèi)容。這聽起來可能很明顯，但實際上很少有人用到這個概念。

例如，讓我們來看一個展開的菜單：

clip-path 只能應(yīng)用于單個 DOM 節(jié)點一次。一個節(jié)點不能同時擁有多個相同 CSS 規(guī)則的活動實例，這意味著每個實例只有一個 clip-path。但是，組合裁剪節(jié)點的次數(shù)沒有上限。例如，我們可以將一個裁剪的 <div> 放置在另一個裁剪的 <code><div> 內(nèi)，以此類推。在 DOM 節(jié)點的祖先關(guān)系中，我們可以應(yīng)用任意多個獨立的裁剪。這正是上面演示中所做的。我讓一個裁剪的節(jié)點填充另一個裁剪的節(jié)點。父節(jié)點充當(dāng)邊界，子節(jié)點在縮放時填充父節(jié)點。這會產(chǎn)生一種不尋常的效果，即出現(xiàn)一個圓角菜單?？梢詫⑵湟暈?<code>overflow: hidden 的一種高級方法。

當(dāng)然，您可以認(rèn)為 SVG 更適合此目的。與 clip-path 相比，SVG 能夠?qū)崿F(xiàn)更多功能。其中包括平滑縮放。如果 clip-path 完全支持貝塞爾曲線，情況就會有所不同。但在撰寫本文時，情況并非如此。無論如何，clip-path 非常方便。一個節(jié)點，一個 CSS 規(guī)則，您就可以開始了。就上面的演示而言，clip-path 完成了這項工作，因此是一個可行的選擇。

我制作了一個簡短的視頻來解釋菜單的內(nèi)部工作原理：

創(chuàng)意二：縮放裁剪路徑

另一個（不太明顯）的技巧是使用 clip-path 進(jìn)行縮放。我們實際上可以使用 CSS 過渡來動畫化 clip-path！

過渡系統(tǒng)在其構(gòu)建方式上令人驚嘆。在我看來，它的加入是近年來 Web 技術(shù)發(fā)展中最大的飛躍之一。它支持各種不同值的過渡。clip-path 屬于我們可以動畫化的可接受值。動畫通常意味著在兩個極值之間進(jìn)行插值。對于 clip-path，這意味著在兩個完整不同的路徑之間進(jìn)行插值。這就是 Web 精細(xì)的動畫系統(tǒng)展現(xiàn)其優(yōu)勢的地方。它不僅適用于單個值，也適用于動畫化值集。

在動畫化 clip-path 時，每個坐標(biāo)都會單獨進(jìn)行插值。這一點很重要。它使 clip-path 動畫看起來連貫流暢。

讓我們來看一下演示。點擊圖像以重新啟動效果：

在這個演示中，我使用了 clip-path 過渡。它用于從覆蓋一個小區(qū)域的一個 clip-path 縮放至另一個巨大的 clip-path。clip-path 的最小版本遠(yuǎn)小于分辨率——換句話說，應(yīng)用時肉眼不可見。另一個極值略大于視口。在這個縮放級別，沒有可見的裁剪，因為所有裁剪都發(fā)生在可見區(qū)域之外。在這兩個不同的 clip-path 之間進(jìn)行動畫會產(chǎn)生有趣的效果。被裁剪的形狀在縮放時似乎會顯示其背后的內(nèi)容。

您可能已經(jīng)注意到，該演示使用了不同的形狀。在這種情況下，我使用了流行運動鞋品牌的徽標(biāo)。這能讓您了解在更真實的場景中效果如何。

同樣，這里還有一個視頻詳細(xì)講解了技術(shù)細(xì)節(jié)：

創(chuàng)意三：裁剪疊加層

另一個想法是使用 clip-path 創(chuàng)建高亮效果。例如，假設(shè)我們想使用 clip-path 來創(chuàng)建一個菜單的活動狀態(tài)。

上面的裁剪路徑在動畫時會延伸到不同的菜單選項之間。此外，我們使用了一個有趣的形狀來使 UI 更突出。

該演示使用了相同內(nèi)容的修改副本，其中副本位于現(xiàn)有內(nèi)容的頂部。它與菜單位于完全相同的位置，并用作活動狀態(tài)。從本質(zhì)上講，它看起來像菜單的任何其他常規(guī)活動狀態(tài)。不同之處在于它是使用 clip-path 創(chuàng)建的，而不是使用 HTML 元素上的花哨 CSS 樣式。

使用 clip-path 可以在這里創(chuàng)建一些不尋常的效果。傾斜的形狀是一方面，但我們也獲得了拉伸效果。菜單有兩個獨立的裁剪——一個在左邊，一個在右邊——這使得可以使用過渡延遲以不同的時間來動畫化裁剪。結(jié)果是一個非常輕松的拉伸動畫。由于默認(rèn)緩動是非線性的，延遲會導(dǎo)致輕微的橡皮筋效果。

這里的第二個技巧是根據(jù)方向應(yīng)用延遲。如果活動狀態(tài)需要向右移動，則右側(cè)需要首先開始動畫，反之亦然。我通過使用一點 JavaScript 來根據(jù)點擊應(yīng)用正確的類來獲得方向感知。

創(chuàng)意四：扇形切片

您在 Web 上看到圓形展開菜單的頻率有多高？荒謬，對吧！？好吧，clip-path 不僅使它成為可能，而且相當(dāng)簡單。

我們通?？吹降牟藛伟詥涡猩踔料吕藛涡问脚帕械逆溄樱拖裎覀冎翱吹降牡谝粋€技巧一樣。我們在這里做的是將這些鏈接放在弧形而不是矩形中。當(dāng)然，使用矩形是傳統(tǒng)的方法。這里的想法是探索更友好的移動交互，并牢記兩個具體的 UX 原則：

• 一個清晰的目標(biāo)，用拇指輕松點擊
• 更改發(fā)生在焦點附近——您視覺焦點所在的位置

該演示并非專門針對 clip-path。我只是碰巧使用 clip-path 來創(chuàng)建筆。再次，就像之前的可展開菜單演示一樣，這是一個方便的問題。使用 clip-path 和 50% 的邊框半徑，我立即獲得了所需的弧線。

創(chuàng)意五：切換按鈕

切換按鈕總是讓像我們這樣的 Web 開發(fā)人員驚嘆不已。似乎每周都會有人介紹一種新的切換按鈕解釋。好吧，這是我的：

該演示是 Oleg Frolov 的 Dribbble 截圖的重制版。它結(jié)合了本文中介紹的所有三種技術(shù)。這些是：

• 雙重裁剪
• 縮放裁剪路徑
• 裁剪疊加層

所有這些開關(guān)似乎都有一個共同點。它們由橢圓形背景和一個圓圈組成，類似于真實的機械開關(guān)。此切換按鈕的工作方式是放大圓形容器內(nèi)的圓形 clip-path。容器通過 overflow: hidden 裁剪內(nèi)容，即雙重裁剪。

演示的另一個關(guān)鍵部分是在標(biāo)記中使用兩個交替版本。它們是原始版本及其陰陽反轉(zhuǎn)鏡像副本。使用兩個版本而不是一個版本是，冒著重復(fù)的風(fēng)險，一個方便的問題。使用兩個版本，我們只需要為第一個版本創(chuàng)建過渡。然后，我們可以將其大部分內(nèi)容重復(fù)用于第二個版本。在過渡結(jié)束時，切換按鈕切換到相反的版本。由于反轉(zhuǎn)版本與之前的結(jié)束狀態(tài)相同，因此無法發(fā)現(xiàn)變化。此技術(shù)的優(yōu)點是重復(fù)使用動畫的部分內(nèi)容。缺點是在中斷動畫時會出現(xiàn)卡頓。當(dāng)用戶在動畫完成之前按下切換按鈕時，就會發(fā)生這種情況。

讓我們再次看看幕后：

結(jié)語

您可能會想：探索是一回事，但生產(chǎn)呢？我可以在我目前正在處理的網(wǎng)站上使用 clip-path 嗎？它準(zhǔn)備好投入生產(chǎn)了嗎？

好吧，這個問題沒有簡單的答案。除其他事項外，還有兩個問題需要仔細(xì)研究：

1. 瀏覽器支持
2. 性能

在撰寫本文時，根據(jù) caniuse，大約有 93% 的瀏覽器支持。我認(rèn)為我們正處于大規(guī)模采用的邊緣。請注意，此數(shù)字考慮了 WebKit 前綴。

還有 IE 的論點，但這對我來說真的不算什么論點。我看不出為 IE 額外努力有什么意義。您應(yīng)該為不安全的瀏覽器創(chuàng)建變通方法嗎？您的用戶最好使用現(xiàn)代瀏覽器。當(dāng)然，有一些罕見的情況需要考慮遺留問題。但在這些情況下，您可能根本不會考慮使用現(xiàn)代 CSS。

那么性能呢？好吧，隨著事情的增加，性能會變得棘手，但我不會說有什么會阻止我們今天使用 clip-path。始終衡量的性能才是重要的。平均而言，clip-path 造成的性能影響可能比其他 CSS 規(guī)則更大。但請記住，我們在這里介紹的做法是建議，而不是法律。將它們視為建議。養(yǎng)成衡量性能的習(xí)慣。

繼續(xù)吧，將您的網(wǎng)頁切成碎片?？纯磿l(fā)生什么！