论坛 › 欢乐水吧 › 粒粒皆辛苦（学习黑黑H5旋转粒子+加播放器效果）

红影 发表于 2023-9-14 16:43

粒粒皆辛苦（学习黑黑H5旋转粒子+加播放器效果）

<style>
#mydiv { margin: 80px 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 600px; box-shadow: 0 0 12px gray; background: url('https://pic.imgdb.cn/item/6502a85d661c6c8e54ded989.jpg') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
#sky { position: absolute;width: 100%; height: 120%; top: -30%;left: 0; overflow: hidden; z-index: 3; }
</style>

<div id="mydiv"><div id="sky"></div></div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/qiche/CD12/1202.mp3" loop autoplay></audio>

<script>
(function () {

let js1 = 'https://638183.freep.cn/638183/web/api/tube_lrc.js', js2 = '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(js1, () => {
      let geci = [,];
      HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: `
                        top: 20px; left: 60px;
                        color: silver;
                        --bg: linear-gradient(rgba(10,100,100,.4),rgba(10,100,100,.7));
                `,
                player_css: `
                        bottom: 10px;
                        opacity: .95;
                        --track: silver;
                        --prog: Gold;
                        --color: silver;
                        --bg: conic-gradient(tan,blue,green,pink,lightblue);
                `,
        fs_css: '--bg: transparent; top: 80%;',
      });
});

loadJs(js2, () => {
      H5lz({
                papa: '#sky',
               total: 80,
                size: {width: 20, height: 40},
                shape: {background: 'linear-gradient(to top,rgba(225,150,0,.9),rgba(255,245,224,.6))', borderRadius: '50%'},
                maxTime: 24,
                offset: {x: 0, y: 0},
                ani: 'c2Out',
                css: 'opacity: 1;',
      });
});
})();
</script>

红影 发表于 2023-9-14 16:46

刚弄出来的米，很香哦。请大家吃米饭{:4_173:}

红影 发表于 2023-9-14 16:46

谢谢亦是金老师的音乐，看到你帖子里的音乐觉得挺好，借用一下{:4_173:}

红影 发表于 2023-9-14 16:47

感谢黑黑的代码，我把粒子变成米了{:4_173:}

梦油 发表于 2023-9-14 16:47

真有意思！取之不尽、用之不竭。

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

梦油 发表于 2023-9-14 16:47
真有意思！取之不尽、用之不竭。

对啊，而且全是新米{:4_189:}

梦油 发表于 2023-9-14 17:05

红影 发表于 2023-9-14 16:54
对啊，而且全是新米

俺似乎嗅到了新米的油香。

醉美水芙蓉 发表于 2023-9-14 20:02

小文 发表于 2023-9-14 20:07

又香又好吃，太谢谢恩师了！问好！{:4_191:}

亦是金 发表于 2023-9-14 20:09

好题材，好制作！谢谢学习了！{:4_187:}

小文 发表于 2023-9-14 20:11

新米在我们这，1斤（公斤）=7两（公两）。
昆明买东西不论斤，要说一斤，即指一公斤。

千羽 发表于 2023-9-14 20:32

哈哈，影儿发明了新的磨米机，好美啊，那磨出的米粒做饭一定香喷喷{:4_187:}{:4_173:}

千羽 发表于 2023-9-14 20:35

精巧的播放器也很漂亮，看着磨出来的新米粒就又有点饿了{:4_173:}

千羽 发表于 2023-9-14 20:36

影儿好创意，好制作，棒棒哒{:4_185:}

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

亲爱的，这个粒子设计的真的是全新的体验，完美{:4_199:}

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

优秀学员的作业就这么漂亮，值得大家学习{:4_178:}

红影 发表于 2023-9-14 23:15

梦油 发表于 2023-9-14 17:05
俺似乎嗅到了新米的油香。

那是必须的，新米通常更好吃{:4_173:}

红影 发表于 2023-9-14 23:15

醉美水芙蓉 发表于 2023-9-14 20:02
红影真会玩！好漂亮！

正好看到这图图，就修改了一下粒子，让它们像米了{:4_173:}

红影 发表于 2023-9-14 23:16

小文 发表于 2023-9-14 20:07
又香又好吃，太谢谢恩师了！问好！

谢谢小文，就是好玩呢{:4_173:}

红影 发表于 2023-9-14 23:17

亦是金 发表于 2023-9-14 20:09
好题材，好制作！谢谢学习了！

谢谢亦是金老师上传的音乐，当时正想找音乐，正好看到您的帖子，就借用了一首{:4_173:}

查看完整版本: 粒粒皆辛苦（学习黑黑H5旋转粒子+加播放器效果）