测试Lizi类 : 雨

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 740px;
   
5.         height: 500px;
   
6.         background: #333;
   
7.         overflow: hidden;
   
8.         cursor: pointer;
   
9.         position: relative;
   
10.         --state: running;
    
11. }
    
12. li-zi {
    
13.         position: absolute;
    
14.         background: linear-gradient(to bottom, transparent, snow);
    
15.         animation: drop var(--dur) var(--delay) infinite linear var(--state);
    
16. }
    
17. @keyframes drop { to { top: 100%; } }
    
18. </style>
    
19. 
    
20. <div id="mydiv"></div>
    
21. 
    
22. <script>
    
23. 
    
24. let canMove = true;
    
25. 
    
26. //Lizi 类
    
27. class Lizi {
    
28.         constructor(pa) {
    
29.                 this.pa = pa;
    
30.                 this.size = {x: 20, y: 20};
    
31.                 this.pos = {x: 10, y: 10};
    
32.                 this.ele = document.createElement('li-zi');
    
33.         };
    
34.         //创建粒子
    
35.         creating() {
    
36.                 this.ele.style.cssText = `
    
37.                         width: ${this.size.x}px;
    
38.                         height: ${this.size.y}px;
    
39.                         left: ${this.pos.x}px;
    
40.                         top: ${this.pos.y}px;
    
41.                 `;
    
42.                 this.pa.appendChild(this.ele);
    
43.         };
    
44. }
    
45. 
    
46. //实例化类
    
47. Array.from({length: 200}).forEach((element) => {
    
48.         element = new Lizi(mydiv);
    
49.         element.size = {
    
50.                 x: 1 + Math.round(Math.random()),
    
51.                 y: 8 + Math.random() * 30
    
52.         };
    
53.         element.pos = {
    
54.                 x: Math.floor(Math.random() * mydiv.offsetWidth),
    
55.                 y: 0
    
56.         };
    
57.         element.creating();
    
58.         element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
    
59.         element.ele.style.setProperty('--delay', Math.random() * -0.8 + 's');
    
60. });
    
61. 
    
62. mydiv.onclick = () => {
    
63.         canMove = !canMove;
    
64.         mydiv.style.setProperty('--state', canMove ? 'running' : 'paused');
    
65.         console.log(canMove);
    
66. }
    
67. 
    
68. </script>

复制代码

马黑黑

若使用 JS类的方法实现下雨效果，100左右的实例化雨滴还可以，多了很吃系统资源。使用 CSS 关键帧动画替代类的方法，上到300、500的雨滴都没问题。

小文

慢慢体会文中深意，学习……

南无月

及时雨。。
其实就是正方形粒子，
  element.size = {
                x: 1 + Math.round(Math.random()),
                y: 8 + Math.random() * 30
在这里控制其的长宽，再通过填入线性渐变从透明到白色形成雨的形状。。
跟气球变雨滴完全不同，真是意想不到。。

南无月

把之前做的那个贴子改成了新的下雨效果，老师有空去瞧一眼

红影

element.ele.style.setProperty('--dur', 0.4 + Math.random() * 0.4 + 's');
        element.ele.style.setProperty('--delay', Math.random() * -0.8 + 's');

让雨滴下得这么快和下落分布得这么均匀，第一句里的稍微大点，就下得慢点了吧

红影

南无月 发表于 2023-7-11 09:32
及时雨。。
其实就是正方形粒子，
  element.size = {

这个是长度大宽度小，要是气球雨滴的长宽也这样取值，应该也可以的吧，还能让雨滴更圆润

樵歌

雨一直下着，我在雨里疯跑着。

朵拉

樵歌 发表于 2023-7-11 17:03
雨一直下着，我在雨里疯跑着。

樵歌不乖，雨一直下，您疯跑好玩吗

马黑黑

朵拉 发表于 2023-7-11 18:49
樵歌不乖，雨一直下，您疯跑好玩吗

洗澡的

马黑黑

小文 发表于 2023-7-11 08:37
慢慢体会文中深意，学习……

没啥深意

马黑黑

醉美水芙蓉 发表于 2023-7-11 17:07
老师厉害！孙悟空七十二变，要什么有什么呢！

老猪36变就够用了

马黑黑

南无月 发表于 2023-7-11 09:32
及时雨。。
其实就是正方形粒子，
  element.size = {

儿童思维就可以了

马黑黑

南无月 发表于 2023-7-11 09:33
把之前做的那个贴子改成了新的下雨效果，老师有空去瞧一眼

朵拉

马黑黑 发表于 2023-7-11 18:53
洗澡的

了解~~

马黑黑

红影 发表于 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
了解~~