使用CSS从中间展开div而不是仅从顶部和左侧展开

使用CSS从中间展开div而不是仅从顶部和左侧展开

关键是通过公式转换边距。如果过渡，则有一个“摆动”在过渡期间很烦人。

编辑添加选项

选项1 ：在其周围保留的空间中扩展

#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; }

选项2 ：扩展其周围的元素：

#square {    width: 10px;    height: 10px;    margin: 0;     -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: 110px;    height: 110px;    margin: -50px; }

选项3 ：在流程中扩展之前的元素，并在其之后移动元素：

#square {    width: 10px;    height: 10px;    margin: 0;    position: relative;    top: 0;    left: 0;    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;    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;}

附加的非平方示例

有人评论说，这不适用于非正方形（相同的宽度/高度），但这仅意味着在过渡期间必须针对每个方向进行不同的调整。因此，这里是从矩形开始的
选项2（带有非正方形）
，宽度在过渡期间是高度的两倍（因此甚至改变了矩形形状）：扩展其周围的元素

#rectangle {    width: 110px;    height: 10px;    margin: 0;     -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;}#rectangle:hover {    width: 310px;    height: 110px;    margin: -50px -100px; }

如果

width

只是也改变了100像素（即从110像素更改为210像素），那么只要a

margin: -50px

仍然可以使用。