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

我不确定这是否可行,但是我认为使用CSS转换创建一个效果是很酷的,其中div从其中心扩展到预定的高度和宽度,而不仅仅是从左上角扩展。

例如,如果我有demo

<div id="square"></div>

和(为简洁起见,省略了供应商前缀)

#square {

width: 10px;

height: 10px;

background: blue;

transition: width 1s, height 1s;

}

#square:hover {

width: 100px;

height: 100px;

}

悬停时,这会将方块向右扩展并向下扩展至100px。

我知道我可能会使用transform:scale(x)demo,但这并不能真正为我提供非常“像素完美”的布局(因为它基于百分比),并且也不会影响周围的布局(文档流中的元素会根据其大小进行调整)。除了要相应地影响文档流之外,这基本上就是我要执行的操作。

没有人知道 吗?

回答:

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

:在其周围保留的空间中扩展

#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) */

}

:扩展其周围的元素:

#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 */

}

:在流程中扩展之前的元素,并在其之后移动元素:

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

}

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

#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仍然可以使用。

以上是 使用CSS从中间展开div而不是仅从顶部和左侧展开 的全部内容, 来源链接: utcz.com/qa/433925.html

回到顶部