论坛 › 欢乐水吧 › 《齐天大圣孙悟空》（学习黑黑向内的H5粒子插件）

红影 发表于 2023-9-16 11:18

《齐天大圣孙悟空》（学习黑黑向内的H5粒子插件）

<style>
#mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 576px; box-shadow: 0 0 12px gray; background: url('https://pic.imgdb.cn/item/650510e4661c6c8e54f1ebd9.jpg') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; }
#pic { position: absolute; left: 378px; top: 160px; width: 200px; height: 200px; animation: rot 6s infinite linear var(--state); }
#wenzi { position: absolute; left: 680px; top: 280px; width: 20px; height: 20px; animation: yidong 4s infinite linear var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes yidong { to { transform: translate(-200px, -40px)scale(3); } }
</style>

<div id="mydiv">
        <img id="pic" src="https://pic.imgdb.cn/item/65051195661c6c8e54f210d9.png" alt="" />
        <img id="wenzi" src="https://pic.imgdb.cn/item/65051717661c6c8e54f2d70d.png" alt="" />

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

<script>
(function() {
        let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_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;
                                color: lightblue;
                                --bg: linear-gradient(rgba(200,200,250,.25),rgba(100,200,250,.65));
                        `,
                        player_css: `
                                bottom: 10px;
                                color: snow;
                                z-index: 2;
                        `,
                        pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
                fs_css: '--bg: transparent; top: -10%;',
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#mydiv',
                        total: 60,
                        size: {width: 30, height: 43},
                        shape: {background: 'url("https://pic.imgdb.cn/item/65051aa9661c6c8e54f3aafc.png")', borderRadius: '0'},
                        maxTime: 24,
                        offset: {x: 0, y: 0},
                        ani: 'out2C',
                        css: 'opacity: .8;',
                });
        });
})();
</script>

红影 发表于 2023-9-16 11:18

把粒子替换成图片了，谢谢黑黑指导@马黑黑{:4_187:}

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

看到这个向内的，首先想到的就是孙悟空收妖怪。
看大圣大发神威，把妖怪全弄到法器里去了{:4_170:}

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

这个剪纸妖弄成白色的看着太乱，灰黑的又太不起眼，索性弄成这样灰突突的吧{:4_173:}

醉美水芙蓉 发表于 2023-9-16 12:29

马黑黑 发表于 2023-9-16 12:36

妖怪收不完呀，悟空辛苦

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

醉美水芙蓉 发表于 2023-9-16 12:29
红影想象力太丰富了！真是服了你了！

都是黑黑提供的代码，让我们的想象有了发挥的余地{:4_173:}

红影 发表于 2023-9-16 12:48

马黑黑 发表于 2023-9-16 12:36
妖怪收不完呀，悟空辛苦

是啊，这粒子的插件得到的是无穷无尽的妖怪，悟空光是喊“呔”都快把口水喊干了{:4_189:}

马黑黑 发表于 2023-9-16 13:41

红影 发表于 2023-9-16 12:48
是啊，这粒子的插件得到的是无穷无尽的妖怪，悟空光是喊“呔”都快把口水喊干了

好在悟空不用约会，怎么忙也没关系

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

这孙大圣一口气，把这群小妖全收了。哈哈哈…………

亦是金 发表于 2023-9-16 19:20

好帖！孙爷爷把小妖全收进法器中去了！{:4_189:}

亚伦影音工作室 发表于 2023-9-16 20:13

搞笑

红影 发表于 2023-9-16 21:21

马黑黑 发表于 2023-9-16 13:41
好在悟空不用约会，怎么忙也没关系

他跟唐僧不是有着去西天的约定么，再说他师傅假慈悲，总不让他打妖怪{:4_173:}

红影 发表于 2023-9-16 21:22

梦油 发表于 2023-9-16 14:28
这孙大圣一口气，把这群小妖全收了。哈哈哈…………

这个粒子效果本来就是收敛进来的，索性让孙大圣用来收妖了{:4_173:}

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

亦是金 发表于 2023-9-16 19:20
好帖！孙爷爷把小妖全收进法器中去了！

这样就会有一个朗朗乾坤了{:4_173:}

红影 发表于 2023-9-16 21:24

亚伦影音工作室 发表于 2023-9-16 20:13
搞笑

是啊，就是玩玩乐乐，谢谢亚伦老师临帖{:4_204:}

马黑黑 发表于 2023-9-16 23:04

红影 发表于 2023-9-16 21:21
他跟唐僧不是有着去西天的约定么，再说他师傅假慈悲，总不让他打妖怪

那是工作，不是私生活

红影 发表于 2023-9-17 09:03

马黑黑 发表于 2023-9-16 23:04
那是工作，不是私生活

也是，工作再怎么忙，总有8小时之外的时间，而约会私生活等是无底洞{:4_173:}

马黑黑 发表于 2023-9-17 09:04

红影 发表于 2023-9-17 09:03
也是，工作再怎么忙，总有8小时之外的时间，而约会私生活等是无底洞

9494

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

马黑黑 发表于 2023-9-17 09:04
9494

所以老孙有的是时间，还有空大闹天宫{:4_173:}

查看完整版本: 《齐天大圣孙悟空》（学习黑黑向内的H5粒子插件）