javascript - 动画创建一个 div 来移动我的页面内容？

Question

我有以下站点，我尝试在该站点上实现非常漂亮的动画。我不知道为什么，但它一直在我的页面周围创建空白，如果我还添加一个按钮(就像我在 fiddle 中所做的那样)，它就会变得疯狂。有什么解决办法？

fiddle :https://jsfiddle.net/7suL84my/

动画代码:

// Some random colors
const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];

const numBalls = 50;
const balls = [];

for (let i = 0; i < numBalls; i++) {
let ball = document.createElement("div");
ball.classList.add("ball");
ball.style.background = colors[Math.floor(Math.random() * colors.length)];
ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
ball.style.transform = `scale(${Math.random()})`;
ball.style.width = `${Math.random()}em`;
ball.style.height = ball.style.width;

balls.push(ball);
document.body.append(ball);
}

// Keyframes
balls.forEach((el, i, ra) => {
let to = {
x: Math.random() * (i % 2 === 0 ? -11 : 11),
y: Math.random() * 12
};

let anim = el.animate(
 [
  { transform: "translate(0, 0)" },
  { transform: `translate(${to.x}rem, ${to.y}rem)` }
],
{
  duration: (Math.random() + 1) * 2000, // random duration
  direction: "alternate",
  fill: "both",
  iterations: Infinity,
  easing: "ease-in-out"
}
);
});

Answer 1

从您在 css 文件上的链接更改此内容:

#main{
background-color:black;
color:white;
width:98%;
height:98%;
align-content: center;

}

为此:

#main{
background-color:black;
color:white;
width:100%;
height:100%;
align-content: center;

}