如何使用 CSS 過渡從中心展開 Div？

如何使用CSS 從中心展開Div 而不僅僅是頂部和左側

可以達到展開div 的預期效果從其中心使用CSS，但需要注意的是，確切的方法將取決於所需的上下文和互動。這裡有一個可以使用的選項：

透過利用邊距上的過渡屬性，您可以建立從中心擴展 div 的效果。最初在 div 周圍設置較大的邊距，當使用者將滑鼠懸停在其上方時，將邊距減小 div 擴展到的寬度和高度的一半。

例如，假設我們有一個初始寬度的 div高度為 10px，我們希望它在懸停時擴展到 100px。我們將設定以下 CSS：

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

這將建立 div 從中心擴展的效果。請記住，浮動 div 可能會在過渡過程中產生輕微的“擺動”，因此建議將其保持在適當的位置，不要出現任何浮動。

以上是如何使用 CSS 過渡從中心展開 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！