东篱来玩玩一千个小球
<style>#papa { left: -214px; width: 1024px; height: 600px; box-shadow: 4px 4px 30px #000; position: relative; }
.ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #111; }
</style>
<div id="papa"></div>
<script>
let all = 1000;
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length:all}).forEach((x,y) =>{
x = document.createElement('span');
x.className = 'ball';
let wh = num(10,30);
x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px; transition: all ${0.1 * num(2,20)}s linear ${0.1 * num(2,20)}s`;
papa.appendChild(x);
console.log(x.style.transition);
});
let balls = document.querySelectorAll('.ball');
move();
function move() {
for(obj of balls) {
let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random());
let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());
obj.style.left = xx + 'px';
obj.style.top = yy + 'px';
}
}
let tt = setInterval(move, 2000);
</script>
代码：
<style>
#papa { left: -214px; width: 1024px; height: 600px; box-shadow: 4px 4px 30px #000; position: relative; }
.ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #111; }
</style>
<div id="papa"></div>
<script>
let all = 1000;
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length:all}).forEach((x,y) =>{
x = document.createElement('span');
x.className = 'ball';
let wh = num(10,30);
x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px; transition: all ${0.1 * num(2,20)}s linear ${0.1 * num(2,20)}s`;
papa.appendChild(x);
console.log(x.style.transition);
});
let balls = document.querySelectorAll('.ball');
move();
function move() {
for(obj of balls) {
let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random());
let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());
obj.style.left = xx + 'px';
obj.style.top = yy + 'px';
}
}
let tt = setInterval(move, 2000);
</script>
代码解释： https://www.huachaowang.com/forum.php?mod=viewthread&tid=61067&extra=page%3D1
本例与那边的例子大同小异，原理相同。唯一需要提及的是，本例中，每一个小球的 transition 都是个性化的，还引入了不同的延时。 @红影 来看看，打开这个帖子时，风扇是否会加速 @红影 又 call 不了人，不在服务区{:4_170:} 眼都花了 绿叶清舟 发表于 2022-7-10 21:12
眼都花了
我就试一下，1000个元素，有木有机器吃不消的 马黑黑 发表于 2022-7-10 20:59
@红影 来看看，打开这个帖子时，风扇是否会加速
猜对了，我这里一打开的确会风扇加速{:4_189:} 的确看得眼花缭乱啊{:4_189:} 红影 发表于 2022-7-10 22:28
的确看得眼花缭乱啊
可以万花丛中盯一花 红影 发表于 2022-7-10 22:27
猜对了，我这里一打开的确会风扇加速
1000个就加速，性能落伍了{:5_117:} 发现一个偷懒的小球一直没动{:4_173:} 四海八荒 发表于 2022-7-11 05:24
发现一个偷懒的小球一直没动
表面看，有可能。不过它不会永远不动，也不是不动，只是它动的幅度很小。持续极小幅度运动的概率非常小但会有，总数越大这种概率跟着增大。
这相当与懒人，一定总数中，终会有很懒的人存在。 左边右边各有一个小球没动。{:4_173:} 黑黑朋友早晨好！这移动的小球颇像一幅抽象派的美术作品。 这个好玩，{:4_187:}象万花筒 {:4_173:} 大猫咪 发表于 2022-7-11 10:54
这个好玩，象万花筒
就是太多了 马黑黑 发表于 2022-7-10 23:00
可以万花丛中盯一花
怎么可能盯得住，还没来得及看呢，就已经跑了{:4_173:} 马黑黑 发表于 2022-7-10 23:01
1000个就加速，性能落伍了
电脑时间长了，不过能用就还用着了，穷人，只能节约点了{:4_173:}