自己
<style>#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/ziji.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;
}
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=1429125926" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086d380044e.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/curve_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
dir: 2,
img: {play: '', pause: ''},
player_css: `
left: 50%;
transform:translateX(-50%);
bottom: 10px;
width: 200px;
height: 90px;
--track: #ddffcc;
--prog: #fff;
`,
lrc_css: 'left: 50%; top: 20px; transform: translateX(-50%);',
fs_css: 'right: 10px; top: 10px; --bg: transparent; --color: white;',
});
};
var geci = `自己\n歌手 ：刘亦菲\n仔细地 看着波光中清晰的倒影\n是另一个自己\n它属于 我最真实的表情\n不愿意 生活中掩饰真心敷衍了\n爱我的人的眼睛\n我 心中的自己\n每一秒 都愿意\n为爱放手去追寻\n用心去珍惜\n隐藏在 心中每一个真实的心情\n现在释放出去\n我想要 呈现世界前更有力量的\n更有勇气的生命\n我 眼中的自己\n每一天 都相信\n活得越来越像我爱的自己\n我心中的自己\n每一秒 都愿意\n为爱放手去追寻\n用心去珍惜\n只有爱里才拥有自由气息\n诚实 面对自己才有爱的决心\n我 眼中的自己\n每一天 都相信\n活得越来越像我爱的自己\n我 心中的自己\n每一秒 都愿意\n为爱放手去追寻\n去珍惜 去爱\n为爱放手去追寻\n用心去珍惜`;
</script>
<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/4/ziji.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;
}
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=1429125926" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086d380044e.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/curve_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
dir: 2,
img: {play: '', pause: ''},
player_css: `
left: 50%;
transform:translateX(-50%);
bottom: 10px;
width: 200px;
height: 90px;
--track: #ddffcc;
--prog: #fff;
`,
lrc_css: 'left: 50%; top: 20px; transform: translateX(-50%);',
fs_css: 'right: 10px; top: 10px; --bg: transparent; --color: white;',
});
};
var geci = `自己\n歌手 ：刘亦菲\n仔细地 看着波光中清晰的倒影\n是另一个自己\n它属于 我最真实的表情\n不愿意 生活中掩饰真心敷衍了\n爱我的人的眼睛\n我 心中的自己\n每一秒 都愿意\n为爱放手去追寻\n用心去珍惜\n隐藏在 心中每一个真实的心情\n现在释放出去\n我想要 呈现世界前更有力量的\n更有勇气的生命\n我 眼中的自己\n每一天 都相信\n活得越来越像我爱的自己\n我心中的自己\n每一秒 都愿意\n为爱放手去追寻\n用心去珍惜\n只有爱里才拥有自由气息\n诚实 面对自己才有爱的决心\n我 眼中的自己\n每一天 都相信\n活得越来越像我爱的自己\n我 心中的自己\n每一秒 都愿意\n为爱放手去追寻\n去珍惜 去爱\n为爱放手去追寻\n用心去珍惜`;
</script>
</pre></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script> 帖子测试：原生lrc歌词同步之曲线进度条播放器 (52qingyin.cn)
抽象中的冥想，简洁而不简单，欣赏问好 这个设计巧妙，让曲线进度恰好连起两个人像{:4_199:} 看着这些熟悉的的播放器，感觉很已经和它们混成脸熟了，再加上原生歌词的封装，做帖更方便了{:4_199:} 茉莉 发表于 2024-8-30 10:49
抽象中的冥想，简洁而不简单，欣赏问好
{:4_190:} 红影 发表于 2024-8-30 14:03
看着这些熟悉的的播放器，感觉很已经和它们混成脸熟了，再加上原生歌词的封装，做帖更方便了
{:4_190:} 红影 发表于 2024-8-30 14:02
这个设计巧妙，让曲线进度恰好连起两个人像
有点抽象吧？ 手机党制作原生歌词 心酸酸{:4_364:} 马黑黑 发表于 2024-8-30 14:09
谢大咖{:4_187:} 马黑黑 发表于 2024-8-30 14:09
有点抽象吧？
是呢，很独特的效果{:4_187:} 这个是以前的小路径播放器？ 现在黑黑系统整理了前面所以播放器了吧{:4_178:} 这个图图特别有趣，细品艺术范特别的强，好看{:4_199:} 小辣椒 发表于 2024-8-30 22:40
这个图图特别有趣，细品艺术范特别的强，好看
谢谢 小辣椒 发表于 2024-8-30 22:39
现在黑黑系统整理了前面所以播放器了吧
还差一个，明天发布 小辣椒 发表于 2024-8-30 22:38
这个是以前的小路径播放器？
说过的，花潮lrc歌词 → 原生lrc歌词 欣赏老师独特的图图和播放器。辛苦了！ 梦江南 发表于 2024-8-31 15:22
欣赏老师独特的图图和播放器。辛苦了！
{:4_190:}
页:
[1]