巧妙運(yùn)用CSS實(shí)現(xiàn)圖片懸停揭露動(dòng)畫(huà)效果，無(wú)需額外元素！本文將深入探討如何僅使用<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 ">

核心要點(diǎn)：

• 僅需<img alt="如何添加CSS向您的圖像顯示動(dòng)畫(huà)" >
• 核心要點(diǎn)：object-fit: coverobject-position: right
僅需
• 元素即可實(shí)現(xiàn)CSS揭露動(dòng)畫(huà)，無(wú)需任何額外元素或偽元素。object-fit: none
動(dòng)畫(huà)的關(guān)鍵在于：為圖片添加padding，然后在懸停時(shí)將其逐漸減小到零，同時(shí)使用背景顏色營(yíng)造圖片被揭露的視覺(jué)效果。

和

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

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

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

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

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

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

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

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

或保留圖片的默認(rèn)大小。這對(duì)于我們的動(dòng)畫(huà)是必須的，稍后我們將解釋原因。還要注意

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

如果我們?yōu)橐粋€(gè)已定義固定尺寸并使用的圖片添加一些填充，會(huì)發(fā)生什么？讓我們?cè)囋嚕???>CodePen演示鏈接

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

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

在上面的演示中，有兩點(diǎn)需要注意。填充可以進(jìn)行動(dòng)畫(huà)處理，這很酷，我們還可以看到前面使用的CSS變量在定義圖片大小時(shí)的重要性。我們使用了相同的變量來(lái)定義填充，因此不必重復(fù)相同的值。

添加背景顏色：

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

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

這仍然不是我們想要的效果，但我們?cè)絹?lái)越接近了！我們只需要一個(gè)成分就能使我們的“偽造”揭露動(dòng)畫(huà)完美！

添加object-fit和object-position：

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

這里有兩點(diǎn)很重要：

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

讓我們?cè)谙旅娴难菔局袊L試一下。CodePen演示鏈接

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

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

以下是我們使用的CSS：

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

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

更多揭露動(dòng)畫(huà)：

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

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

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

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

結(jié)論：

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

我將讓您繼續(xù)探索并嘗試找到更多精美的動(dòng)畫(huà)！

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