使div更大，并在悬停时向上动画更大的部分 [英] make div bigger and animate bigger section upwards on hover

问题描述

当用户将鼠标悬停在div上时，我正在尝试为div设置动画.

I am trying to animate a div upwards when a user hovers on the div.

我可以使div变大，但是动画会向下移动.我正在尝试使div的底部保持在同一位置，并进行平滑的动画处理，以增大div的大小.

I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.

在此处查看jsfiddle，演示我的代码当前正在做什么.

See jsfiddle here which demonstrates what my code is currently doing.

请参见下面的代码:

.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设置为bottom.我还设置了margin-top:100px来更好地查看效果.您也可以使用transition使比例更平滑

You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother

您还需要缩小文本.

查看此处: jsfiddle

See here: jsfiddle

您需要在缩放div的同时将文本缩放回其原始状态.因此，如果将div缩放2倍.您需要使用1/2来缩放文本，如果缩放3倍，则需要相同...用1/3来缩放

You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3

在这种情况下，您将.content放大为1.5，因此需要将内部文本缩小1/1.5 = 0.66

In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66

代码:

.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)
}

.content:hover {
  transform: scaleY(1.5);
  transform-origin: bottom;
}

<div class="box">
  <div class="content">
    <p>
      TEST
    </p>
  </div>
</div>

这篇关于使div更大，并在悬停时向上动画更大的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！