怎么实现用JavaScript控制盒子逐渐向上移动并逐渐消失

你可以使用CSS3的动画和JavaScript来实现盒子逐渐向上移动并逐渐消失的效果。

首先，你可以使用CSS3的动画来让盒子逐渐向上移动。例如，使用`translateY()`函数来控制盒子在Y轴方向上的移动。这里我们设置一个动画名为“moveUp”的动画，让盒子在3秒钟内逐渐向上移动100像素。

.box {
  position: absolute;
  bottom: 0;
  animation-name: moveUp;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes moveUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

然后，我们可以使用JavaScript来控制盒子逐渐消失。例如，使用`opacity`属性来控制盒子的透明度，让它在3秒钟内逐渐变为0。

var box = document.querySelector('.box');
box.style.opacity = 1;

setTimeout(function() {
  box.style.opacity = 0;
}, 3000);

最后，将这两部分代码组合起来，就可以实现盒子逐渐向上移动并逐渐消失的效果了。

<div class="container">
  <div class="box">Hello World!</div>
</div>

<style>
.box {
  position: absolute;
  bottom: 0;
  animation-name: moveUp;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes moveUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}
</style>

<script>
var box = document.querySelector('.box');
box.style.opacity = 1;

setTimeout(function() {
  box.style.opacity = 0;
}, 3000);
</script>