css - 如何使这个简单的 CSS 动画起作用？ (轨道圈)

Question

我正在尝试学习如何创建多个圆圈围绕中心的另一个圆圈的 CSS 动画(我只需要它在 Chrome 中工作)

代码笔: https://codepen.io/anon/pen/ZxvBve?editors=1100

我无法让它们在不同的平面和相对于观察者的不同 Angular 运行。我不确定最简单和最佳的方法是什么。我应该使用 rotate() 还是其他什么？

Answer 1

我修改了您的示例，如下所述。它允许电子的交叉运动。我认为如果您以其他方式调整 movementLeft 和 movementRight 中的左值、右值和上值，您可以根据需要获得其他 Angular :

CSS:

html, body {
  height: 100%;
  background: #222;
}

#atom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
}

#nucleus {
    height: 10px;
    width: 10px;
  position: absolute;
    background: #999;
    border-radius: 100%;
}


.electron1 {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  -webkit-animation: movementLeft 2s ease-in-out infinite, size 2s linear infinite;
}

.electron2 {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  -webkit-animation: movementRight 2s ease-in-out infinite, size 2s linear infinite;
}

@-webkit-keyframes movementLeft {
  0% { left: -150px; top: -150px }
  50% { left: 150px; top: 150px}
  100% { left: -150px; top:-150px }
}

@-webkit-keyframes movementRight {
  0% { right: -150px; top: -150px }
  50% { right: 150px; top: 150px}
  100% { right: -150px; top:-150px }
}

@-webkit-keyframes size {
  0% { transform: scale(1) }
  25% { transform: scale(2) }
  75% { transform: scale(1) }
}

HTML:

<div id="atom">
  <div id="nucleus"></div>
  <div class="electron1"></div>
  <div class="electron2"></div>
</div>

    html, body {
      height: 100%;
      background: #222;
    }
    
    #atom {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.3);
    }
    
    #nucleus {
    	height: 10px;
    	width: 10px;
      position: absolute;
    	background: #999;
    	border-radius: 100%;
    }
    
    
    .electron1 {
      width: 20px;
      height: 20px;
      position: absolute;
      background: #fff;
      border-radius: 100%;
      -webkit-animation: movementLeft 2s ease-in-out infinite, size 2s linear infinite;
    }
    
    .electron2 {
      width: 20px;
      height: 20px;
      position: absolute;
      background: #fff;
      border-radius: 100%;
      -webkit-animation: movementRight 2s ease-in-out infinite, size 2s linear infinite;
    }
    
    @-webkit-keyframes movementLeft {
      0% { left: -150px; top: -150px }
      50% { left: 150px; top: 150px}
      100% { left: -150px; top:-150px }
    }
    
    @-webkit-keyframes movementRight {
      0% { right: -150px; top: -150px }
      50% { right: 150px; top: 150px}
      100% { right: -150px; top:-150px }
    }
    
    @-webkit-keyframes size {
      0% { transform: scale(1) }
      25% { transform: scale(2) }
      75% { transform: scale(1) }
    }

    


    <div id="atom">
      <div id="nucleus"></div>
      <div class="electron1"></div>
      <div class="electron2"></div>
    </div>