javascript - 像这个例子跳过去

Question

这是我的尝试 http://codepen.io/anon/pen/hKzfl关于我正在尝试做的事情。我想在圆圈上制作一个位置不变的球，即不旋转。主要目的是从主球中逃脱恒定球。如果从我的 fiddle 旋转的主球接触到任何一个恒定的球，那么它应该结束。每个球逃脱一分。我不能在圆圈上放置一个恒定的球。

这是我喜欢做的一个例子:http://www.lessmilk.com/9/

<div class="circle">
  <div class="ball_blue"></div>
  <div class="ball_red"></div>
  <div class="ball_green"></div>
  <div class="ball_violet"></div>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@keyframes rot {
  from {
    transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
  }
  to {
    transform: rotate(360deg)
      translate(-150px) 
      rotate(-360deg);
  }
}

.circle {
  border:1px solid grey;
  position: relative;
  width:300px;
  height:300px;
  margin:25px auto;
  border-radius:50%;
}

.ball_blue {
  width: 40px;
  height: 40px;
  position: absolute;
  top:50%;
  left:50%;
  margin-top: -20px;
  margin-left: -20px;
  background:blue;
  border-radius:50%;
  font-size: 100px;
  animation: rot 3s infinite linear;
}

.ball_red {
  width: 20px;
  height: 20px;
  position: absolute;
  background:red;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -10px;
  margin-left: -10px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: -20px;
}

.ball_green {
  width: 20px;
  height: 20px;
  position: absolute;
  background:green;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -150px;
  margin-left: -150px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: 65px;
}


.ball_violet {
  width: 20px;
  height: 20px;
  position: absolute;
  background:violet;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -150px;
  margin-left: -150px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: 215px;
}

Answer 1

你正在根据它的中心移动蓝球(用动画中的translate)所以你需要考虑球的半径来放置它圈外..

@keyframes rot {
  from {
    transform: rotate(0deg)
               translate(-170px); /*from -150px*/
  }
  to {
    transform: rotate(-360deg)
               translate(-170px); /*from -150px*/
  }
}

演示在 http://codepen.io/gpetrioli/pen/Lcbgt