如何添加CSS向您的圖像顯示動畫

巧妙運用CSS實現圖片懸停揭露動畫效果，無需額外元素！本文將深入探討如何僅使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images "><code><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" class="lazy" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

• 仅需<img alt="如何添加CSS向您的圖像顯示動畫" >
• 核心要點：object-fit: coverobject-position: right
僅需
• 元素即可實現CSS揭露動畫，無需任何額外元素或偽元素。 object-fit: none
動畫的關鍵在於：為圖片添加padding，然後在懸停時將其逐漸減小到零，同時使用背景顏色營造圖片被揭露的視覺效果。

和

屬性用於保持圖片的長寬比，並防止動畫過程中圖片移動。 <img alt="如何添加CSS向您的圖像顯示動畫" > 通過調整padding方向，可以擴展動畫效果，創建更多變化。 屬性在某些配置中也能創建不同的效果，但需要CSS寬度和高度與圖片的固有尺寸匹配。

本文將探索一些CSS技巧，幫助您創建令人印象深刻的圖片懸停動畫。您可能會想：“這很簡單！在圖片上方添加一個額外元素進行動畫即可。”的確如此，但我們不會使用任何額外元素或偽元素，只用

元素就能實現！這聽起來可能不可思議，因為僅使用圖片元素，似乎無法在其上方添加任何內容。的確，我們不會在圖片上方添加任何內容，而是巧妙地模擬這種效果！以下是一個CodePen演示，展示我們將一起探索的內容：CodePen演示鏈接

是不是很酷？只需幾行代碼，無需額外元素即可實現揭露動畫。讓我們一起深入了解其背後的奧秘。

img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

初始配置：widthheight aspect-ratio首先，定義圖片大小：box-sizing: border-box

目前為止，代碼很簡單。為了簡便起見，我們使用正方形圖片，但也可以使用任何尺寸的圖片。顯式設置和非常重要，不要使用

或保留圖片的默認大小。這對於我們的動畫是必須的，稍後我們將解釋原因。還要注意

的使用，這也是很重要的。目前它沒有效果，但讓我們繼續下一步，了解為什麼需要它。 box-sizing: border-box 添加填充：

<🎜> <🎜>如果我們為一個已定義固定尺寸並使用<🎜>的圖片添加一些填充，會發生什麼？讓我們試試！ <🎜>CodePen演示鏈接<🎜><🎜>

正如我們在上面的演示中看到的，圖片被擠壓了。我們在左側添加了100px的填充，這將只留下100px的空間用於圖片（內容區域）。這就是box-sizing: border-box的效果。正如MDN所解釋的：border-box告訴瀏覽器在您為元素的寬度和高度指定的值中考慮任何邊框和填充。如果您將元素的寬度設置為100像素，則這100像素將包含您添加的任何邊框或填充，內容框將縮小以吸收額外的寬度。

現在，想像一下填充等於寬度的場景。是的，圖片將消失！在下面的演示中，將鼠標懸停在圖片上，查看結果。 CodePen演示鏈接

在上面的演示中，有兩點需要注意。填充可以進行動畫處理，這很酷，我們還可以看到前面使用的CSS變量在定義圖片大小時的重要性。我們使用了相同的變量來定義填充，因此不必重複相同的值。

添加背景顏色：

讓我們採用之前的示例並添加背景。 CodePen演示鏈接

我們開始接近目標了。背景將邏輯上覆蓋整個元素。我們看不到它在圖片下方（除非我們使用透明的圖片），但我們可以在填充區域看到它。我們的目標是揭露圖片，所以讓我們從添加填充開始，然後在懸停時將其設置為0——與我們當前的情況相反。 CodePen演示鏈接

這仍然不是我們想要的效果，但我們越來越接近了！我們只需要一個成分就能使我們的“偽造”揭露動畫完美！

添加object-fit和object-position：

缺失的部分是避免圖片被擠壓，這裡就是最終技巧。我們將使用object-fit和cover值。正如MDN所解釋的：替換內容的大小調整以保持其縱橫比，同時填充元素的整個內容框。如果對象的縱橫比與其框的縱橫比不匹配，則該對象將被裁剪以適應。

這裡有兩點很重要：

• “替換內容的大小調整以保持其縱橫比”。這意味著圖片不會被擠壓，而是會保持其固有比例。我們使用的是正方形圖片，所以它將保持正方形。
• “填充元素的整個內容框……將被裁剪以適應”。圖片應該填充所有內容區域（我們通過添加一些填充來減小的區域），但是如果它不適合在裡面，我們將裁剪它。

讓我們在下面的演示中嘗試一下。 CodePen演示鏈接

看到了嗎？圖片不再被擠壓了！它在內容區域內保持其比例，同時我們添加/刪除填充。好的，所以我們可能認為效果與初始演示不同。圖片移動得很奇怪。沒錯。所以現在我們轉向object-position。默認值為center，因此圖片將始終位於內容區域的中心，並將被裁剪以適應內部。這就是為什麼它隨著動畫移動的原因。接下來我們要做的應該很容易預測。我們將更改位置以確保圖片不會移動。我們將從左側添加填充，因此我們應該使用object-position: right將圖片的位置固定在右側。 CodePen演示鏈接

我們的揭露動畫完成了！我們不需要任何疊加層或圖片上方的額外元素。通過使用簡單的背景顏色以及一些圖片定位技巧，我們使用少量簡單的代碼實現了精美的揭露動畫。我們可以通過調整填充方向和object-position輕鬆更新方向。以下是之前的第一個演示，其中包含四個方向。 CodePen演示鏈接

以下是我們使用的CSS：

img {
  --s: 200px; /* 图片大小 */

  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
}

更多揭露動畫：

我們可以使用相同的想法擴展技巧以創建更多變化。我們可以對兩側甚至所有側添加/刪除填充，而不是從一側添加/刪除填充。 CodePen演示鏈接

如果我們檢查上面演示的代碼，我們不會發現與之前的代碼有很大的區別。我們所做的只是設置不同的填充配置，以創建相同效果的更多變化。在第一個和最後一個示例中，我們使用object-fit: none而不是object-fit: cover有一個技巧。在這些情況下，填充將內容區域的寬度和高度都減小到0，而在所有其他情況下，我們只減小高度或寬度。在這種配置中，cover不起作用，但none可以完成這項工作。 MDN指出：替換內容不會調整大小。

為什麼我們不始終使用none呢？我們可以使用它，而且它有效，但它有一個小缺點。 none將考慮圖片的固有尺寸，因此我們必須使CSS寬度和高度等於固有尺寸才能使技巧生效。另一方面，cover只保持圖片的比例，並將調整圖片大小以適應框的尺寸，因此我們可以安全地為圖片定義任何CSS大小。這是一個比較，以便我們看到區別。 CodePen演示鏈接

在這兩種情況下，我們都有揭露動畫，但是當使用object-fit: none時，圖片不會調整大小，並保持其默認大小（500x500），這不好。 object-fit: cover只保持比例，並將調整圖片大小以適應框的尺寸。

結論：

我希望您喜歡這個小小的CSS實驗。使用簡單的技巧和幾行代碼，我們只用<img alt="如何添加CSS向您的圖像顯示動畫" >元素就實現了一個很酷的揭露動畫。我們還使用相同的代碼結構進行了許多變化。我們可以用這個技巧做更多的事情。我將留給您最後一個例子，其中我在懸停時將黑白圖像轉換為彩色圖像。 CodePen演示鏈接

我將讓您繼續探索並嘗試找到更多精美的動畫！

以上是如何添加CSS向您的圖像顯示動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！