html - 使用 CSS 顺时针移动对象周围的元素

Question

这里给出这个例子

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
}

#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

#box1 {
  animation: moveBox1 5s infinite;
}

#box2 {
  animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
  from {
    /* currentPosition */
  }
  25% {
    /* right top corner */
  }
  50% {
    /* right bottom corner */
  }
  75% {
    /* left bottom corner */
  }
  to {
    /* start position */
  }
}

@keyframes moveBox2 {
  from {
    /* currentPosition */
  }
  25% {
    /* left bottom corner */
  }
  50% {
    /* left top corner */
  }
  75% {
    /* right top corner */
  }
  to {
    /* start position */
  }
}

<div id="mainPage">
  <div class="box" id="box1"></div>

  <p id="title">TITLE HERE</p>

  <div class="box" id="box2"></div>
</div>

我想先将 box2 定位到右侧。

执行此操作后，两个框应围绕文本顺时针移动。我尝试从动画语法开始，但我不知道如何定位它们以便它们可以在其他元素周围移动。

所以 box1 应该有这个路径:

• 从左上开始
• 到右上角
• 到右下
• 到左下
• 返回左上角

box2 将具有以下路径:

• 从右下开始
• 到左下
• 到左上角
• 到右上角
• 返回右下

有人可以帮忙吗？

Answer 1

使用转换，您可以实现您的解决方案。

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.box {
  width: 48px;
  height: 30px;
  background: red;
}

#title {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

#box1 {
  animation: moveBox1 5s infinite;
}

#box2 {
  animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
  from {
   transform: translate(0, 0);
  }
  25% {
   transform: translate(350px, 0);
  }
  50% {
    transform: translate(350px, 150px);
  }
  75% {
   transform: translate(0, 150px);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes moveBox2 {
  from {
    transform: translate(350px, 0);
  }
  25% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -150px);
  }
  75% {
     transform: translate(350px, -150px);
  }
  to {
    transform: translate(350px, 0);
  }
}

<div id="mainPage">
  <div class="box" id="box1"></div>

  <p id="title">TITLE HERE</p>

  <div class="box" id="box2"></div>
</div>