如何使用 CSS 过渡实现 DIV 元素的居中扩展？

使用 CSS 从中心扩展 DIV

在这个问题中，我们的目标是创建一个 div 从中心扩展的效果，而不是典型的从左上角展开。虽然诸如scale()之类的CSS变换可以实现这种效果，但它们缺乏像素精度，并且不会影响周围的布局。

实现这种行为的关键在于过渡边距。通过计算特定的边距值，我们可以使 div 从中心展开，而不干扰文档流。

中心展开选项

选项 1 ：在预留空间内扩展

<code class="css">#square {
  margin: 100px;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 100px;
  height: 100px;
  margin: 55px;
}</code>

在此选项中，div 在其周围的预先保留的空间内扩展。边距过渡的计算方式为初始边距减去宽度/高度变化的一半。

选项 2：对周围元素进行扩展

<code class="css">#square {
  margin: 0;
  transition: width 1s, height 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  margin: -50px;
}</code>

使用此选项， div 扩展到所有周围的元素。边距过渡计算为 0 减去宽度/高度变化的一半。

选项 3：扩展并移动其他元素

<code class="css">#square {
  position: relative;
  transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
#square:hover {
  width: 110px;
  height: 110px;
  top: -50px;
  left: -50px;
  margin-right: -50px;
  margin-bottom: -50px;
}</code>

此选项允许div 扩展流中的前面的元素，同时移动后续的元素。边距过渡的计算方式与之前的选项类似。

非方形 DIV 的注意事项

上述选项假定为方形 div，但它们也可以应用于对边距计算进行轻微调整的非方形 div。例如，宽度和高度不等的矩形可以使用如下边距进行过渡：

<code class="css">margin: -50px -100px;</code>

总之，通过使用 CSS 过渡操作边距，可以创建一个从中心扩展的 div，根据需要影响周围的布局。

以上是如何使用 CSS 过渡实现 DIV 元素的居中扩展？的详细内容。更多信息请关注PHP中文网其他相关文章！