银临 - 眉南边
本帖最后由 马黑黑 于 2024-1-18 13:32 编辑 <br /><br /><style>#papa { margin: -70px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/mwnjbm.jpg') no-repeat center/cover, radial-gradient(orange,black,blue); background-blend-mode: difference; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa video { position: absolute; left: -60px; bottom: 0; transform: rotateY(180deg); width: 600px; height: 360px; object-fit: cover; clip-path: ellipse(300px 180px at center); mix-blend-mode: screen; opacity: .85; }
</style>
<div id="papa">
<video src="https://img.tukuppt.com/video_show/2418175/01/29/77/62a74f69d75af.mp4" muted loop></video>
</div>
<script>
(function() {
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=1998355620');
player.setBtnCss(`
width: 300px;
left: 20px;
bottom: 10px;
--btnBg: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
--trackBg: transparent;
--progBg: rgba(10,10,160,0.45);
--btnSize: 50px;
`);
player.setLrcCss('left: 20px; top: 15px; color: rgba(256,560,560,.7); --bg: rgba(200,106,56,0.75); font-size: 2.0em;'); player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};
})();
</script>
代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/mwnjbm.jpg') no-repeat center/cover, radial-gradient(orange,black,blue); background-blend-mode: difference; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa video { position: absolute; left: -60px; bottom: 0; transform: rotateY(180deg); width: 600px; height: 360px; object-fit: cover; clip-path: ellipse(300px 180px at center); mix-blend-mode: screen; opacity: .85; }
</style>
<div id="papa">
<video src="https://img.tukuppt.com/video_show/2418175/01/29/77/62a74f69d75af.mp4" muted loop></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=1998355620');
player.setBtnCss(`
width: 300px;
left: 20px;
bottom: 10px;
--btnBg: url('https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png') no-repeat center/cover;
--trackBg: transparent;
--progBg: rgba(10,10,160,0.45);
--btnSize: 50px;
`);
player.setLrcCss('left: 20px; top: 15px; color: rgba(256,560,560,.7); --bg: rgba(200,106,56,0.75); font-size: 2.0em;'); player.lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
};
</script>
这个背景混合弄得漂亮，视频的裁剪也漂亮。歌曲好听，这个好像还是高品质音乐呢。
欣赏黑黑好帖{:4_199:} 径向渐变用在图图里也很好看呢，让图图有了别样的意味，漂亮{:4_199:} 黑黑又带来了新的效果运用{:4_199:} 图中的美女十分清秀，配上这样轻松并且韵味浓郁的歌曲，更增添了《银临-眉南边》的魅力。 https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 起个网名好难 发表于 2024-1-18 17:00
感谢支持。晚上好 梦油 发表于 2024-1-18 16:57
图中的美女十分清秀，配上这样轻松并且韵味浓郁的歌曲，更增添了《银临-眉南边》的魅力。
你的点评很是精彩！谢谢！ 红影 发表于 2024-1-18 14:29
这个背景混合弄得漂亮，视频的裁剪也漂亮。歌曲好听，这个好像还是高品质音乐呢。
欣赏黑黑好帖
银临的名气也不是太差的 红影 发表于 2024-1-18 14:31
径向渐变用在图图里也很好看呢，让图图有了别样的意味，漂亮
这里和前面介绍的背景混合示例恰好是反过来的：渐变是作为融合层，图片顶层。 醉美水芙蓉 发表于 2024-1-18 19:00
欣赏黑黑老师极品音画！
晚上嚎 马黑黑 发表于 2024-1-18 18:17
银临的名气也不是太差的
是呢，歌曲很好听{:4_187:} 马黑黑 发表于 2024-1-18 18:19
这里和前面介绍的背景混合示例恰好是反过来的：渐变是作为融合层，图片顶层。
是的，先是图片，然后是径向渐变，所以图图在上{:4_187:} 漂亮{:4_204:} 又是有奖的，来得早不如来得巧{:5_106:} 最喜欢拿钱了{:5_106:} 把钱都拿掉 不给别人留