Strobe

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/strobe.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; z-index: 1; display: grid; place-items: center; position: relative; }
   
3. #sky { position: absolute; width: 100%; height: 40%; top: 0; overflow: hidden; }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <div id="sky"></div>
   
8. </div>
   
9. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=22417149" autoplay loop></audio>
   
10. 
    
11. <script>
    
12. 
    
13. let jsFile1 = 'https://638183.freep.cn/638183/web/api/ewave_lrc.js', jsFile2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
    
14. let loadJs = (url, callback) => {
    
15.         let body = document.querySelector('body'),
    
16.         jsNode = document.createElement('script');
    
17.         jsNode.charset = 'utf-8';
    
18.         jsNode.setAttribute('src', url);
    
19.         body.appendChild(jsNode);
    
20.         jsNode.onload = () => callback();
    
21. };
    
22. 
    
23. loadJs(jsFile1, () => {
    
24.         let geci = [[2,"Strobe",6],[10,"",1]];
    
25.         HCPlayer({
    
26.                 papa: '#papa',
    
27.                 lrcAr: geci,
    
28.                 lrc_css: `
    
29.                         top: 20px;
    
30.                         color: lightblue;
    
31.                         --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
    
32.                 `,
    
33.                 player_css: `
    
34.                         bottom: 20px;
    
35.                         transform: rotate(45deg);
    
36.                         --bg: rgb(200,200,90,.75);
    
37.                         --br: 50%;
    
38.                 `,
    
39.                 fs_css: '--bg: transparent;',
    
40.         });
    
41. });
    
42. 
    
43. loadJs(jsFile2, () => {
    
44.         H5lz({
    
45.                 papa: '#sky',
    
46.                 total: 20,
    
47.                 size: {width: 20, height: 3},
    
48.                 shape: {background: 'linear-gradient(to right,transparent,rgba(0,250,250,.4))', borderRadius: '0'},
    
49.                 maxTime: 30,
    
50.                 offset: {x: 00, y: 100},
    
51.                 ani: 'toRight',
    
52.                 css: 'transform: rotate(15deg);',
    
53.         });
    
54. });
    
55. 
    
56. </script>

复制代码

马黑黑

粒子配置说明：

h5lz_02.js 还是测试中的插件，它允许加入基于粒子样式的CSS代码，比如本帖中的粒子倾斜。目前，还不能完全确定加如相关CSS属性后粒子会怎么样，一切还在测试中。

要加入自定义的粒子CSS样式，请使用插件的 css 参数。粒子的其余参数设置与 h5lz_01.js 一致，详情请参阅 ——

http://mhh.52qingyin.cn/art/show ... rt=mahei_1694186574

红影

水波纹效果插件加粒子插件，又是两个插件的使用呢，真好

红影

夜空中那么多流星划过，赶紧许愿了

马黑黑

红影 发表于 2023-9-10 23:03
水波纹效果插件加粒子插件，又是两个插件的使用呢，真好

播放器可以随意选择的，这里主要测试一下 h5粒子 新功能：添加少量合适的粒子样式。

如果音乐暂停时粒子不能暂停，请硬刷新一下，资源已经做了更新。

马黑黑

红影 发表于 2023-9-10 23:04
夜空中那么多流星划过，赶紧许愿了

这个背景是俺老家的，据说在这个地方许愿，灵

红影

马黑黑 发表于 2023-9-10 23:22
播放器可以随意选择的，这里主要测试一下 h5粒子 新功能：添加少量合适的粒子样式。

如果音乐暂停时粒 ...

能够暂停呢，这些流星真漂亮

红影

马黑黑 发表于 2023-9-10 23:23
这个背景是俺老家的，据说在这个地方许愿，灵

你老家的风景这么美啊，一望无际，是一个与上天能勾连的好地方呢

马黑黑

醉美水芙蓉 发表于 2023-9-11 11:55
欣赏老师佳作！

马黑黑

红影 发表于 2023-9-11 10:21
你老家的风景这么美啊，一望无际，是一个与上天能勾连的好地方呢

嗯嗯，你说得对

马黑黑

红影 发表于 2023-9-11 10:19
能够暂停呢，这些流星真漂亮

开始时暂停不了，后面更新了

红影

马黑黑 发表于 2023-9-11 17:50
嗯嗯，你说得对

这种地方的人心灵更纯净。

红影

马黑黑 发表于 2023-9-11 17:51
开始时暂停不了，后面更新了

原来如此，还以为开始就可以的呢。黑黑真仔细，辛苦了

马黑黑

红影 发表于 2023-9-11 19:38
原来如此，还以为开始就可以的呢。黑黑真仔细，辛苦了

我这里是给粒子插件另外的父元素，是帖子元素的一个子元素，粒子与帖子元素的关系是爷孙关系，然后就有问题了。如果播放器和粒子同放在一个父元素之下，没有问题。

这些关系问题，还涉及的先设置那个插件。由于播放器当时为了令其处于 Z 轴的最上层，貌似都做了 z-index 属性设置，这样的话，不同父元素时，先配置粒子插件再配置播放器插件，会导致粒子不可见。

马黑黑

红影 发表于 2023-9-11 19:37
这种地方的人心灵更纯净。

那必须的

小辣椒

说实话，这些流星在电脑上我可能还看不见，手机可以看很清晰

小辣椒

意境很美

小辣椒

双js.可以想到黑黑原代码有很多的，黑黑辛苦的