剪裁，剪裁和更多剪裁！

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

這已經是筆者在CSS-Tricks 上發表的第三篇關於clip-path的文章了，如果您想了解背景知識，可以先閱讀以下文章：

• 使用CSS clip-path創建交互式效果
• 使用CSS clip-path創建交互式效果，第二部分

本文將介紹全新的創意！

創意一：雙重裁剪

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

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

clip-path只能應用於單個DOM 節點一次。一個節點不能同時擁有多個相同CSS 規則的活動實例，這意味著每個實例只有一個clip-path 。但是，組合裁剪節點的次數沒有上限。例如，我們可以將一個裁剪的<div>放置在另一個裁剪的<code><div>內，以此類推。在DOM 節點的祖先關係中，我們可以應用任意多個獨立的裁剪。這正是上面演示中所做的。我讓一個裁剪的節點填充另一個裁剪的節點。父節點充當邊界，子節點在縮放時填充父節點。這會產生一種不尋常的效果，即出現一個圓角菜單。可以將其視為<code>overflow: hidden的一種高級方法。

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

我製作了一個簡短的視頻來解釋菜單的內部工作原理：

創意二：縮放裁剪路徑

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

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

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

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

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

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

同樣，這裡還有一個視頻詳細講解了技術細節：

創意三：裁剪疊加層

另一個想法是使用clip-path創建高亮效果。例如，假設我們想使用clip-path來創建一個菜單的活動狀態。

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

該演示使用了相同內容的修改副本，其中副本位於現有內容的頂部。它與菜單位於完全相同的位置，並用作活動狀態。從本質上講，它看起來像菜單的任何其他常規活動狀態。不同之處在於它是使用clip-path創建的，而不是使用HTML 元素上的花哨CSS 樣式。

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

這裡的第二個技巧是根據方向應用延遲。如果活動狀態需要向右移動，則右側需要首先開始動畫，反之亦然。我通過使用一點JavaScript 來根據點擊應用正確的類來獲得方向感知。

創意四：扇形切片

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

我們通常看到的菜單包含以單行甚至下拉菜單形式排列的鏈接，就像我們之前看到的第一個技巧一樣。我們在這裡做的是將這些鏈接放在弧形而不是矩形中。當然，使用矩形是傳統的方法。這裡的想法是探索更友好的移動交互，並牢記兩個具體的UX 原則：

• 一個清晰的目標，用拇指輕鬆點擊
• 更改發生在焦點附近——您視覺焦點所在的位置

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

創意五：切換按鈕

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

該演示是Oleg Frolov 的Dribbble 截圖的重製版。它結合了本文中介紹的所有三種技術。這些是：

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

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

演示的另一個關鍵部分是在標記中使用兩個交替版本。它們是原始版本及其陰陽反轉鏡像副本。使用兩個版本而不是一個版本是，冒著重複的風險，一個方便的問題。使用兩個版本，我們只需要為第一個版本創建過渡。然後，我們可以將其大部分內容重複用於第二個版本。在過渡結束時，切換按鈕切換到相反的版本。由於反轉版本與之前的結束狀態相同，因此無法發現變化。此技術的優點是重複使用動畫的部分內容。缺點是在中斷動畫時會出現卡頓。當用戶在動畫完成之前按下切換按鈕時，就會發生這種情況。

讓我們再次看看幕後：

結語

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

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

1. 瀏覽器支持
2. 性能

在撰寫本文時，根據caniuse，大約有93% 的瀏覽器支持。我認為我們正處於大規模採用的邊緣。請注意，此數字考慮了WebKit 前綴。

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

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

繼續吧，將您的網頁切成碎片。看看會發生什麼！