如何让球左右移动?

时间:2015-11-12 19:23:24

标签: javascript html css animation

我有球移动对角线。我需要让它以每次更新2像素的速度左右移动。在它向右移动800像素后,我需要让它向左移动。

Css代码

<style>
#animationArea {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
}

.pbox {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #FF0000;
  border-radius: 25px;
}

  </style>

JsCode

var dvAnimationArea = document.querySelector("#animationArea");

//create the 'ball' for this animation
var ball = document.createElement('div');
ball.classList.add('pbox');
dvAnimationArea.appendChild(ball);

//position for our 'ball'
var x = 0;
var y = 0;

//start the animation interval
setInterval(update, 30);
function update() {
  ball.style.top = y + "px";
  ball.style.left = x + "px";

  x++;
  y++;
}

1 个答案:

答案 0 :(得分:2)

我完全遗漏了JS。  这一次激活球2px。  如果你喜欢的话,我可以点击香草js,让它在悬停等时暂停  只是让我知道目标是什么以及动画需要多长时间。

.pbox {
width: 20px;
height: 20px;
position: absolute;
background-color: #FF0000;
border-radius: 25px;
animation:hello 5s infinite steps(400, end);}

http://codepen.io/damianocel/pen/bVOgaZ

让我知道你希望容器真的是400px宽,这不是拼写错误?