幾週前，我偶然發(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)機(jī)自動拾取，我們可以在圖像站點地圖中提供指向這些圖像的鏈接，以確保爬網(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)不會改變沒有偏愛動機(jī)偏好集或不使用屏幕讀取器的用戶的效果和行為。

那是一個包裹

開發(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)文章！