用css做一个小球融入大盒子动画效果

好的，以下是一个简单的实现方法：

HTML部分：

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

CSS部分：

.container {
  width: 500px;
  height: 500px;
  background-color: #f2f2f2;
  position: relative;
}

.ball {
  width: 50px;
  height: 50px;
  background-color: #ff9900;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ball-in 2s ease-in-out forwards;
}

@keyframes ball-in {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

在这个例子中，我们使用了 CSS3 动画来实现小球缓慢地融入大盒子的效果。关键是使用了 `transform` 属性，将小球的初始大小设置为 0.2，然后在动画中逐渐放大到 1.2，最后回到 1 的大小，使得小球看起来像是逐渐融入了大盒子中。同时，我们使用了 `forwards` 属性来保持动画完成后的状态，即小球停留在大盒子中央。