小编典典
关键是通过公式转换边距。如果过渡,则有一个“摆动”在过渡期间很烦人。
编辑添加选项
选项1 :在其周围保留的空间中扩展
#square {
width: 10px;
height: 10px;
margin: 100px; /*for centering purposes*/
-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; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}
选项2 :扩展其周围的元素:
#square {
width: 10px;
height: 10px;
margin: 0; /*for centering purposes*/
-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; /* 0 - (110px - 10px [= 100px]) / 2 = -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; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
margin-right: -50px;
margin-bottom: -50px;
}
附加的非平方示例
有人评论说,这不适用于非正方形(相同的宽度/高度),但这仅意味着在过渡期间必须针对每个方向进行不同的调整。因此,这里是从矩形开始的 选项2(带有非正方形) ,宽度在过渡期间是高度的两倍(因此甚至改变了矩形形状):扩展其周围的元素
#rectangle {
width: 110px;
height: 10px;
margin: 0; /*for centering purposes*/
-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; /* initial margin - ((initial margin - width change (or height change))/2) */
}
如果width只是也改变了100像素(即从110像素更改为210像素),那么只要a margin: -50px仍然可以使用。
2020-05-16