测试Lizi类 : 雨
<style>#mydiv {
margin: 20px auto;
width: 740px;
height: 500px;
background: #333;
overflow: hidden;
cursor: pointer;
position: relative;
--state: running;
}
li-zi {
position: absolute;
background: linear-gradient(to bottom, transparent, snow);
animation: drop var(--dur) var(--delay) infinite linear var(--state);
}
@keyframes drop { to { top: 100%; } }
</style>
<div id="mydiv"></div>
<script>
let canMove = true;
//Lizi 类
class Lizi {
constructor(pa) {
this.pa = pa;
this.size = {x: 20, y: 20};
this.pos = {x: 10, y: 10};
this.ele = document.createElement('li-zi');
};
//创建粒子
creating() {
this.ele.style.cssText = `
width: ${this.size.x}px;
height: ${this.size.y}px;
left: ${this.pos.x}px;
top: ${this.pos.y}px;
`;
this.pa.appendChild(this.ele);
};
}
//实例化类
Array.from({length: 200}).forEach((element) => {
element = new Lizi(mydiv);
element.size = {
x: 1 + Math.round(Math.random()),
y: 8 + Math.random() * 30
};
element.pos = {
x: Math.floor(Math.random() * mydiv.offsetWidth),
y: 0
};
element.creating();
element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
element.ele.style.setProperty('--delay', Math.random() * -0.8 + 's');
});
mydiv.onclick = () => {
canMove = !canMove;
mydiv.style.setProperty('--state', canMove ? 'running' : 'paused');
console.log(canMove);
}
</script> 代码
<style>
#mydiv {
margin: 20px auto;
width: 740px;
height: 500px;
background: #333;
overflow: hidden;
cursor: pointer;
position: relative;
--state: running;
}
li-zi {
position: absolute;
background: linear-gradient(to bottom, transparent, snow);
animation: drop var(--dur) var(--delay) infinite linear var(--state);
}
@keyframes drop { to { top: 100%; } }
</style>
<div id="mydiv"></div>
<script>
let canMove = true;
//Lizi 类
class Lizi {
constructor(pa) {
this.pa = pa;
this.size = {x: 20, y: 20};
this.pos = {x: 10, y: 10};
this.ele = document.createElement('li-zi');
};
//创建粒子
creating() {
this.ele.style.cssText = `
width: ${this.size.x}px;
height: ${this.size.y}px;
left: ${this.pos.x}px;
top: ${this.pos.y}px;
`;
this.pa.appendChild(this.ele);
};
}
//实例化类
Array.from({length: 200}).forEach((element) => {
element = new Lizi(mydiv);
element.size = {
x: 1 + Math.round(Math.random()),
y: 8 + Math.random() * 30
};
element.pos = {
x: Math.floor(Math.random() * mydiv.offsetWidth),
y: 0
};
element.creating();
element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
element.ele.style.setProperty('--delay', Math.random() * -0.8 + 's');
});
mydiv.onclick = () => {
canMove = !canMove;
mydiv.style.setProperty('--state', canMove ? 'running' : 'paused');
console.log(canMove);
}
</script>
若使用 JS类的方法实现下雨效果，100左右的实例化雨滴还可以，多了很吃系统资源。使用 CSS 关键帧动画替代类的方法，上到300、500的雨滴都没问题。 慢慢体会文中深意，学习…… 及时雨。。
其实就是正方形粒子，
element.size = {
x: 1 + Math.round(Math.random()),
y: 8 + Math.random() * 30
在这里控制其的长宽，再通过填入线性渐变从透明到白色形成雨的形状。。
跟气球变雨滴完全不同，真是意想不到。。 把之前做的那个贴子改成了新的下雨效果，老师有空去瞧一眼{:4_173:}{:4_187:} element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
element.ele.style.setProperty('--delay', Math.random() * -0.8 + 's');
让雨滴下得这么快和下落分布得这么均匀，第一句里的稍微大点，就下得慢点了吧{:4_173:} 南无月 发表于 2023-7-11 09:32
及时雨。。
其实就是正方形粒子，
element.size = {
这个是长度大宽度小，要是气球雨滴的长宽也这样取值，应该也可以的吧，还能让雨滴更圆润{:4_173:} 雨一直下着，我在雨里疯跑着。 樵歌 发表于 2023-7-11 17:03
雨一直下着，我在雨里疯跑着。
樵歌不乖，雨一直下，您疯跑好玩吗{:4_173:} 朵拉 发表于 2023-7-11 18:49
樵歌不乖，雨一直下，您疯跑好玩吗
洗澡的{:4_189:} 小文 发表于 2023-7-11 08:37
慢慢体会文中深意，学习……
没啥深意 醉美水芙蓉 发表于 2023-7-11 17:07
老师厉害！孙悟空七十二变，要什么有什么呢！
老猪36变就够用了{:4_170:} 南无月 发表于 2023-7-11 09:32
及时雨。。
其实就是正方形粒子，
element.size = {
儿童思维就可以了{:4_170:} 南无月 发表于 2023-7-11 09:33
把之前做的那个贴子改成了新的下雨效果，老师有空去瞧一眼
{:4_199:} 马黑黑 发表于 2023-7-11 18:53
洗澡的
了解~~{:4_173:} 红影 发表于 2023-7-11 10:41
element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
element.ele.style. ...
理解正确 樵歌 发表于 2023-7-11 17:03
雨一直下着，我在雨里疯跑着。
你牛 朵拉 发表于 2023-7-11 18:55
了解~~
{:4_170:}