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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

另一個想法是使用clip-path創(chuàng)建高亮效果。例如，假設我們想使用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é)果是一個非常輕鬆的拉伸動畫。由於默認緩動是非線性的，延遲會導致輕微的橡皮筋效果。

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

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

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

我們通?？吹降牟藛伟詥涡猩踔料吕藛涡问脚帕械逆溄?，就像我們之前看到的第一個技巧一樣。我們在這裡做的是將這些鏈接放在弧形而不是矩形中。當然，使用矩形是傳統(tǒng)的方法。這裡的想法是探索更友好的移動交互，並牢記兩個具體的UX 原則：

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

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

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

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

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

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

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

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

讓我們再次看看幕後：

結(jié)語

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

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

1. 瀏覽器支持
2. 性能

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

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

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

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