当用户将鼠标悬停在 div 上时，我试图将 div 向上设置动画。
我可以对 div 进行动画处理，使其变大，但动画是向下发生的。我试图将 div 的底部保持在同一位置，并平滑地向上增加 div 的大小。
请参阅 jsfiddle 这里 https://jsfiddle.net/x3cL1cpt/演示我的代码当前正在做什么。
请看下面的代码：
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>
您可以使用以下方法执行此操作transform:scaleY()并设置transform-origin to bottom。我还放了一个margin-top:100px，看看效果更好。您也可以使用transition使比例更平滑
您还需要缩小文本。
看这里：jsfiddle https://jsfiddle.net/3vm44Ljm/3/
您需要在缩放 div 的同时将文本缩放回其原始状态。所以如果你将 div 缩放 2 倍。您需要将文本缩小 1/2 ，如果缩放 3 倍，则相同...缩小 1/3
在这种情况下，您放大.content by 1.5所以你需要将里面的文本缩小 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66);
transform-origin: top;
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
