论坛 › 音乐沙龙 › Harry Westlake - Rich Girl

马黑黑 发表于 2024-1-8 18:05

Harry Westlake - Rich Girl

本帖最后由 马黑黑 于 2024-1-8 18:15 编辑 <br /><br /><style>
#papa { margin: -70px 0 0 calc(50% - 681px); width: 1200px; height: 795px; box-shadow: 3px 3px 20px #000; background: url('https://638183.freep.cn/638183/t24/jpg/richgirl.jpg') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 760px; top: -60px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" loop muted></video>
</div>

<script>

var sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=2006434984');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-2.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: rgba(0,100,0,.7);
                --btnSize: 50px;
        `);
        player.setLrcCss('top: 15px; color: rgba(144,238,144,.9); --bg: rgba(0,100,0,.65); font-size: 2.0em;');
        player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};

</script>

马黑黑 发表于 2024-1-8 18:12

代码
<style>
#papa { margin: -70px 0 0 calc(50% - 681px); width: 1200px; height: 795px; box-shadow: 3px 3px 20px #000; background: url('https://638183.freep.cn/638183/t24/jpg/richgirl.jpg') no-repeat center/cover; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
#papa video { position: absolute; width: 100%; height: 760px; top: -60px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; }
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" loop muted></video>
</div>

<script>
let sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/ypPlayer.min.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        let player = new ypP();
        player.setAudSrc('https://music.163.com/song/media/outer/url?id=2006434984');
        player.setBtnCss(`
                width: 300px;
                bottom: 10px;
                --btnBg: url('https://638183.freep.cn/638183/web/svg/sunfl-2.svg') no-repeat center/cover;
                --trackBg: transparent;
                --progBg: rgba(0,100,0,.7);
                --btnSize: 50px;
        `);
        player.setLrcCss('top: 15px; color: rgba(144,238,144,.9); --bg: rgba(0,100,0,.65); font-size: 2.0em;');
        player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};
</script>

醉美水芙蓉 发表于 2024-1-8 19:24

马黑黑 发表于 2024-1-8 19:57

醉美水芙蓉 发表于 2024-1-8 19:24
问候老师晚上好！

{:4_190:}

千羽 发表于 2024-1-8 19:59

俺去换个浏览器……

马黑黑 发表于 2024-1-8 20:01

千羽 发表于 2024-1-8 19:59
俺去换个浏览器……
你还用IE内核的浏览器呀

千羽 发表于 2024-1-8 20:03

马黑黑 发表于 2024-1-8 20:01
你还用IE内核的浏览器呀

黑黑老师，我的浏览器都不给力，你推荐一个呗{:4_203:}

马黑黑 发表于 2024-1-8 20:06

千羽 发表于 2024-1-8 20:03
黑黑老师，我的浏览器都不给力，你推荐一个呗

你先说说你的操作系统是Windows几

千羽 发表于 2024-1-8 20:12

马黑黑 发表于 2024-1-8 20:06
你先说说你的操作系统是Windows几

10{:4_181:}

红影 发表于 2024-1-8 20:14

这首外文歌曲，而且歌词很快，做同步歌词还真挺不容易呢。
欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2024-1-8 20:41

红影 发表于 2024-1-8 20:14
这首外文歌曲，而且歌词很快，做同步歌词还真挺不容易呢。
欣赏黑黑好帖

今天做歌词做的不太好

马黑黑 发表于 2024-1-8 20:42

千羽 发表于 2024-1-8 20:12
10

win10的话，升级它自带的浏览器 Edge 到最新版本，非常好用。

红影 发表于 2024-1-8 21:50

马黑黑 发表于 2024-1-8 20:41
今天做歌词做的不太好

挺好啊，我这里看到的很准确呢{:4_187:}

小辣椒 发表于 2024-1-8 22:07

黑黑这个源码二楼没有特殊注解啊，这个播放器按钮用了svg图片

小辣椒 发表于 2024-1-8 22:07

其实我蛮喜欢带进度条的播放器的{:4_170:}

小辣椒 发表于 2024-1-8 22:08

谢谢黑黑分享教程，小辣椒要努力了{:4_170:}

千羽 发表于 2024-1-8 22:47

马黑黑 发表于 2024-1-8 20:42
win10的话，升级它自带的浏览器 Edge 到最新版本，非常好用。

我试了下，真的挺好的，以前都打入了冷宫{:4_173:}

千羽 发表于 2024-1-8 22:51

马黑黑 发表于 2024-1-8 20:42
win10的话，升级它自带的浏览器 Edge 到最新版本，非常好用。

感觉真的挺好用，太高兴了，多谢黑黑老师{:4_187:}{:4_180:}

马黑黑 发表于 2024-1-8 23:15

千羽 发表于 2024-1-8 22:51
感觉真的挺好用，太高兴了，多谢黑黑老师

而且你会感觉到越用越好用

马黑黑 发表于 2024-1-8 23:16

千羽 发表于 2024-1-8 22:47
我试了下，真的挺好的，以前都打入了冷宫

Edge今非昔比，现在它是顶尖的浏览器

查看完整版本: Harry Westlake - Rich Girl