幾週前，我偶然發(fā)現(xiàn)了Mikael Ainalem的這種很酷的彈出效果。它在CSS中展示了剪輯路徑：path（），它在大多數(shù)現(xiàn)代瀏覽器中都得到了適當(dāng)?shù)闹С?。我想自己挖掘它，以更好地了解它的工作原理。但是在此過程中，我發(fā)現(xiàn)了剪輯路徑的一些問題：path（）;並結(jié)束了在本文中找到我想與您一起瀏覽的另一種方法。

如果您尚未使用剪輯路徑或不熟悉它，它基本上允許我們根據(jù)剪輯路徑為元素指定顯示區(qū)域，並隱藏落在夾子路徑外的元素的部分。

剪輯路徑的可能值包括圓，橢圓和多邊形，將用例限制為這些特定形狀。這是新的路徑值所在的地方 - 它使我們能夠使用更靈活的SVG路徑來創(chuàng)建超出基本形狀的各種剪輯路徑。

讓我們來了解有關(guān)剪輯路徑的知識，並開始致力於懸停效果。使人的前景圖像的基本思想似乎是從五顏六色的背景中彈出的，當(dāng)元素懸停時大小的規(guī)模。一個重要的細(xì)節(jié)是前景圖像動畫（擴(kuò)展和移動）如何獨立於背景圖像動畫（僅擴(kuò)展）。

這種效果看起來很酷，但是路徑值存在一些問題。對於初學(xué)者來說，儘管我們提到支持通常是好的，但它不是很好，並且在撰寫本文時徘徊了約82％的覆蓋範(fàn)圍。因此，請記住，目前移動支持僅限於Chrome和Safari。

除了支持外，路徑的更大，更奇怪的問題是，它目前僅適用於像素值，這意味著它沒有響應(yīng)。例如，假設(shè)我們放大了頁面。馬上，路徑形狀開始切斷。

這嚴(yán)重限制了夾子路徑的用例：path（），因為它只能在固定尺寸的元素上使用。多年來，響應(yīng)式Web設(shè)計一直是廣泛接受的標(biāo)準(zhǔn)，因此看到不遵循原則並專門使用像素單元的新CSS屬性很奇怪。

我們要做的就是使用標(biāo)準(zhǔn)，廣泛支持的CSS技術(shù)重新創(chuàng)建這種效果，以便它不僅有效，而且確實具有響應(yīng)速度。

棘手的部分

我們希望任何溢出剪貼路徑的東西只能在圖像的頂部可見。我們不能使用標(biāo)準(zhǔn)CSS溢出屬性，因為它會影響頂部和底部。

那麼，除了溢出和剪輯路徑外，我們還有什麼選擇？好吧，讓我們在SVG本身中使用。 是一種SVG屬性，它與新發(fā)行的和無反應(yīng)的剪輯路徑：路徑不同。

SVG 元素

svg 和元素適應(yīng)了SVG元素的坐標(biāo)系，因此它們可以響應(yīng)開箱即用。隨著SVG元素的縮放，其坐標(biāo)係也正在縮放，並根據(jù)涵蓋廣泛可能的用例的各種屬性維持其比例。作為另外的好處，在SVG上使用CSS中使用夾式路徑具有95％的瀏覽器支持，與夾子路徑相比，它增加了13％。

讓我們從設(shè)置我們的SVG元素開始。我使用Inkscape創(chuàng)建了基本的SVG標(biāo)記和剪裁路徑，只是為了使自己變得容易。完成此操作後，我通過添加自己的類屬性來更新標(biāo)記。

 <svg xmlns="“" http: viewbox="“">
  <defs>
    <clippath clippathunits="“" userpaceonuse>
      
    </clippath>
    <clippath clippathunits="“" userpaceonuse>
      
    </clippath>
  </defs>
  <g clip url transform="“" transfate>
    
    <image clip-path="“" url width="“" height="“" x="“" y="“" href="%E2%80%9C" ... transform="“" translate></image>
    
    
  </g>
</svg>

此標(biāo)記可以很容易地用於其他背景圖像和前景圖像。我們只需要在圖像元素內(nèi)部的HREF屬性中替換URL即可。

現(xiàn)在，我們可以在CSS中進(jìn)行懸停動畫。我們可以通過轉(zhuǎn)換和過渡來度過難關(guān)，確保前景很好地集中，然後在懸停時進(jìn)行縮放和移動事物。

 。圖像 {
  變換：比例尺（0.9，0.9）;
  過渡：變換0.2s易於啟動；
}

.image__foreground {
  轉(zhuǎn)化原始：50％50％；
  變換：translatey（4px）比例（1，1）;
  過渡：變換0.2s易於啟動；
}

圖像：懸停{
  變換：比例尺（1，1）;
}

.Image：Hover .Image__foreground {
  變換：translatey（-7px）比例（1.05，1.05）;
}

這是上述HTML和CSS代碼的結(jié)果。嘗試調(diào)整屏幕大小並更改SVG元素的尺寸，以查看效果如何隨屏幕尺寸縮放。

這看起來很棒！但是，我們還沒有完成。我們?nèi)匀恍枰鉀Q一些問題，因為我們已經(jīng)將標(biāo)記從HTML圖像元素更改為SVG元素。

SEO和可訪問性

內(nèi)聯(lián)SVG元素不會被搜索爬網(wǎng)索引。如果SVG元素是內(nèi)容的重要組成部分，則您的頁面SEO可能會受到打擊，因為這些圖像可能不會被拾取。

我們需要其他標(biāo)記，該標(biāo)記使用CSS隱藏的常規(guī)元素。以這種方式聲明的圖像會被爬網(wǎng)機自動拾取，我們可以在圖像站點地圖中提供指向這些圖像的鏈接，以確保爬網(wǎng)設(shè)法設(shè)法找到它們。我們正在使用加載=“懶惰”，允許瀏覽器決定是否應(yīng)推遲加載圖像。

我們將把兩個元素都包含在一個元素中，以便我們標(biāo)記反映這兩個圖像之間的關(guān)係，並將它們組合在一起：

 <figud>
  
  <svg xmlns="“" http: viewbox="“">
     
  </svg>
  
  <img src="%E2%80%9C" ... alt="“" loading="“" lazy>
</figud>

我們還需要解決此效果的一些可訪問性問題。更具體地說，我們需要為喜歡瀏覽網(wǎng)絡(luò)的用戶而沒有動畫和使用屏幕讀取器瀏覽Web的用戶進(jìn)行改進(jìn)。

使SVG元素可訪問需要大量其他標(biāo)記。此外，如果我們要刪除過渡，我們將不得不覆蓋相當(dāng)多的CSS屬性，如果我們的選擇器特異性不一致，可能會導(dǎo)致問題。幸運的是，我們新添加的常規(guī)圖像具有出色的可訪問性功能，可以輕鬆地作為無動畫瀏覽網(wǎng)絡(luò)的用戶的替代品。

 <figud>
  
  <svg xmlns="“" http: viewbox="“" aria true>
    
  </svg>

  
  <img src="%E2%80%9C" ... alt="“" loading="“" lazy>
</figud>

我們需要通過添加aria-hidden =“ true”來隱藏輔助設(shè)備中的SVG元素，我們需要更新我們的CSS，以包括偏愛的動態(tài)媒體查詢。我們包含在沒有減少運動偏好的情況下隱藏用戶的後備圖像，同時將其用於屏幕讀取器等輔助設(shè)備。

 @Media（偏愛降低：無偏愛）{
.Fallback-image {
  剪輯：rect（0 0 0 0）; 
  剪輯路徑：插圖（50％）；
  身高：1px;
  溢出：隱藏；
  位置：絕對；
  白色空間：nowrap; 
  寬度：1px;
  } 
}

@Media（預(yù)先減少的動作）{
  。圖像 {
    顯示：無；
  }
}

這是改進(jìn)後的結(jié)果：

請注意，這些改進(jìn)不會改變沒有偏愛動機偏好集或不使用屏幕讀取器的用戶的效果和行為。

那是一個包裹

開發(fā)人員對夾子路徑CSS屬性和新樣式可能性的路徑選項感到興奮，但是許多人感到不滿以發(fā)現(xiàn)這些值僅支持像素值。這不僅意味著該功能沒有響應(yīng)，而且嚴(yán)重限制了我們要使用的用例的數(shù)量。

我們將有趣的圖像彈出懸停效果轉(zhuǎn)換為使用剪輯路徑：路徑為SVG元素，該元素利用 svg元素的響應(yīng)能力來實現(xiàn)同一元素。但是這樣做，我們引入了一些SEO和可訪問性問題，我們設(shè)法處理了一些額外的標(biāo)記和後備圖像。

感謝您抽出寶貴的時間閱讀本文！讓我知道這種方法是否使您了解如何實現(xiàn)自己的效果，以及您是否對如何以不同的方式處理這種效果有任何建議。

以上是讓我們使用SVG剪輯路徑創(chuàng)建圖像彈出效果的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！