我让球对 Angular 线移动。我需要让它以每次更新 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++;
}
最佳答案
我完全省略了 JS。 这会让球每次移动 2 像素。 如果你愿意的话,我可以在点击时在 Vanilla 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
让我知道您希望容器真正宽 400 像素,这没有错字吗?
关于javascript - 如何让球左右移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33679579/