做一个详细的网页动画：使用 HTML、CSS 和 JavaScript 创建交互式的网页动画，例如悬停动画、页面滚动动画、背景动画等。

好的，以下是一个简单的例子：

HTML部分：

<div class="container">
  <div class="box"></div>
</div>

CSS部分：

.container {
  width: 100%;
  height: 500px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ff8c00;
  transition: all 0.5s ease-in-out;
}

.box:hover {
  transform: rotate(360deg);
}

JavaScript部分：

window.addEventListener('scroll', function() {
  const box = document.querySelector('.box');
  const boxPosition = box.getBoundingClientRect().top;
  const screenPosition = window.innerHeight / 2;

  if (boxPosition < screenPosition) {
    box.classList.add('animate');
  } else {
    box.classList.remove('animate');
  }
});

这个例子包含了悬停动画、页面滚动动画和背景动画。当鼠标悬停在盒子上时，盒子会旋转360度；当滚动到页面中间时，盒子会以动画的形式出现；盒子的背景颜色也会随着鼠标移动而改变。