巧妙運用CSS實現(xiàn)圖片懸停揭露動畫效果，無需額外元素！本文將深入探討如何僅使用<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
僅需
• 元素即可實現(xiàn)CSS揭露動畫，無需任何額外元素或偽元素。 object-fit: none
動畫的關(guān)鍵在於：為圖片添加padding，然後在懸停時將其逐漸減小到零，同時使用背景顏色營造圖片被揭露的視覺效果。

和

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

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

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

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

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

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

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

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

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

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

如果我們?yōu)橐粋€已定義固定尺寸並使用的圖片添加一些填充，會發(fā)生什麼？讓我們試試！ CodePen演示鏈接

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

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

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

添加背景顏色：

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

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

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

添加object-fit和object-position：

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

這裡有兩點很重要：

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

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

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

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

以下是我們使用的CSS：

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

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

更多揭露動畫：

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

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

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

在這兩種情況下，我們都有揭露動畫，但是當(dāng)使用object-fit: none時，圖片不會調(diào)整大小，並保持其默認(rèn)大?。?00x500），這不好。 object-fit: cover只保持比例，並將調(diào)整圖片大小以適應(yīng)框的尺寸。

結(jié)論：

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

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

以上是如何添加CSS向您的圖像顯示動畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！