如何向图像添加 CSS Reveal 动画

在本文中，我们将探讨一些 CSS 技巧，这些技巧使我们能够创建悬停动画来显示图像。 Backward Skip 10s Play Video Forward Skip 10s 我们可能会想“嗯，这是一个简单的任务！在您制作动画的图像上方添加一个额外的元素，就完成了。” 确实如此，但我们不会使用任何额外的元素或伪元素。我们将仅使用该元素进行工作<img>。而已！ 这听起来可能是不可能的，因为仅使用图像元素，我们不能在它上面添加任何东西。事实上，我们不会有任何高于它的东西，但我们会伪造它！ 下面是我们将要一起探索的 CodePen 演示。 Learn to Code with JavaScript 很酷，对吧？仅使用几行代码且没有额外元素的显示动画。跟随我，让我们剖析代码背后的魔力。 初始配置 我们首先定义图像的大小到目前为止没有什么复杂的。为简单起见，我们使用方形图像，但它可以是任何尺寸的图像。

明确设置并且 height不使用aspect-ratio或保留图像的默认大小非常重要。这对于我们的动画来说是强制性的，稍后我们会看到原因。 还要注意使用box-sizing: border-box，这也很重要。目前它没有任何作用，但让我们进入下一步以了解为什么需要它。 添加一些填充 如果我们在 印度手机号码列表 定义了固定尺寸并使用过的图像中添加一些填充，会发生什么box-sizing: border-box？咱们试试吧！ Learn to Code with JavaScript 正如我们在上面的演示中看到的，图像被压扁了。我们100px在左侧添加填充，这只会100px为图像（内容区域）留下空间。这就是 的效果box-sizing: border-box。 正如MDN所解释的： border-box告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素，则这 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。



现在，想象一下填充等于宽度的情况。是的，图像将会消失！在下面的演示中，将鼠标悬停在图像上并查看结果。 上面的 demo 有两点需要特别注意。填充可以是动画的，这很酷，我们可以看到之前用来定义图像大小的 CSS 变量的重要性。我们使用相同的变量来定义填充，因此不必重复相同的值。 添加背景颜色 让我们以前面的示例为例，为其添加背景。 Learn to Code with JavaScript 我们现在开始有所进展了。背景将逻辑上覆盖整个元素。我们在图像下方看不到它（除非我们使用具有透明度的图像），但我们在填充区域上看到它。 我们的目标是显示图像，所以让我们首先设置填充，然后将其0悬停 - 与我们当前所拥有的相反。 这仍然不是我们的目标，但我们已经越来越接近了！我们只缺少一种成分来使我们的“假”揭示动画变得完美！ 添加对象配合和对象位置 缺少的部分是避免图像被挤压，这是最后的技巧。