如何使div中的元素独立于它'；什么是CSS3动画？

我有一个小动画齿轮使用CSS3，但我希望它里面的文字保持静止。将位置更改为绝对或固定不起作用，我不确定如何继续

我的HTML是：

<div class="port">
<h1 class="portTitle">Test</h1>
<p id="portText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec   lectus  ipsum, pulvinar vel molestie facilisis, posuere ut lectus. Aliquam posuere turpis ac dolor dapibus sed rhoncus neque blandit. Mauris nec pellentesque mi. Aenean congue scelerisque pulvinar. Sed a velit vitae quam pulvinar pellentesque. Aliquam erat volutpat. Nullam a sapien felis, eu auctor ante. Pellentesque elementum egestas lectus, sit amet scelerisque nisl rutrum ut. Duis fermentum tortor nec neque placerat in blandit dui consequat. Suspendisse potenti. Nulla sit amet mauris vel lorem molestie fermentum.</p>
</div>

---

我认为最好的解决方案是在

.port

类中创建一个具有绝对位置和负z索引的新元素，并仅对该元素而不是整个容器设置动画

因此，以下是要遵循的步骤

为动画创建新元素 为新元素设置动画和样式 元素没有高度和宽度，因为它将覆盖父元素的宽度，因为顶部、右侧、底部和左侧设置为零<代码>z索引值用于元素保留

.port_animation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #EFEFEF;
  color: #000;
  border-radius: 100%;
  border: 15px dashed #FFFFFF;
  /* And all the animation stuff also here */
}

我用这些更改更新了您的演示

---

谢谢！想了很久，觉得可能是这样的。

<div class="port">
  <div class="port_animation"></div>
  <h1 class="portTitle">Test</h1>
  <p id="portText"></p>
</div>

.port {
  position: relative;
  width: 330px;
  height: 330px;
  margin: 100px;
  color: #000;
}

.port_animation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #EFEFEF;
  color: #000;
  border-radius: 100%;
  border: 15px dashed #FFFFFF;
  /* And all the animation stuff also here */
}