将基于Javascript的背景动画限制为某个特定的Div

我一直在尝试使用动画背景，使用我在以下链接中找到的Javascript：

很好用。但问题是，一旦实现，它就会遍布整个屏幕

我希望动画是在我的网页的一些特定的DIV元素

帮帮我

//一些随机颜色 常量颜色=[3CC157、2AA7FF、1B1B1B、FCBC0F、F85F36]； 常数numBalls=50； 常数球=[]； 对于let i=0；我喜欢看足球；i++{ 让ball=document.createElementdiv； ball.classList.addball； ball.style.background=颜色[Math.floorMath.random*colors.length]； ball.style.left=`Math.floorMath.random*100}vw`； ball.style.top=`Math.floorMath.random*100}vh`； ball.style.transform=`scale${Math.random}`； ball.style.width=`${Math.random}em`； ball.style.height=ball.style.width； 球，推球； document.body.appendball； } //关键帧 balls.forEachel，i，ra=>{ 让我们来看看={ x:Math.random*i%2==0？-11:11， y:数学，随机*12 }; 让anim=el.animate [ {transform:translate0，0}， {transform:`translate${to.x}rem，${to.y}rem`} ], { 持续时间：Math.random+1*2000，//随机持续时间 方向：交替， 填充：两者， 迭代：无限， 放松：放松 } ; }; .球{ 位置：绝对位置； 边界半径：100%； 不透明度：0.7； } 像这样

//一些随机颜色 常量颜色=[3CC157、2AA7FF、1B1B1B、FCBC0F、F85F36]； 常数numBalls=50； 常数球=[]； 对于let i=0；我喜欢看足球；i++{ 让ball=document.createElementdiv； ball.classList.addball； ball.style.background=颜色[Math.floorMath.random*colors.length]； ball.style.left=`${Math.floorMath.random*100}%`； ball.style.top=`${Math.floorMath.random*100}%`； ball.style.transform=`scale${Math.random}`； ball.style.width=`${Math.random}em`； ball.style.height=ball.style.width； 球，推球； document.getElementByIdbox.appendball； } //关键帧 balls.forEachel，i，ra=>{ 让我们来看看={ x:Math.random*i%2==0？-11:11， y:数学，随机*12 }; 让anim=el.animate [ {transform:translate0，0}， {transform:`translate${to.x}rem，${to.y}rem`} ], { 持续时间：Math.random+1*2000，//随机持续时间 方向：交替， 填充：两者， 迭代：无限， 放松：放松 } ; }; .球{ 位置：绝对位置； 边界半径：100%； 不透明度：0.7； } 盒子{ 宽度：300px； 高度：300px； 边框：1px纯红； 位置：相对位置； 溢出：隐藏； } 像这样

//一些随机颜色 常量颜色=[3CC157、2AA7FF、1B1B1B、FCBC0F、F85F36]； 常数numBalls=50； 常数球=[]； 对于let i=0；我喜欢看足球；i++{ 让ball=document.createElementdiv； ball.classList.addball； ball.style.background=颜色[Math.floorMath.random*colors.length]； ball.style.left=`${Math.floorMath.random*100}%`； ball.style.top=`${Math.floorMath.random*100}%`； ball.style.transform=`scale${Math.random}`； ball.style.width=`${Math.random}em`； ball.style.height=ball.style.width； 球，推球； document.getElementByIdbox.appendball； } //关键帧 balls.forEachel，i，ra=>{ 让我们来看看={ x:Math.random*i%2==0？-11:11， y:数学，随机*12 }; 让anim=el.animate [ {transform:translate0，0}， {transform:`translate${to.x}rem，${to.y}rem`} ], { 持续时间：Math.random+1*2000，//随机持续时间 方向：交替， 填充：两者， 迭代：无限， 放松：放松 } ; }; .球{ 位置：绝对位置； 边界半径：100%； 不透明度：0.7； } 盒子{ 宽度：300px； 高度：300px； 边框：1px纯红； 位置：相对位置； 溢出：隐藏； }

---

问题是，你正在将球附加到身体上。这就是为什么它们会出现在屏幕上的原因。您必须制作一个具有一定宽度和高度的容器，并仅将创建的球附加到该容器：

//一些随机颜色 常量颜色=[3CC157、2AA7FF、1B1B1B、FCBC0F、F85F36]； 常数numBalls=50； 常数球=[]； 对于let i=0；我喜欢看足球；i++{ 让ball=document.createElementdiv； ball.classList.addball； ball.style.background=颜色[Math.floorMath.random*colors.length]； ball.style.left=`Math.floorMath.random*100}vw`； ball.style.top=`Math.floorMath.random*100}vh`； ball.style.transform=`scale${Math.random}`； ball.style.width=`${Math.random}em`； ball.style.height=ball.style.width； 球，推球； document.querySelector'.ballContainer'.appendball； } //关键帧 balls.forEachel，i，ra=>{ 让我们来看看={ x:Math.random*i%2==0？-11:11， y:数学，随机*12 }; 让anim=el.animate [ {transform:translate0，0}， {transform:`translate${to.x}rem，${to.y}r em`} ], { 持续时间：Math.random+1*2000，//随机持续时间 方向：交替， 填充：两者， 迭代：无限， 放松：放松 } ; }; .球{ 位置：绝对位置； 边界半径：100%； 不透明度：0.7； } .球罐{ 宽度：350px； 高度：175px； 边框：1px纯色灰色； 位置：相对位置； 溢出：隐藏； 背景颜色：浅灰色； }

---

问题是，你正在将球附加到身体上。这就是为什么它们会出现在屏幕上的原因。您必须制作一个具有一定宽度和高度的容器，并仅将创建的球附加到该容器：

//一些随机颜色 常量颜色=[3CC157、2AA7FF、1B1B1B、FCBC0F、F85F36]； 常数numBalls=50； 常数球=[]； 对于let i=0；我喜欢看足球；i++{ 让ball=document.createElementdiv； ball.classList.addball； ball.style.background=颜色[Math.floorMath.random*colors.length]； ball.style.left=`Math.floorMath.random*100}vw`； ball.style.top=`Math.floorMath.random*100}vh`； ball.style.transform=`scale${Math.random}`； ball.style.width=`${Math.random}em`； ball.style.height=ball.style.width； 球，推球； document.querySelector'.ballContainer'.appendball； } //关键帧 balls.forEachel，i，ra=>{ 让我们来看看={ x:Math.random*i%2==0？-11:11， y:数学，随机*12 }; 让anim=el.animate [ {transform:translate0，0}， {transform:`translate${to.x}rem，${to.y}rem`} ], { 持续时间：Math.random+1*2000，//随机持续时间 方向：交替， 填充：两者， 迭代：无限， 放松：放松 } ; }; .球{ 位置：绝对位置； 边界半径：100%； 不透明度：0.7； } .球罐{ 宽度：350px； 高度：175px； 边框：1px纯色灰色； 位置：相对位置； 溢出：隐藏； 背景颜色：浅灰色； }

---

球沿着一条随机的路径运动。这意味着有些球会超出你的发球区

您可以添加CSS以隐藏滚动条

html * {
    overflow: hidden;
}

---

球沿着一条随机的路径运动。这意味着有些球会超出你的发球区

您可以添加CSS以隐藏滚动条

html * {
    overflow: hidden;
}