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