|
|

楼主 |
发表于 2022-7-10 20:57
|
显示全部楼层
代码:
- <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>
复制代码
|
|