漫步人生路（学习黑黑《青花》老唱机效果）
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://pic.imgdb.cn/item/66cebdc2d9c307b7e942e30e.jpg') no-repeat center/cover;
box-shadow: 0 0 8px rgba(0,0,0,.65);
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > 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);
pointer-events: none;
}
.tubiao {
position: absolute;
width: 404px;
height: 626px;
left: 270px; opacity: 0.5;
bottom: 0px;
mix-blend-mode: screen;
}
</style>
<div id="mama" class="mama">
<audio src="https://www.kumeiwp.com/wj/196999/2024/02/07/1275c607f1520e45425216533b0922f3.mp3" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/17/43/5ec480402b7ec.mp4" autoplay loop muted></video>
<video src="https://img.tukuppt.com/video_show/7165162/00/20/20/5f2102739a334.mp4" autoplay loop muted></video>
<img class="tubiao" src="https://pic.imgdb.cn/item/66cec395d9c307b7e94c6bff.jpg" alt="" />
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/plater_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
player_css: 'left: 120px; bottom: 20px; --color2: #b3a694; --color1: #f8e0bf; --bg: url("https://pic.imgdb.cn/item/66cec5c5d9c307b7e94e2e92.png") no-repeat center/cover; --border: #212;',
lrc_css: 'right: 160px;bottom: 40px; --bg: linear-gradient(#f8e0bf, #a26106); color: #f8e0bf;',
fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: #eee;',
});
};
var geci = `
《漫步人生路》- 邓丽君
学习黑黑老唱片效果
感谢黑黑的代码
在你身边路虽远未疲倦
伴你漫行一段接一段
越过高峰另一峰却又见
目标推远让理想永远在前面
路纵崎岖亦不怕受磨练
愿一生中苦痛快乐也体验
愉快悲哀在身边转又转
风中赏雪 雾里赏花快乐回旋
毋庸计较快欣赏身边美丽每一天
还愿确信美景良辰在脚边
愿将欢笑声盖掩苦痛那一面
悲也好 喜也好 每天找到新发现
让疾风吹呀吹 尽管给我俩考验
小雨点 放心洒早就决心向着前
路纵崎岖亦不怕受磨练
愿一生中苦痛快乐也体验
愉快悲哀在身边转又转
风中赏雪 雾里赏花快乐回旋
毋庸计较快欣赏身边美丽每一天
还愿确信美景良辰在脚边
愿将欢笑声盖掩苦痛那一面
悲也好 喜也好 每天找到新发现
让疾风吹呀吹 尽管给我俩考验
小雨点 放心洒早就决心向着前
`;
</script> 学习一下把唱机用光盘替换看看效果。
谢谢黑黑的代码{:4_187:} 虚实结合，独有情趣。 梦油 发表于 2024-8-31 09:41
虚实结合，独有情趣。
原来的底图上有字，我把它改了，你看图片上出现了“花潮”两字以及歌曲名{:4_173:} 红影 发表于 2024-8-31 09:47
原来的底图上有字，我把它改了，你看图片上出现了“花潮”两字以及歌曲名
看到了，你设计的真好。 哦，看到了店铺叫“花潮” 赞！{:4_187:} 梦油 发表于 2024-8-31 17:18
看到了，你设计的真好。
主要涂抹掉原来的字了以后看着那块太空了{:4_173:} 梦江南 发表于 2024-8-31 17:21
哦，看到了店铺叫“花潮” 赞！
哈哈，花潮能请到邓丽君来演唱，多开心啊{:4_173:} 这么美的制作看得冬雨惊呆了，居然花潮开店铺了{:4_170:} 美女现在你越来越厉害了{:4_178:} 红影 发表于 2024-8-31 22:48
哈哈，花潮能请到邓丽君来演唱，多开心啊
邓丽君穿越时空到花潮论坛来了。{:4_173:} 头一次看红影的音画作品 炫彩 漂亮 红影 发表于 2024-8-31 22:48
主要涂抹掉原来的字了以后看着那块太空了
这样处理，朋友们看了更觉得亲切。 冬天的雨 发表于 2024-9-1 11:28
这么美的制作看得冬雨惊呆了，居然花潮开店铺了
哈哈，偷偷改个文字而已{:4_173:} 梦江南 发表于 2024-9-1 11:31
邓丽君穿越时空到花潮论坛来了。
假装一下也开心{:4_173:} 游侠 发表于 2024-9-1 12:51
头一次看红影的音画作品 炫彩 漂亮
啊？我好像也做了不少了吧{:4_173:} 梦油 发表于 2024-9-1 14:56
这样处理，朋友们看了更觉得亲切。
主要好玩一下，胡乱组合{:4_173:} 醉美水芙蓉 发表于 2024-9-1 19:25
花潮开店了，来光临红影美女的花潮店铺！
谢谢水芙蓉美女，水芙蓉美女光临，影子当扫地相迎{:4_187:}