测试Lizi类的落叶

马黑黑

马黑黑

测试代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 740px;
   
5.         height: 400px;
   
6.         background: linear-gradient(to right top,antiquewhite,black);
   
7.         overflow: hidden;
   
8.         position: relative;
   
9. }
   
10. li-zi {
    
11.         position: absolute;
    
12.         border-radius: 0% 100%;
    
13.         opacity: .85;
    
14.         animation: rot 3s var(--delay) infinite alternate;
    
15. }
    
16. @keyframes rot { to { transform: rotate(180deg); } }
    
17. </style>
    
18. 
    
19. <div id="mydiv"></div>
    
20. 
    
21. <script>
    
22. 
    
23. //声明粒子运动的布尔变量 ：true - 可以移动；false - 不可以移动
    
24. let canMove = true;
    
25. 
    
26. //创建一个 Lizi 类
    
27. class Lizi {
    
28.         //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
    
29.         constructor(pa,size = 20) {
    
30.                 this.pa = pa;
    
31.                 this.size = size;
    
32.                 this.left = 10;
    
33.                 this.top = 10;
    
34.                 this.xstep = 1; //水平移动步幅
    
35.                 this.ystep = 1; //垂直移动步幅
    
36.                 this.ele = document.createElement('li-zi'); //粒子标签
    
37.         }
    
38.         //创建粒子
    
39.         creating() {
    
40.                 this.ele.style.cssText = `
    
41.                         width: ${this.size}px;
    
42.                         height: ${this.size}px;
    
43.                         left: ${this.left}px;
    
44.                         top: ${this.top}px;
    
45.                 `;
    
46.                 this.pa.appendChild(this.ele);
    
47.                 this.setBg();
    
48.                 this.moving();
    
49.         }
    
50.         //移动粒子
    
51.         moving() {
    
52.                 if(canMove) {
    
53.                         this.left += this.xstep;
    
54.                         this.top += this.ystep;
    
55.                         if(this.left >= this.pa.offsetWidth) {
    
56.                                 this.left = -this.size;
    
57.                                 this.setBg();
    
58.                         }
    
59.                         if(this.top >= this.pa.offsetHeight) {
    
60.                                 this.top = -this.size;
    
61.                                 this.setBg();
    
62.                         }
    
63.                         this.ele.style.left = this.left + 'px';
    
64.                         this.ele.style.top = this.top + 'px';
    
65.                 }
    
66.                 requestAnimationFrame(this.moving.bind(this));
    
67.         }
    
68.         setBg() { this.ele.style.background = '#' + Math.random().toString(16).substring(2,8); }
    
69. }
    
70. 
    
71. let stepAr = [0.5,0.8,1,1.5]; //步幅数组
    
72. 
    
73. Array.from({length: 50}).forEach((element) => {
    
74.         let yIdx = Math.floor(Math.random() * stepAr.length);
    
75.         element = new Lizi(mydiv);
    
76.         element.size = 8 + Math.ceil(Math.random() * 16);
    
77.         element.left = Math.floor(Math.random() * mydiv.offsetWidth);
    
78.         element.top = Math.floor(Math.random() * mydiv.offsetHeight);
    
79.         element.xstep = 0.2;
    
80.         element.ystep = stepAr[yIdx];
    
81.         element.bg = '#' + Math.random().toString(16).substr(-6);
    
82.         element.creating();
    
83.         element.ele.style.setProperty('--delay', Math.random() * -3 + 's');
    
84. });
    
85. 
    
86. mydiv.onclick = () => canMove = !canMove;
    
87. 
    
88. </script>

复制代码

一斛珠

五彩缤纷啊

马黑黑

一斛珠 发表于 2023-7-9 11:09
五彩缤纷啊

颜色是次要的

南无月

试了 border-radius: 0% 100%;改变数据可以有多种形状生成。又学到一个知识点~~
试了改变步幅，树叶可以上下纷飞~~

南无月

代码果然有无限可能。。。千变万化，层出不穷。。

梦油

这落叶飘飘悠悠的真好看。神奇的代码真神奇。

马黑黑

梦油 发表于 2023-7-9 11:39
这落叶飘飘悠悠的真好看。神奇的代码真神奇。

马黑黑

南无月 发表于 2023-7-9 11:39
代码果然有无限可能。。。千变万化，层出不穷。。

有点想象力，一切都可以很精彩

马黑黑

南无月 发表于 2023-7-9 11:38
试了 border-radius: 0% 100%;改变数据可以有多种形状生成。又学到一个知识点~~
试了改变步幅， ...

还有更复杂的 border 设置，可以去搜一下

红影

好漂亮的落叶，代码绘制的叶片，很方便

红影

点击后不飘了，还在转，有趣

樵歌

花辩一样缤纷！

马黑黑

樵歌 发表于 2023-7-9 16:40
花辩一样缤纷！

亦是花瓣，也是叶子

马黑黑

红影 发表于 2023-7-9 13:34
好漂亮的落叶，代码绘制的叶片，很方便

利用border-radius弄成的，简约

马黑黑

红影 发表于 2023-7-9 13:36
点击后不飘了，还在转，有趣

也可以控制转动的

马黑黑

醉美水芙蓉 发表于 2023-7-9 17:28
欣赏学习黑黑老师教程！

千羽

是缤纷的落叶吗？挺美的

马黑黑

千羽 发表于 2023-7-9 19:36
是缤纷的落叶吗？挺美的

@樵歌 说是花瓣