可是归人

马黑黑

马黑黑

帖子代码（Lizi类应用）

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 1024px;
   
5.         height: 678px;
   
6.         z-index: 1;
   
7.         background: url('https://638183.freep.cn/638183/t23/2/gvrf.jpg');
   
8.         box-shadow: 0 0 8px 0 #000;
   
9.         overflow: hidden;
   
10.         position: relative;
    
11. }
    
12. li-zi {
    
13.         position: absolute;
    
14.         border-radius: 100% 100% 100% 0;
    
15.         background: lightblue;
    
16.         box-shadow: inset -2px -2px 10px 0 antiquewhite;
    
17.         opacity: .9;
    
18.         cursor: pointer;
    
19.         transform: rotate(-45deg);
    
20. }
    
21. </style>
    
22. 
    
23. <div id="mydiv"></div>
    
24. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1847758043" autoplay="autoplay" loop="loop"></audio>
    
25. 
    
26. <script>
    
27. 
    
28. //粒子运动开关
    
29. let canMove = true;
    
30. 
    
31. //创建 Lizi 类
    
32. class Lizi {
    
33.         //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
    
34.         constructor(pa,size = 20) {
    
35.                 this.pa = pa;
    
36.                 this.size = size;
    
37.                 this.bg = 'purple';
    
38.                 this.left = 10;
    
39.                 this.top = 10;
    
40.                 this.ystep = 1; //垂直移动步幅
    
41.                 this.ele = document.createElement('li-zi'); //粒子标签
    
42.         }
    
43.         //创建粒子
    
44.         creating() {
    
45.                 this.ele.style.cssText = `
    
46.                         width: ${this.size}px;
    
47.                         height: ${this.size}px;
    
48.                         left: ${this.left}px;
    
49.                         top: ${this.top}px;
    
50.                         background: ${this.bg};
    
51.                 `;
    
52.                 this.pa.appendChild(this.ele);
    
53.                 this.moving();
    
54.         }
    
55.         //移动粒子
    
56.         moving() {
    
57.                 if(canMove) {
    
58.                         this.left += this.xstep;
    
59.                         this.top += this.ystep;
    
60.                         if(this.top <= -this.size) this.top = this.pa.offsetHeight;
    
61.                         this.ele.style.left = this.left + 'px';
    
62.                         this.ele.style.top = this.top + 'px';
    
63.                 }
    
64.                 requestAnimationFrame(this.moving.bind(this));
    
65.         }
    
66. }
    
67. 
    
68. //实例化Lizi
    
69. Array.from({length: 40}).forEach((element) => {
    
70.         element = new Lizi(mydiv);
    
71.         element.size = 20 + Math.ceil(Math.random() * 20);
    
72.         element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
    
73.         element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
    
74.         element.xstep = 0;
    
75.         element.ystep = -0.5 - Math.random();
    
76.         element.bg = '#' + Math.random().toString(16).substr(-6);
    
77.         element.creating();
    
78. });
    
79. 
    
80. mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
    
81.         aud.addEventListener('play', mState, false);
    
82.         aud.addEventListener('pause', mState, false);
    
83.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
84. 
    
85. </script>

复制代码

梦油

这一加上背景就更漂亮啦。

马黑黑

梦油 发表于 2023-7-9 17:46
这一加上背景就更漂亮啦。

感谢支持

马黑黑

醉美水芙蓉 发表于 2023-7-9 17:50
真漂亮！

感谢支持，下午好

红影

border-radius: 100% 100% 100% 0;这个就是气球的造型吧，真漂亮

红影

五颜六色的气球飞满天

红影

这标题好玩，可是归人。放了这么多气球迎接归人，万一不是，不是白放了

马黑黑

红影 发表于 2023-7-9 18:31
border-radius: 100% 100% 100% 0;这个就是气球的造型吧，真漂亮

倒过来就是水滴

马黑黑

红影 发表于 2023-7-9 18:37
这标题好玩，可是归人。放了这么多气球迎接归人，万一不是，不是白放了

气球也花不了几个钱钱，俺兜里还有六毛呢

马黑黑

醉美水芙蓉 发表于 2023-7-9 18:01
黑黑老师吃晚饭了！

谢谢你的啤酒

马黑黑

红影 发表于 2023-7-9 18:35
五颜六色的气球飞满天

漂亮吧？你可以试着用这个类做下雨的特效

千羽

这是要过什么节日了？漫天的气球带来了喜气洋洋

马黑黑

千羽 发表于 2023-7-9 19:32
这是要过什么节日了？蔓天的气球带来了喜气洋洋

迎归人

千羽

马黑黑 发表于 2023-7-9 19:34
迎归人

黑黑老师家有贵客来访？

马黑黑

千羽 发表于 2023-7-9 19:37
黑黑老师家有贵客来访？

嗯，失散1000年的孙子回来了

千羽

马黑黑 发表于 2023-7-9 19:38
嗯，失散1000年的孙子回来了

哈哈，那黑黑老师已成了……

马黑黑

千羽 发表于 2023-7-9 19:44
哈哈，那黑黑老师已成了……

他们说是妖