CSS动画圈 - 停止旋转中心内容

Question

我一直试图改变{3}} CSS3动画圈子的例子（this原创），以便中心的箭头不会旋转。但是，我唯一能让它变为静止的方法是从三个圆圈中移除动画效果（＃outer-circle，＃inner-circle，＃center-circle），但这样可以消除很酷的旋转效果。

圆圈位于彼此之内，并且随着下面的CSS旋转（到cssdeck.com的链接更清晰）

-webkit-animation:turning_cw 5s infinite;
-moz-animation:turning_cw 5s infinite;
animation:turning_cw 5s infinite;

有没有人知道如何让箭头在中心保持静止？

Answer 1

一种方法是将嵌套分开并堆叠元素，然后相应地定位它们。

我根据需要在position:absolute;设置中定位了每个项目，然后从嵌套中删除了div：

HTML

<div id="container">    
  <div id="main">
    <div id="outer-circle"></div>
    <div id="inner-circle"></div>
    <div id="center-circle"></div>
    <div id="content">
      &darr;
    </div>
  </div>

相关CSS：

#content {
  position:absolute;
    top: 220px;
    left: 350px;
}

#center-circle {
  position:absolute;
    top:190px;
    left: 320px;
}

#inner-circle {
  position:absolute;
    left: 300px;
    top: 170px;
}

DEMO