如何将此 div 转换为底部并添加一些随机弹出方块

Question

我不知道，知道如何将这个div转换为底部。而且我不知道我怎样才能在随机方向上生成弹出方块(简单的div(，这些方块将在 50 毫秒后消失。

我试图将这个盒子漂浮到底部，但没有帮助。

$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});

.field {
height: 340px;
width: 200px;
}
.box {
background-color: #218D9B;
height: 320px;
width: 160px;
float: bottom;
background-image: url("img/tree.png");
background-size: 100%;
}
.transform {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
}
.transform-active {
height: 0px;
width: 160px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<div class="box transform"></div>
</div>
<input type="button" id="button" value="Click Me" />

我期待木头藏在地下的效果。

Answer 1

为了将div 高度转换为底部，您可以使用定位。 将position: relative添加到父元素，然后您可以使用position: absolute和bottom: 20px编辑 box 元素。

.field {
height: 340px;
width: 200px;
position: relative;
}
.box {
background-color: #218D9B;
height: 320px;
background-image: url(img/tree.png);
background-size: 100%;
bottom: 20px;
position: absolute;
}

根据情况，另一种解决方案是使用transform: scale()而不是height进行动画处理。
您只能垂直缩放并设置transform-origin: bottom。

.box {
background-color: #218D9B;
height: 320px;
width: 160px;
background-image: url(img/tree.png);
background-size: 100%;
transform-origin: bottom;
}
.transform-active {
transform: scale(1, 0);
width: 160px;
}