在一个盒子里面再放一个盒子，里面的盒子沿着外面盒子边缘运动，用js写

下来该怎么实现？

您好！很高兴为您解答问题。针对您的问题，可以使用JavaScript中的CSS3动画来实现盒子的移动效果。具体代码实现如下：

HTML代码：

<div class="box1">
  <div class="box2"></div>
</div>

CSS代码：

.box1 {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  75% {
    top: 100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
  }
}

解释一下上面的代码。首先，在HTML代码中，我们创建了两个div元素，分别是.box1和.box2，其中.box2为.box1的子元素。.box1表示外层盒子，样式设置overflow: hidden用于隐藏子元素的溢出部分。.box2表示内层盒子，样式设置position: absolute用于定位元素，以便实现动画效果。另外，我们给.box2元素设置了名为move的动画。

接下来，我们给.box2元素设置了一个名为move的动画。关于CSS3动画的使用方法可以参考这里。具体来说，我们在@keyframes中定义了动画的关键帧，0%表示动画的开始时间，100%表示动画的结束时间。在这个动画中，我们让.box2元素沿着外层盒子的边缘做一个圆形运动。具体来说，我们首先将元素的top和left都设为0，表示元素位于外层盒子的左上角。后面的25%时间内，我们将元素的left设置为100%，相当于将元素移动到了外层盒子的右边，但是顶部仍然在外层盒子的顶部不动。以此类推，在不同的时间内设置不同的top和left值，即可实现沿着边缘运动的效果。

最后，我们将.box2元素设置为无限循环动画，即animation: move 5s linear infinite;。其中，5s表示动画的持续时间，线性（linear）表示动画的速度为“匀速运动”，infinite表示动画循环无限次数。

希望能够帮助到您！