css - 如何让 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;
}

为新元素设置动画和样式

元素没有高度和宽度，因为它会覆盖父元素的宽度，因为顶部、右侧、底部和左侧设置为零。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 */
}

我使用此更改更新了您的演示。