论坛 › 音乐沙龙 › 超然物外心自宽（学习黑黑《变奏的梦想》多曲专辑制作）

红影 发表于 2024-8-31 09:51

超然物外心自宽（学习黑黑《变奏的梦想》多曲专辑制作）

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

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8aff3ce01_10s_big.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: `
                        left: 310px; bottom: 20px;
                        background: url('https://pic.imgdb.cn/item/66d1eea2d9c307b7e91a75cf.jpg') no-repeat center/cover;
                        opacity: .65; mix-blend-mode: normal;
                        color: green;
                        --track: gray; --prog: Orange;
                        --ww: 320px;
                        --hh: 60px;
                `,
                fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: #eee;',
        });
};

var music_ar = [
        ['https://music.163.com/song/media/outer/url?id=444075742', '青城之山'],
        ['https://music.163.com/song/media/outer/url?id=522468052', '紫气东来'],
        ['https://music.163.com/song/media/outer/url?id=522467321', '天地行云'],
        ['https://music.163.com/song/media/outer/url?id=522468278', '一拂尘烟'],
        ['https://music.163.com/song/media/outer/url?id=522467506', '云门'],
        ['https://music.163.com/song/media/outer/url?id=522468463', '钧天广乐'],
        ['https://music.163.com/song/media/outer/url?id=444323045', '太极幻影'],
        ['https://music.163.com/song/media/outer/url?id=444323047', '步步莲花'],
        ['https://music.163.com/song/media/outer/url?id=444003961', '云水潇湘'],
];
</script>

红影 发表于 2024-8-31 09:53

用了图片做播放器底板，发现音乐按钮都太淡了，想用mix-blend-mode:调整一下，发现效果都不理想。除非去动js，又不想动。就这样吧。
谢谢黑黑的代码{:4_187:}

红影 发表于 2024-8-31 09:56

这个效果貌似用深色播放器小图也不太好，要不我去试个深色图图。。

起个网名好难 发表于 2024-8-31 10:03

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

红影 发表于 2024-8-31 10:05

https://pic.imgdb.cn/item/66d27a30d9c307b7e9a9d409.jpg

深色能让按钮显示更清楚，颜色却有些厚重了，算了就这样吧{:4_173:}

红影 发表于 2024-8-31 10:07

起个网名好难 发表于 2024-8-31 10:03


谢谢难难鼓励{:4_187:}

冬天的雨 发表于 2024-8-31 11:24

给美女先点赞，以后再上来欣赏{:4_199:}

梦油 发表于 2024-8-31 11:38

好雅致得画面啊！

红影 发表于 2024-8-31 15:53

冬天的雨 发表于 2024-8-31 11:24
给美女先点赞，以后再上来欣赏

谢谢冬小雨，我也是瞎玩在学习呢{:4_173:}

红影 发表于 2024-8-31 15:53

梦油 发表于 2024-8-31 11:38
好雅致得画面啊！

想弄个修炼的场景，隐居世外，多逍遥自在啊{:4_173:}

梦油 发表于 2024-8-31 17:24

红影 发表于 2024-8-31 15:53
想弄个修炼的场景，隐居世外，多逍遥自在啊

是的。我也喜欢那样的场景。

上海朝阳 发表于 2024-8-31 20:01

能不能把人的边框虚化，融合在树荫下

绿叶清舟 发表于 2024-8-31 20:18

很雅致的场景，进来一下子凉快了好多

小辣椒 发表于 2024-8-31 22:47

红影 发表于 2024-8-31 10:05
深色能让按钮显示更清楚，颜色却有些厚重了，算了就这样吧

亲爱的，我在想这图片减低透明度可以吧，我想纯是透明的用，等做的时候再说了

小辣椒 发表于 2024-8-31 22:50

非常的漂亮，画面古色古香，优雅的文人墨客，亲爱的好制作{:4_199:}

小辣椒 发表于 2024-8-31 22:51

亲爱的就是优秀，做的作业就是完美{:4_178:}

红影 发表于 2024-8-31 22:51

梦油 发表于 2024-8-31 17:24
是的。我也喜欢那样的场景。

正好有这样的代码，可以放比较多的曲子，在喜欢的场景里可以听个够了{:4_173:}

红影 发表于 2024-8-31 22:52

上海朝阳 发表于 2024-8-31 20:01
能不能把人的边框虚化，融合在树荫下

这个边框是播放器呢，朝阳大哥说得对，也许我应该把人物放在树下，播放器底板另外换个{:4_187:}

红影 发表于 2024-8-31 22:53

绿叶清舟 发表于 2024-8-31 20:18
很雅致的场景，进来一下子凉快了好多

凉快了就多转一会{:4_173:}

红影 发表于 2024-8-31 22:54

小辣椒 发表于 2024-8-31 22:47
亲爱的，我在想这图片减低透明度可以吧，我想纯是透明的用，等做的时候再说了

我试过，降低透明度按钮跟着一起降低了，看不清了。用mix-blend-mode:也是一样，按钮跟着一起变的。{:4_190:}

查看完整版本: 超然物外心自宽（学习黑黑《变奏的梦想》多曲专辑制作）