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的文章了，如果您想了解背景知識，可以先閱讀以下文章：

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

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

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

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

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

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

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

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

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

另一個（不太明顯）的技巧是使用clip-path進(jìn)行縮放。我們實(shí)際上可以使用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)都會單獨(dú)進(jìn)行插值。這一點(diǎn)很重要。它使clip-path動畫看起來連貫流暢。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們再次看看幕後：

結(jié)語

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

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

1. 瀏覽器支持
2. 性能

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

還有IE 的論點(diǎn)，但這對我來說真的不算什麼論點(diǎn)。我看不出為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ā)生什麼！