论坛 › 欢乐水吧 › Strobe

马黑黑 发表于 2023-9-10 22:27

Strobe

本帖最后由 马黑黑 于 2023-9-11 17:52 编辑 <br /><br /><style>
#papa { margin: -80px 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; }
#sky { position: absolute; width: 100%; height: 40%; top: 0; overflow: hidden; }
</style>

<div id="papa">
        <div id="sky"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=22417149" autoplay loop></audio>

<script>

(function () {

let jsFile1 = 'https://638183.freep.cn/638183/web/api/ewave_lrc.js', jsFile2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
let loadJs = (url, callback) => {
        let body = document.querySelector('body'),
        jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
};

loadJs(jsFile1, () => {
        let geci = [,];
        HCPlayer({
                papa: '#papa',
                lrcAr: geci,
                lrc_css: `
                        top: 20px;
                        color: lightblue;
                        --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
                `,
                player_css: `
                        bottom: 20px;
                        transform: rotate(45deg);
                        --bg: rgb(200,200,90,.75);
                        --br: 8%;
                `,
                fs_css: '--bg: transparent;',
        });
});

loadJs(jsFile2, () => {
        H5lz({
                papa: '#sky',
                total: 20,
                size: {width: 20, height: 3},
                shape: {background: 'linear-gradient(to right,transparent,rgba(0,250,250,.4))', borderRadius: '0'},
                maxTime: 30,
                offset: {x: 00, y: 100},
                ani: 'toRight',
                css: 'transform: rotate(15deg);',
        });
});

})();

</script>

马黑黑 发表于 2023-9-10 22:29

帖子代码
<style>
#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; }
#sky { position: absolute; width: 100%; height: 40%; top: 0; overflow: hidden; }
</style>

<div id="papa">
        <div id="sky"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=22417149" autoplay loop></audio>

<script>

let jsFile1 = 'https://638183.freep.cn/638183/web/api/ewave_lrc.js', jsFile2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_02.js';
let loadJs = (url, callback) => {
        let body = document.querySelector('body'),
        jsNode = document.createElement('script');
        jsNode.charset = 'utf-8';
        jsNode.setAttribute('src', url);
        body.appendChild(jsNode);
        jsNode.onload = () => callback();
};

loadJs(jsFile1, () => {
        let geci = [,];
        HCPlayer({
                papa: '#papa',
                lrcAr: geci,
                lrc_css: `
                        top: 20px;
                        color: lightblue;
                        --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
                `,
                player_css: `
                        bottom: 20px;
                        transform: rotate(45deg);
                        --bg: rgb(200,200,90,.75);
                        --br: 50%;
                `,
                fs_css: '--bg: transparent;',
        });
});

loadJs(jsFile2, () => {
        H5lz({
                papa: '#sky',
                total: 20,
                size: {width: 20, height: 3},
                shape: {background: 'linear-gradient(to right,transparent,rgba(0,250,250,.4))', borderRadius: '0'},
                maxTime: 30,
                offset: {x: 00, y: 100},
                ani: 'toRight',
                css: 'transform: rotate(15deg);',
        });
});

</script>

马黑黑 发表于 2023-9-10 22:35

粒子配置说明：

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

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

http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=mahei_1694186574

红影 发表于 2023-9-10 23:03

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

红影 发表于 2023-9-10 23:04

夜空中那么多流星划过，赶紧许愿了{:4_173:}

马黑黑 发表于 2023-9-10 23:22

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

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

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

马黑黑 发表于 2023-9-10 23:23

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

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

红影 发表于 2023-9-11 10:19

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

如果音乐暂停时粒 ...

能够暂停呢，这些流星真漂亮{:4_187:}

红影 发表于 2023-9-11 10:21

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

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

醉美水芙蓉 发表于 2023-9-11 11:55

马黑黑 发表于 2023-9-11 17:50

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

{:4_190:}

马黑黑 发表于 2023-9-11 17:50

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

嗯嗯，你说得对

马黑黑 发表于 2023-9-11 17:51

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

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

红影 发表于 2023-9-11 19:37

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

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

红影 发表于 2023-9-11 19:38

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

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

马黑黑 发表于 2023-9-11 19:48

红影 发表于 2023-9-11 19:38
原来如此，还以为开始就可以的呢。黑黑真仔细，辛苦了
我这里是给粒子插件另外的父元素，是帖子元素的一个子元素，粒子与帖子元素的关系是爷孙关系，然后就有问题了。如果播放器和粒子同放在一个父元素之下，没有问题。

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

马黑黑 发表于 2023-9-11 19:51

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

那必须的

小辣椒 发表于 2023-9-11 20:13

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

小辣椒 发表于 2023-9-11 20:14

意境很美

小辣椒 发表于 2023-9-11 20:16

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

查看完整版本: Strobe