学习老黑的小球制作
<style>
#papa { left: -214px; width: 1024px; height: 600px;background: blue url('https://pic.imgdb.cn/item/62cc1383f54cd3f937050dbd.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
.ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #111; }
</style>
<div id="papa">
<script>
let all = 100;
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>
@马黑黑 本帖最后由 加林森 于 2022-7-11 23:36 编辑 <br /><br />我做了100个
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=0 src="//music.163.com/outchain/player?type=3&id=2499687406&auto=1&height=66"></iframe> 加林森 发表于 2022-7-11 21:15
我做了100个
不多不少 马黑黑 发表于 2022-7-11 21:30
不多不少
嗯嗯，我怕多了我的电脑出问题。 加林森 发表于 2022-7-11 21:31
嗯嗯，我怕多了我的电脑出问题。
那不会 马黑黑 发表于 2022-7-11 21:31
那不会
那就好。 这个做得漂亮，队长真棒{:4_199:} 红影 发表于 2022-7-11 21:52
这个做得漂亮，队长真棒
谢谢啦！ 加林森 发表于 2022-7-11 22:35
谢谢啦！
很让人赏心悦目的色彩{:4_204:} 红影 发表于 2022-7-12 19:24
很让人赏心悦目的色彩
是的。 队长越来越巧手了{:4_199:} 小九 发表于 2022-7-12 20:21
队长越来越巧手了
我是按照老黑的教程学习的。
页:
[1]