CSS动画圆-停止旋转中心内容 [英] CSS Animated Circles - Stop center content from rotating

问题描述

我一直在尝试更改CSS3动画圈子的此示例(由 Rishabh )，以使中心的箭头不会旋转.但是，我唯一能得到的方法就是从三个圆圈(#outer-circle，#inner-circle，#centre-circle)中删除动画效果，但这摆脱了酷炫的旋转效果.

这些圆圈相互定位，并与下面的CSS一起旋转(更清晰地指向cssdeck.com的链接)

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

有人知道让箭头居中静止的方法吗?

解决方案

一种方法是将嵌套拆开并堆叠元素，然后相应地放置它们.

我根据需要在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;
}

演示

I've been trying to alter this example of CSS3 animated circles (original by Rishabh) so that the arrow in the centre does not rotate. However, the only way I can get it be still is to remove the animation effect from the three circles (#outer-circle, #inner-circle, #centre-circle), but this gets rid of the cool spinning effect.

The circles are positioned within each other, and are rotating with the CSS below (the link to cssdeck.com is clearer)

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

Does anyone know a way of getting the arrow in the centre to stay still?

解决方案

one method would be to break the nesting apart and stack the elements, and then position them accordingly.

I positioned each of the items as needed within the position:absolute; settings adn then broke out the divs from the nesting:

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>

RELEVANT 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

这篇关于CSS动画圆-停止旋转中心内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！