绿叶清舟 发表于 2024-9-1 14:48

花开的声音TO小辣椒

<style>
#papa {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://pic.imgdb.cn/item/66d40910d9c307b7e91b61c2.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
}
#papa > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: soft-light;
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        transform: rotateX(180deg);
        pointer-events: none;
}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/2629112/00/02/00/5b502e0c3a99a.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/mplayer.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#papa',
                musics: music_ar,
                title: '花开的声音',
                                player_css: `
                        bottom: 2px;
                        background: none;
                        border:double #85acb3;
                        color: white;
                        --ww: 300px;
                        --hh: 140px;
                        --track: #1568ff;
                        --prog: #85acb3;
                `,
                fs_css: 'top: 20px;',
        });
};

var music_ar = [
        ['https://music.163.com/song/media/outer/url?id=313262', '一千年之后'],
        ['https://music.163.com/song/media/outer/url?id=313281', '没那么简单'],
        ['https://music.163.com/song/media/outer/url?id=313276', '只要有你'],
        ['https://music.163.com/song/media/outer/url?id=313275', '无所谓'],
        ['https://music.163.com/song/media/outer/url?id=313272', '一首简单的歌'],
        ['https://music.163.com/song/media/outer/url?id=313286', '梦里都是你'],
        ['https://music.163.com/song/media/outer/url?id=313269', '比我幸福'],
];
</script>

梦油 发表于 2024-9-1 15:13

欣赏美曲，问候清舟。

梦江南 发表于 2024-9-1 15:24

欣赏老师音画佳作！下午好！

四海八荒 发表于 2024-9-1 16:07

来听歌！

四海八荒 发表于 2024-9-1 16:07

莫名伤感

马黑黑 发表于 2024-9-1 16:19

{:4_174:}

醉美水芙蓉 发表于 2024-9-1 16:44

绿叶清舟 发表于 2024-9-1 20:05

梦油 发表于 2024-9-1 15:13
欣赏美曲，问候清舟。

梦油晚上好

绿叶清舟 发表于 2024-9-1 20:05

醉美水芙蓉 发表于 2024-9-1 16:44
欣赏清舟美贴！

谢谢芙蓉，晚上好

绿叶清舟 发表于 2024-9-1 20:06

马黑黑 发表于 2024-9-1 16:19


这么巴适

绿叶清舟 发表于 2024-9-1 20:06

四海八荒 发表于 2024-9-1 16:07
莫名伤感

怎么会啊

绿叶清舟 发表于 2024-9-1 20:07

四海八荒 发表于 2024-9-1 16:07
来听歌！

奉茶{:4_190:}四海晚上好

绿叶清舟 发表于 2024-9-1 20:07

梦江南 发表于 2024-9-1 15:24
欣赏老师音画佳作！下午好！

谢谢江南，晚上好

小辣椒 发表于 2024-9-1 20:37

居然是送我的，清舟也是没有艾特一下{:4_198:}

小辣椒 发表于 2024-9-1 20:40

漂亮，这个专辑做的太美了，我也是喜欢这个透明的播放器背景，但我开始没有看见黑黑这个源码，我自己瞎改了一个，想按钮和进度条和列表按钮都在一条平行线上，修改没有成功，还不够完善，今天发不了了

小辣椒 发表于 2024-9-1 20:41

谢谢清舟的精美礼物，赶紧收藏起来{:4_205:}

四海八荒 发表于 2024-9-1 20:53

绿叶清舟 发表于 2024-9-1 20:07
奉茶四海晚上好

清舟晚上好

岁月·如歌 发表于 2024-9-1 21:23

大手笔大制作！漂亮！

绿叶清舟 发表于 2024-9-1 21:37

小辣椒 发表于 2024-9-1 20:40
漂亮，这个专辑做的太美了，我也是喜欢这个透明的播放器背景，但我开始没有看见黑黑这个源码，我自己瞎改了 ...

你要改的那个要在JS文件里动了吧

绿叶清舟 发表于 2024-9-1 21:37

岁月·如歌 发表于 2024-9-1 21:23
大手笔大制作！漂亮！

有这么多大嘛{:4_189:}
页: [1] 2 3
查看完整版本: 花开的声音TO小辣椒