红影 发表于 2023-9-9 11:25

你的酒馆对我打了烊(学习黑黑H5粒子插件 + 播放器插件)

<style>
#mydiv { margin: 80px 0 0 calc(50% - 681px); display: grid; place-items: center; width: 1200px; height: 675px; border: 1px solid gray; background: linear-gradient(to left bottom, rgba(70,70,var(--bb),.5) 0, rgba(var(--bb),100,100,.35) 50%), url('https://s1.ax1x.com/2023/09/09/pP62E1s.jpg') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; --state: running; }
#pic1 { position: absolute; right: -25px; bottom: 152px; width: 516px; height: 208px; opacity: 0.3;mix-blend-mode: screen; z-index: 1; }
</style>

<div id="mydiv"><img id="pic1" src="https://pic.imgdb.cn/item/64fbe418661c6c8e54e188c1.gif" alt="" /></div>
<audio id="aud" src="https://yinyue1111.s3-us-east-1.ossfiles.com/jiuguan.mp3" crossorigin="anonymous" loop autoplay></audio>

<script>

(function() {

let appends = [];

let loadJs = (pa,src) => {
        let script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = src;
        pa.appendChild(script);
        appends.push(script);
}

loadJs(document.body,'https://638183.freep.cn/638183/web/api/xyanklet_lrc.js');
loadJs(document.body,'https://638183.freep.cn/638183/web/lizi/h5lz_01.js');
let num = 100, step = 10;
appends.onload = () => {
        let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let flash = () => {
      num += step;
      if(num > 255 || num < 0) step = -step;
      mydiv.style.setProperty('--bb', num);
};
setInterval(()=> {
      if(aud.paused) return false;
      flash();
},100);
        HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 30px;left: 50px; color: silver; --bg: linear-gradient(rgba(148,176,255,.4),rgba(148,176,255,.7));',
                fs_css: 'bottom: -70px; --bg: darkgray;',
                player_css: `
                        bottom: 50px; left: 400px;
                        color: white;
                        --btnBg: url('https://pic.imgdb.cn/item/64f35a26661c6c8e54df3975.png') no-repeat center/cover;
                        --ww: 50%; --hh: 80px;
                        --track: lightgreen; --prog: purple;
                `,
        pinpu: {size: 2, gap: 0, color1: 'blue', color2: ''},
        });
};


appends.onload = () => {
        H5lz({
                papa: '#mydiv',
                total: 6,
                size: {width: 68, height: 100},
                shape: {background: 'url("https://s1.ax1x.com/2023/09/09/pP62yjI.png")', borderRadius: '0'},
                maxTime: 24,
                offset: {x: 00, y: -300},
                ani: 'toRight',
        });
};

})();

</script>

红影 发表于 2023-9-9 11:26

休息天,看到黑黑的新效果,赶紧跟着做一个。感谢黑黑的代码{:4_187:}

红影 发表于 2023-9-9 11:29

再复习一下上一个帖子里的底图变色效果,我去掉了第二个颜色里的公式,直接就让它变色了。主要想看看效果如何。{:4_173:}时间也调得慢了些,正好刚问了黑黑时间在哪调的。谢谢黑黑指教{:4_187:}

红影 发表于 2023-9-9 11:31

本地测试的时候有时飘飞的酒杯不出来?貌似也无法调整它的大小和透明度,只能调好了再上传的。找了个斜向的酒杯,也不太好看,就这样直着飘吧{:4_173:}

红影 发表于 2023-9-9 11:32

右上让那个它在蓝色的范畴里变化的,左下是红色范围里变的,貌似颜色不明显。还是带公式的那个应该更清晰些。嗯嗯,得到个结论也好。

梦油 发表于 2023-9-9 11:37

漫天飘逸的酒杯好浪漫哦!

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

看样纸电力不足,灯都疲软了,不得不打烊?

好吧,奶奶叫俺回家喝酒 {:4_206:}

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

酒杯会不会飞到俺家{:4_170:}

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

马黑黑 发表于 2023-9-9 12:11

醉美水芙蓉 发表于 2023-9-9 11:58
已经飞到黑黑老师家里了!

没瞧见呀

东篱闲人 发表于 2023-9-9 13:31

酒馆打烊,你可以喝水啊。。。{:4_180:}

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

梦油 发表于 2023-9-9 11:37
漫天飘逸的酒杯好浪漫哦!

可以美酒加咖啡一杯再一杯{:4_173:}

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

马黑黑 发表于 2023-9-9 11:50
看样纸电力不足,灯都疲软了,不得不打烊?

好吧,奶奶叫俺回家喝酒

酒馆老板欠债逃跑了,酒馆开不下去了{:4_189:}

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

马黑黑 发表于 2023-9-9 11:50
酒杯会不会飞到俺家

必须的啊,想要多有有多少{:4_173:}

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

东篱闲人 发表于 2023-9-9 13:31
酒馆打烊,你可以喝水啊。。。

哈哈,东篱大哥把喝水的事接得这么好,太想不到了{:4_182:}

马黑黑 发表于 2023-9-9 15:04

红影 发表于 2023-9-9 14:52
必须的啊,想要多有有多少

那太好了,连网街都不用逛了

马黑黑 发表于 2023-9-9 15:04

红影 发表于 2023-9-9 14:52
酒馆老板欠债逃跑了,酒馆开不下去了

倒闭了

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

红影 发表于 2023-9-9 14:51
可以美酒加咖啡一杯再一杯

我退休以前一直喝咖啡,退休以后该喝茉莉花茶了。

小辣椒 发表于 2023-9-9 16:18

漂亮,亲爱的速度的,黑黑今天的新的教程立马出来了{:4_199:}

小辣椒 发表于 2023-9-9 16:22

打开帖子就听到了很熟的一首歌,这酒馆还很幽静的,没有电光闪烁,但酒杯翩翩起舞了{:4_199:}
页: [1] 2 3 4 5 6 7
查看完整版本: 你的酒馆对我打了烊(学习黑黑H5粒子插件 + 播放器插件)