两个 HTML 标题 - 在圆圈中交换位置？ [关闭]答案

【问题标题】：Two HTML headings - swap places in circles? [closed]两个 HTML 标题 - 在圆圈中交换位置？ [关闭]
【发布时间】：2017-07-05 09:14:08
【问题描述】：

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

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

【问题讨论】：

你能告诉我们你的代码你到目前为止尝试了什么吗？
请访问help centre 以查看how to ask a good question 以及该站点的on topic 的问题类型
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
jsfiddle.net/exc5m046/14 这是一个例子，但我不知道如何将它们循环移动！
如果你没有别的事可做，除了写这些 cmets - 请不要那样做！没有人需要你的额外垃圾邮件，谈论别人应该问什么或写什么！

标签： javascript html css swap

【解决方案1】：

将标题放置在容器内。使用 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>

【讨论】：

【解决方案2】：

试试setInterval() 功能。就像其他人说的那样。如果你仍然不能让它工作。请输入您的示例代码，我们可以为您提供帮助。

【讨论】：