醉美水芙蓉 发表于 2024-4-28 22:05

倔强的骨头

本帖最后由 醉美水芙蓉 于 2024-4-28 22:19 编辑 <br /><br /><style>
    #papa { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/662ce2cf0ea9cb1403e52a75.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; pointer-events: none; position: relative; }
    #papa::after, #vid { position: absolute; left: calc(50% - 125px); top: 55px; width: 200px; height: 200px; border-radius: 0 40%; transform: rotate(45deg); }
    #papa::after { content: ''; cursor: pointer; pointer-events: auto; box-shadow: 0 0 8px rgba(255, 255, 255, .2); }
    #canv { position: absolute; }
    #vid { object-fit: cover; mix-blend-mode: screen; filter: hue-rotate(300deg) opacity(.5); }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2129491291" loop autoplay></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/83/5b4abcfb3acff.mp4" loop muted></video>
    <canvas id="canv" width="1024" height="640"></canvas>
</div>
<script>
//函数 ：加载JS资源
var loadJs = (file, callback) => {
        let sc = document.createElement('script');
        sc.src = file;
        sc.charset = 'utf-8';
        document.body.appendChild(sc);
        sc.onload = () => callback();
};

//需要加载的JS资源src
var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js',
        js2 = 'https://638183.freep.cn/638183/web/js/dot-lz.js';

//歌词js先加载并用回调方式配置参数
loadJs(js1, () => {
        LRC({
                papa: '#papa',
                lrcAr: lrcAr,
                btn: '#player',
                lrc_css: 'bottom: 26px;left: 350px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 26px;color: #fff;',
        });
});

loadJs(js2, () => {}); //粒子js后加载


var lz = {papa: '#papa', total: 42, r: 6, max_r: 24, step: 0.5, color: '', opacity: .3, move: true};

//歌词数组
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

papa.onclick = () => lz.move =!aud.paused; //控制小球

</script>

红影 发表于 2024-4-28 22:20

我这里歌曲听不了，所以漂亮的效果也看不到了呢{:4_204:}

醉美水芙蓉 发表于 2024-4-28 22:27

红影 发表于 2024-4-28 22:20
我这里歌曲听不了，所以漂亮的效果也看不到了呢

谢谢反馈！已经换了地址了！

红影 发表于 2024-4-28 22:36

醉美水芙蓉 发表于 2024-4-28 22:27
谢谢反馈！已经换了地址了！

嗯嗯，看到效果了，真棒。欣赏水芙蓉好帖{:4_199:}
好像暂停点不了呢？{:4_203:}

醉美水芙蓉 发表于 2024-4-28 22:44

红影 发表于 2024-4-28 22:36
嗯嗯，看到效果了，真棒。欣赏水芙蓉好帖
好像暂停点不了呢？

暂停还没有研究过呢！

红影 发表于 2024-4-28 22:59

醉美水芙蓉 发表于 2024-4-28 22:44
暂停还没有研究过呢！

出现了手型指示，但是点了没反应呢{:4_173:}

醉美水芙蓉 发表于 2024-4-28 23:16

红影 发表于 2024-4-28 22:59
出现了手型指示，但是点了没反应呢

没有研究出来！需要请教老师了！

起个网名好难 发表于 2024-4-29 07:33

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

起个网名好难 发表于 2024-4-29 07:35

评分后所有的动态就不见了（不动），估计刷新页面后会恢复。

红影 发表于 2024-4-29 10:47

醉美水芙蓉 发表于 2024-4-28 23:16
没有研究出来！需要请教老师了！

应该是层级问题吧，播放器放到最上层应该就可以了。
页: [1]
查看完整版本: 倔强的骨头