柒月
<style>#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/webp2/7yt.webp') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transform: rotateY(180deg);
opacity: .7;
mix-blend-mode: lighten;
-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=31563948" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `柒月\n所属专辑 ：热门华语263\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日记清晰记录爱的轨迹\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我会怀念你昨天拿走的我心的另一半\n2024-8-19`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpuz_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
pinpu: { num: 40, color: 'linear-gradient(to right, transparent, green, lightgreen)' },
player_css: 'right: 80px; top: 80px; --color: darkgreen; --len: 3px;',
lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient( #eee, #009b06d3); color: #ccc;',
fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: green;',
});
};
</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/webp2/7yt.webp') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transform: rotateY(180deg);
opacity: .7;
mix-blend-mode: lighten;
-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=31563948" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/15653652/04/06/21/646b0add8b43e.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `柒月\n所属专辑 ：热门华语263\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日记清晰记录爱的轨迹\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我会怀念你昨天拿走的我心的另一半\n2024-8-19`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/pinpuz_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
pinpu: { num: 40, color: 'linear-gradient(to right, transparent, green, lightgreen)' },
player_css: 'right: 80px; top: 80px; --color: darkgreen; --len: 3px;',
lrc_css: 'left: 50%; transform: translateX(-50%); top: 20px; --bg: linear-gradient( #eee, #009b06d3); color: #ccc;',
fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: green;',
});
};
</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歌词同步之圆环正频谱播放器：
原生lrc歌词同步之圆环正频谱播放器 (52qingyin.cn)
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 谢谢老师无私奉献，辛苦了！{:4_187:} 制作漂亮。欣赏老师好帖{:4_204:} 马黑黑 发表于 2024-8-19 07:24
原生lrc歌词同步之圆环正频谱播放器：
原生lrc歌词同步之圆环正频谱播放器 (52qingyin.cn)
黑黑老师163音乐都 断链了！ 起个网名好难 发表于 2024-8-19 07:25
老师，163音乐都 断链了！ 精彩不断，欣赏、学习！ 梦江南 发表于 2024-8-19 15:56
黑黑老师163音乐都 断链了！
基础设施故障，现在已经修复 彩云归 发表于 2024-8-19 17:23
精彩不断，欣赏、学习！
晚上好 又一个新的原生歌词播放器效果。
黑黑辛苦了，这个制作很漂亮，视频效果的选取特别棒{:4_199:} mix-blend-mode: lighten;的效果能把视频里的底色弄得那么干净。而且效果像是圆环甩出的泡泡{:4_173:} 红影 发表于 2024-8-19 19:20
mix-blend-mode: lighten;的效果能把视频里的底色弄得那么干净。而且效果像是圆环甩出的泡泡
一切皆有可能 这个先收藏好，空了完成作业 马黑黑 发表于 2024-8-19 20:03
一切皆有可能
这样效果漂亮{:4_187:}
页:
[1]