两个HTML标题 - 在圈子中交换位置？

Question

我有两个标题/ div，我需要像照片一样在5秒后改变位置。我尝试了一些过渡和类似，但我没有找到任何地方如何以循环方式移动元素。

元素的移动必须像“半圆形”。示例代码在注释中。

Answer 1

将标题放在容器内。使用CSS动画，您可以旋转容器，并沿另一个方向旋转标题。动画是无限的，所以延迟在动画本身。

由于延迟，我们无法反转rotate动画，我们需要添加反向rotateCounter动画。

＆＃13;

＆＃13;

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  animation: rotate 12s linear infinite;
}

.heading {
  position: absolute;
  animation: rotateCounter 12s linear infinite;
}

.heading1 {
  top: 0;
  left: 0;
}

.heading2 {
  right: 0;
  bottom: 0;
}

@keyframes rotate { 
  8% { transform: rotate(-180deg); } 
  50% { transform: rotate(-180deg); }
  58% { transform: rotate(-360deg); } 
  100% { transform: rotate(-360deg); }
}

@keyframes rotateCounter { 
  8% { transform: rotate(180deg); } 
  50% { transform: rotate(180deg); }
  58% { transform: rotate(360deg); } 
  100% { transform: rotate(360deg); }
}

＆＃13;

<div class="container">
  <h2 class="heading heading1">Heading 1</h2>
  <h2 class="heading heading2">Heading 2</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用setInterval()功能。就像其他人说的那样。如果你仍然无法让它发挥作用。请输入您的示例代码，然后我们可以帮助您。