Question

常规信息
我正在玩宾果游戏。目前，我正在尝试创建CSS滚球动画。这个想法是模拟一个球从轮子掉落并使其从右向左滚动。

问题
动画运行正常。但是“插入”位置是相对于div的。因此，该位置会在每个插入的新球上继续向右移动75个像素。

我尝试过的解决方案
-给球一个绝对位置。这样可以解决问题，但是由于关键帧以left: 0%结尾，所以每个球都将覆盖先前的球。这是不可取的。
-查找Javascript解决方案，以查看是否可以以某种方式将关键帧更改为在前一个球上以+ 75px结尾。不幸的是，似乎无法以这种方式操纵动画，否则我无法找到一种方法来实现。

所以现在我希望有人能够帮助我找到解决该问题的方法。

编辑：我没有标记jQuery，因为这里没有使用它，但是使用jQuery的解决方案就可以了。

MCVE

const timer = setInterval(rollBall, 2000);
var ballNumber = 1;

function rollBall(){
	if(document.getElementById('ball-'+(ballNumber-1))){
  	document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
  }
	let html = '<div id="ball-'+ballNumber+'" class="ball ball-animation">';
  html += '<p class="ball-number">';
  html += ballNumber;
  html += '</p></div>';
  
  document.getElementById('balls').innerHTML += html;
  
  ballNumber++;
  
  if(ballNumber > 10) {
  	clearInterval(timer);
    document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
  }
}

.ball {
	display: block;
	position: relative;
	width: 75px;
	height: 75px;
	background: red;
	border-radius: 50%;
  background: -webkit-radial-gradient(25px 25px, circle, red, #000);
	background: -moz-radial-gradient(25px 25px, circle, red, #000);
	background: radial-gradient(25px 25px, circle, red, #000);
	/*position: absolute;*/
	float: left;
}

.ball-number {
	top: -34px;
	left: 25px;
	font-size: 45px;
	color: #fff;
	position: absolute;
}

.ball-animation {
	-webkit-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
	-moz-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
	-ms-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
	animation: spin 1750ms linear infinite, moveRightToLeft 2s linear;

	-webkit-transition: all 1.75s ease;
	transition: all 1.75s ease;
}

@keyframes spin {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}

@keyframes moveRightToLeft {
	0% { top: -50px; left: 200px; }
	10% { top: -40px; left: 180px; }
	20% { top: -25px; left: 150px; }
	30% { top: 0px; left: 100px; }
	100% { left: 0%; }
}

<div id="balls"></div>

Answer 1

这是仅CSS的解决方案，使用中间div zone 处理球的运动。

由于此元素的大小各不相同，因此您可以将其上的关键帧设置为按百分比工作，并针对不同的终点进行调整，同时保持相同的原点。

.container {
    width: 600px;
    height: 350px;
    border: solid 1px red;
    position: relative;
}

.zone {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 40px;
    left: 40px;
    border: solid 1px green;
    animation: move 3s linear infinite;
}

.zone:nth-child(2) {
    left: calc(40px * 2);
}

.zone:nth-child(3) {
    left: calc(40px * 3);
}
.zone:nth-child(4) {
    left: calc(40px * 4);
}

.ball {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: blue;
    right: 0px;
    position: absolute;
}

@keyframes move {
    from {transform: translate(0px, 0px);}
    50% {transform: translate(-100px, 100%);}
    to {transform: translate(-100%, 100%);}
}

<div class="container">
  <div class="zone">
    <div class="ball">1</div>
  </div>
  <div class="zone">
    <div class="ball">2</div>
  </div>
  <div class="zone">
    <div class="ball">3</div>
  </div>
  <div class="zone">
    <div class="ball">4</div>
  </div>
</div>

CSS滚球动画位置

1 个答案: