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

Question

我有两个headings/divs，我需要在5秒后按照图片上的方式换地方。我尝试了一些过渡和类似的方法，但我没有找到如何以循环方式移动元素的方法。

元素的移动必须像 "half circular"。示例代码在评论中。

Answer 1

试试 setInterval() 函数。就像其他人说的那样。如果您仍然无法正常工作。请提供您的示例代码，然后我们可以帮助您。

Answer 2

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

由于延迟，我们不能简单地反转rotate动画，需要添加反转rotateCounter动画。

.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); }
}

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

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

Two HTML headings - swap places in circles?

html

javascript

css

swap