周思贤 - 风云之歌

马黑黑

马黑黑

本帖主要尝试：① mix-blend-mode ；② requestAnimationFrame 驱动的实体HTML粒子。代码：

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         box-shadow: 4px 8px 28px gray;
   
7.         background: url('https://638183.freep.cn/638183/t23/webp2/fgyy_133478620283196250.webp') no-repeat center/cover;
   
8.         display: grid;
   
9.         place-items: center;
   
10.         position: relative;
    
11.         pointer-events: none;
    
12.         --state: paused;
    
13. }
    
14. #papa::before, #papa::after {
    
15.         position: absolute;
    
16.         content: url('https://638183.freep.cn/638183/t23/btn/btnfy1.webp');
    
17.         top: 10px;
    
18.         mix-blend-mode: luminosity;
    
19.         animation: rotating 10s infinite linear var(--state);
    
20.         cursor: pointer;
    
21.         pointer-events: auto;
    
22. }
    
23. #papa::before {
    
24.         left: 10px;
    
25. }
    
26. #papa::after {
    
27.         right: 10px;
    
28.         mix-blend-mode: lighten;
    
29. }
    
30. li-zi {
    
31.         position: absolute;
    
32.         width: 20px;
    
33.         height: 20px;
    
34.         border-radius: 50%;
    
35.         opacity: .8;
    
36. }
    
37. #btnplay {
    
38.         position: absolute;
    
39.         top: 10px;
    
40.         mix-blend-mode: exclusion;
    
41.         animation: rotating 5s infinite linear var(--state);
    
42.         cursor: pointer;
    
43.         pointer-events: auto;
    
44. }
    
45. @keyframes rotating { to { transform: rotate(360deg); } }
    
46. </style>
    
47. 
    
48. <div id="papa">
    
49.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=201883" autoplay loop></audio>
    
50.         <img  id="btnplay" src="https://638183.freep.cn/638183/t23/btn/btnfy1.webp" alt="" title="播放/暂停"/>
    
51. </div>
    
52. 
    
53. <script>
    
54. 
    
55. let total = 60, lzAr = [], aniTimer = null;
    
56. Array.from({length: total}).forEach((item,key) => {
    
57.         let lz = document.createElement('li-zi');
    
58.         let xx = Math.random() * (papa.offsetWidth - 20),
    
59.                 yy = Math.random() * (papa.offsetHeight - 20),
    
60.                 stepX = 1 - Math.random() * 2,
    
61.                 stepY = 1 - Math.random() * 2;
    
62.         lz.style.cssText += `
    
63.                 left: ${xx}px;
    
64.                 top: ${yy}px;
    
65.                 background: #${Math.random().toString(16).substr(-6)};
    
66.         `;
    
67.         papa.insertBefore(lz,btnplay);
    
68.         lzAr.push([lz,xx,yy,stepX,stepY]);
    
69. });
    
70. 
    
71. let render = () => {
    
72.         lzAr.forEach((lz,key) => {
    
73.                 lzAr[key][1] += lzAr[key][3];
    
74.                 if(lzAr[key][1] < 0 || lzAr[key][1] > papa.offsetWidth - 20) lzAr[key][3] = -lzAr[key][3];
    
75.                 lzAr[key][2] += lzAr[key][4];
    
76.                 if(lzAr[key][2] < 0 || lzAr[key][2] > papa.offsetHeight - 20) lzAr[key][4] = -lzAr[key][4];
    
77.                 lzAr[key][0].style.left = lzAr[key][1] + 'px';
    
78.                 lzAr[key][0].style.top = lzAr[key][2] + 'px';
    
79.         });
    
80.         aniTimer = aud.paused ? cancelAnimationFrame(aniTimer) : requestAnimationFrame(render);
    
81. };
    
82. 
    
83. let mState = () => {
    
84.         papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
85.         render();
    
86. };
    
87. aud.addEventListener('playing', mState, false);
    
88. aud.addEventListener('pause', mState, false);
    
89. 
    
90. papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
91. 
    
92. </script>

复制代码

小辣椒

黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作业

小辣椒

纯套用感觉也是没有意思

红影

这个粒子是自由的，真好

红影

刚才做个帖子，粒子无法受控，看到这个帖子，貌似可以学做这个了，这个黑黑提出了requestAnimationFrame 控制，应该问题不大了。

红影

一会我把刚才做的发出来，黑黑帮忙看看是哪出问题了

马黑黑

红影 发表于 2023-12-24 14:24
一会我把刚才做的发出来，黑黑帮忙看看是哪出问题了

好哒

红影

马黑黑 发表于 2023-12-24 15:31
好哒

已经发出来了

梦油

好漂亮！
行家看门道，力巴看热闹。

马黑黑

梦油 发表于 2023-12-24 15:42
好漂亮！
行家看门道，力巴看热闹。

马黑黑

醉美水芙蓉 发表于 2023-12-24 11:55
中间一朵花怎么变色不一样！黑黑老师中午好！

这是融合滤镜不同导致

马黑黑

红影 发表于 2023-12-24 15:41
已经发出来了

冰雪风暴我回复了

马黑黑

红影 发表于 2023-12-24 14:21
刚才做个帖子，粒子无法受控，看到这个帖子，貌似可以学做这个了，这个黑黑提出了requestAnimationFrame 控 ...

理论上都是可以控制的。不过如果帖子里使用了插件，我这个能不能控制也不好说，requestAnimationFrame很容易与其他东东冲突。

马黑黑

小辣椒 发表于 2023-12-24 13:17
黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作 ...

花花不因为多而高级

马黑黑

小辣椒 发表于 2023-12-24 13:17
黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作 ...

这个，计算方面：首先定位粒子，随机定位；其次，运动边界计算，left、top 小于0或大于父元素宽高减去粒子宽高，则让步进变量正负相反。数据存在数组里。

马黑黑

红影 发表于 2023-12-24 14:07
这个粒子是自由的，真好

不突破边界时是自由的

红影

马黑黑 发表于 2023-12-24 15:44
冰雪风暴我回复了

还好给黑黑看出问题，现在雪花终于可以转动了

马黑黑

小辣椒 发表于 2023-12-24 13:18
纯套用感觉也是没有意思

JS原理明白就好，可以复用，要做的是修改 rx、ry 的赋值，减去的数值依据是粒子的宽高尺寸，是一半。