Question

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

以下是我喜欢做的一个例子：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

演示

跳过这个例子

1 个答案: