如何使用 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中文網其他相關文章！