CSS 在悬停时将元素从中心填充

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 在悬停时将元素从中心填充。这是一个常见的效果，可以为网站或应用程序的用户界面增添一些动态感，并吸引用户的注意力。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用绝对定位和负边距

我们可以使用CSS的绝对定位和负边距技术来实现将元素从中心填充的效果。首先，我们需要将要填充的元素使用绝对定位的方式进行定位。然后，我们可以使用负边距来将元素从中心向四个方向扩张。

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
}

.container:hover .box {
  width: 100%;
  height: 100%;
  margin: -100px;
  background-color: orange;
}

在上面的示例中，我们创建了一个包含容器和一个待填充的盒子的结构。容器使用相对定位，宽度为300px，高度为200px。盒子则使用绝对定位，通过top: 50%和left: 50%将其定位到容器的中心位置。translate(-50%, -50%)使其在垂直和水平方向上保持居中。

在悬停状态下，我们通过设置盒子的宽度和高度为100%来使其从中心扩展到整个容器。通过设置负的边距为盒子的一半高度和宽度，在悬停时实现从中心填充的效果。

使用transform和transition属性

除了使用绝对定位和负边距，我们还可以使用CSS的transform和transition属性来实现元素从中心填充的效果。transform属性可以用于平移、旋转和缩放元素，而transition属性可以添加过渡效果，使变化更加平滑。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightblue;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: orange;
  transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
}

.container:hover .box {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

在上面的示例中，我们使用了相同的HTML结构，但是增加了一个overflow: hidden;的样式来隐藏超出容器的部分。盒子的初始状态是宽度和高度为0，通过translate(-50%, -50%)使其在容器的中心。在悬停时，我们通过设置盒子的宽度和高度为100%来将其从中心填充到整个容器。同时，通过调整top和left属性，将其定位到容器的左上角。

使用伪元素实现填充效果

另一种实现元素从中心填充的方法是使用CSS的伪元素。伪元素是一个不存在于DOM中的虚拟元素，可以通过CSS进行样式设置。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightblue;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: orange;
  transition: width 0.3s, height 0.3s;
}

.container:hover::before {
  width: 100%;
  height: 100%;
}

在上面的示例中，我们使用::before伪元素来创建填充效果。使用绝对定位将伪元素定位到容器的中心，然后通过width和height属性设置宽度和高度为0。在悬停时，通过设置宽度和高度为100%，实现了从中心填充的效果。

这种方法相比于前面的方法更加简洁，且不需要额外的HTML结构。但需要注意的是，伪元素无法直接访问，无法添加事件监听器。