如何添加CSS向您的图像显示动画-css教程-PHP中文网

巧妙运用CSS实现图片悬停揭露动画效果，无需额外元素！本文将深入探讨如何仅使用<img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="How to Add a CSS Reveal Animation to Your Images "><code><img src="https://img.php.cn/upload/article/000/000/000/173906107393958.jpg" alt="How to Add a CSS Reveal Animation to Your Images ">

核心要点：

仅需<img alt="如何添加CSS向您的图像显示动画" >
核心要点：object-fit: coverobject-position: right
元素即可实现CSS揭露动画，无需任何额外元素或伪元素。object-fit: none

和

属性用于保持图片的长宽比，并防止动画过程中图片移动。<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中文网其他相关文章！