论坛 › 欢乐水吧 › 《极光》（学习黑黑H5粒子插件+水波纹插件）

红影 发表于 2023-9-13 22:36

《极光》（学习黑黑H5粒子插件+水波纹插件）

<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 675px;box-shadow: 3px 3px 20px #000; z-index: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
#sky { position: absolute; width: 80%; height: 100%;top: 0; overflow: hidden; z-index: 3; }
#vid { position: absolute; width: 100%; height: 100%;object-fit: cover; pointer-events: none;z-index: 2; opacity: 1; }
</style>

<div id="papa">
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/16/92/V-169278-3EA58306.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
        <div id="sky"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=26423008" 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(0,200,255,.75);
                        --br: 28%;
                `,
                fs_css: '--bg: transparent;',
        });
});

loadJs(jsFile2, () => {
      H5lz({
                papa: '#sky',
                total: 36,
                size: {width: 5, height: 100},
                shape: {background: 'linear-gradient(to top,transparent,rgba(0,250,250,.2))', borderRadius: '50%'},
                maxTime: 24,
                offset: {x: 00, y: 00},
                ani: 'toTop',
            
        });
});

})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

红影 发表于 2023-9-13 22:38

终于能让流星垂直上下跑了，忽然想到只要调换宽度和高度的数值就行了。我之前竟然去调css: 'transform: rotate(15deg);到90度，结果根本不直着走{:4_173:}

红影 发表于 2023-9-13 22:40

把向上的粒子本来弄个橘红的，后来发现还是原来的色彩好。这样做些调整挺好，碰到点问题，然后反倒能弄明白一些了。谢谢黑黑的代码{:4_187:}

红影 发表于 2023-9-13 22:44

@醉美水芙蓉加视频后也能加粒子的，这个没关系，就用原来的代码，最多加个视频。这个我其实也是想测试了一下，你的回复说只能加一个，其实都能加的。

红影 发表于 2023-9-13 22:55

我把流星弄得向上了@马黑黑 {:4_173:}

马黑黑 发表于 2023-9-13 23:05

红影 发表于 2023-9-13 22:38
终于能让流星垂直上下跑了，忽然想到只要调换宽度和高度的数值就行了。我之前竟然去调css: 'transform: rot ...

插件说明里详细说明了 ani 参数，就是动画方向，通过名称赋值：

    ani: ‘名称’，

第一代 h5lz_01.js 插件，约定四个方向，都是语义化的名称：

    toBottom - 向下
    toTop - 向上
    toLeft - 向左
    toRight - 向右

马黑黑 发表于 2023-9-13 23:06

音乐很不错。帖子整体设计到位。

红影 发表于 2023-9-13 23:11

马黑黑 发表于 2023-9-13 23:05
插件说明里详细说明了 ani 参数，就是动画方向，通过名称赋值：

    ani: ‘名称’，


这个我知道，也调过，就是之前没法垂直上下，我弄错了，去调角度，其实长宽换换就完了的事{:4_173:}

马黑黑 发表于 2023-9-13 23:12

红影 发表于 2023-9-13 23:11
这个我知道，也调过，就是之前没法垂直上下，我弄错了，去调角度，其实长宽换换就完了的事

这些是简单的配置

红影 发表于 2023-9-13 23:13

马黑黑 发表于 2023-9-13 23:06
音乐很不错。帖子整体设计到位。

这个也没怎么设计啊，就是试着把流星的效果变个方式融进去而已{:4_173:}

马黑黑 发表于 2023-9-13 23:14

红影 发表于 2023-9-13 23:13
这个也没怎么设计啊，就是试着把流星的效果变个方式融进去而已

那太简单了

醉美水芙蓉 发表于 2023-9-13 23:20

马黑黑 发表于 2023-9-14 08:07

想起竹竿进城门的故事……{:4_189:}

梦油 发表于 2023-9-14 09:18

红影朋友悟性真好，边学习，边创新。

红影 发表于 2023-9-14 09:51

马黑黑 发表于 2023-9-13 23:12
这些是简单的配置

是啊，这么简单的事我还折腾半天，脑子搭牢了{:4_173:}

红影 发表于 2023-9-14 09:52

马黑黑 发表于 2023-9-13 23:14
那太简单了

试了一下也挺好，知道怎样“转”过来了{:4_173:}

红影 发表于 2023-9-14 09:53

醉美水芙蓉 发表于 2023-9-13 23:20
欣赏红影美女精美音画！谢谢红影美女指导，其实是我不会两个都加！

这个帖子也加了视频的啊，把原来的都留着再加点视频或加点别的什么都不是事呢。

红影 发表于 2023-9-14 09:54

马黑黑 发表于 2023-9-14 08:07
想起竹竿进城门的故事……

这个比喻太贴切了，我是横放竖放都没进去，最后才想起顺放{:4_170:}

红影 发表于 2023-9-14 09:55

梦油 发表于 2023-9-14 09:18
红影朋友悟性真好，边学习，边创新。

没创新呢，就是学习怎样垂直移动粒子，这个明明黑黑讲过的，我还是给弄错了{:4_189:}

梦油 发表于 2023-9-14 11:06

红影 发表于 2023-9-14 09:55
没创新呢，就是学习怎样垂直移动粒子，这个明明黑黑讲过的，我还是给弄错了

我不懂代码，但我看你在图的下端做菱形星变幻的小图很好看，与黑黑的创作有异曲同工之妙。

查看完整版本: 《极光》（学习黑黑H5粒子插件+水波纹插件）