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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們來看一下演示。點(diǎn)擊圖像以重新啟動(dòng)效果：

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

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

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

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

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

上面的裁剪路徑在動(dòng)畫時(shí)會(huì)延伸到不同的菜單選項(xiàng)之間。此外，我們使用了一個(gè)有趣的形狀來使 UI 更突出。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們?cè)俅慰纯茨缓螅?/p>

結(jié)語(yǔ)

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

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

1. 瀏覽器支持
2. 性能

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

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

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

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