如何保持 div 中的元素独立于它的 CSS3 动画？

Question

我有一个使用 CSS3 的动画 cog，但我希望其中的文本保持静止。将位置更改为绝对或固定不起作用，我不知道如何继续。

http://jsfiddle.net/kJf3Y/

我的 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>

我的 CSS 是：

.port {
width: 330px;
height: 330px;
margin: 100px;
float: left;
background-color: #EFEFEF;
color: #000;
border-radius: 100%;
border: 15px dashed #FFFFFF;
/* box-shadow: 0 0 50px #000; */
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 30s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 30s;
-webkit-animation-name: rotate; 
-webkit-animation-duration: 30s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate; 
-moz-animation-duration: 30s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

.portTitle {
font-size: 30px;
text-align: center;
}

.portText {
   margin: 0 auto;
}

Answer 1

我认为最好的解决方案是在 .port 类中创建一个具有绝对定位和负 z-index 的新元素，并只为该元素而不是整个容器设置动画。

所以这些是要遵循的步骤。

为动画创建一个新元素

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

删除动画

还要确保.port有一个相对定位，只是为了作用域里面的绝对定位元素。

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

为新元素设置动画和样式

元素没有高度和宽度，因为它会覆盖父元素的宽度，因为top、right、bottom和left设置为零。 z-index 值是为了让元素留在后面。

.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 */
}

我用这些更改更新了你的演示。