柒月

马黑黑

马黑黑

帖子代码

<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 = `[00:01.00]柒月\n[00:08.06]所属专辑 ：热门华语263\n[00:14.00]歌手 ：石头剪子布\n[00:28.264]时光倔强的从我指缝中慢慢溜去\n[00:31.544]一滴一滴划破平静掩面叹息\n[00:33.761]或许我无力抗拒\n[00:35.591]或许我还记得曾经\n[00:37.105]记得你和我一起路过那些烂漫风景\n[00:40.816]心被冷漠拍打翻滚了几个世纪\n[00:44.97]爱情原来只是自己蒙蔽自己的东西\n[00:47.280]潇洒了谁又寂寞了谁\n[00:50.157]双手合十期盼命运不会再度让我沦陷\n[00:53.77]七月的风偷恋花的香气\n[00:56.156]七月的你又住进谁的心\n[00:59.440]烟花耀眼灼伤我的回忆\n[01:02.515]泪决了堤\n[01:05.851]你的承诺让我分辨不清\n[01:08.779]人说不定该更信自己\n[01:12.04]纪念你让我相信爱的美丽\n[01:15.79]现在就拥抱自己然后看清自己\n[01:19.167]我被半个人的生活一步一步的渐渐掩埋\n[01:22.93]我该害怕未来\n[01:23.157]怎么面对我的付出和你的离开\n[01:25.427]我用力呼吸让我感到生命的存在\n[01:28.399]我们经历的一切只是故事而结局太伤感\n[01:31.223]那些欣赏那些鼓励\n[01:32.691]像是皇帝的新装那么无奈\n[01:34.865]那些理解那些包容\n[01:36.227]只是人类那纯粹的伪善\n[01:37.791]我会记住你今天给我带来的一切伤害\n[01:40.718]我会怀念你昨天拿走的我心的另一半\n[02:09.34]七月的星偷恋云的神秘\n[02:11.960]七月的你又接受谁的心\n[02:15.91]日记清晰记录爱的轨迹\n[02:18.270]泪决了堤\n[02:21.503]你的离去让我分辨不清\n[02:24.531]人说不定都更爱自己\n[02:27.763]祭奠你让我痛恨爱的无情\n[02:30.791]现在就捡起自己不能放弃自己\n[02:34.532]时光倔强的从我指缝中慢慢溜去\n[02:37.867]一滴一滴划破平静掩面叹息\n[02:40.247]我已经无力抗拒\n[02:41.875]我还会记得曾经\n[02:43.495]记得你心意已决我如何挽回都力不从心\n[02:46.675]心被冷漠拍打翻滚了几个世纪\n[02:50.411]爱情只是帮助别人得到自己的工具\n[02:53.234]伤害了谁又亏欠了谁\n[02:56.462]双手合十期盼命运不会再度让我沦陷\n[02:59.335]我被半个人的生活一步一步的渐渐掩埋\n[03:03.74]我该害怕未来\n[03:04.584]怎么面对我的付出和你的离开\n[03:06.854]我用力呼吸让我感到生命的存在\n[03:09.626]我们经历的一切只是故事而结局太伤感\n[03:12.454]那些约定那些誓言\n[03:14.18]像皇帝的新装那么无奈\n[03:15.786]那些理解那些包容\n[03:17.556]只是人类那纯粹的伪善\n[03:19.67]我会记住你今天给我带来的一切伤害\n[03:21.334]我会怀念你昨天拿走的我心的另一半\n[03:27.00]2024-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>

马黑黑

原生lrc歌词同步之圆环正频谱播放器：

原生lrc歌词同步之圆环正频谱播放器 (52qingyin.cn)

起个网名好难

                               
登录/注册后可看大图

梦江南

谢谢老师无私奉献，辛苦了！

竹溪

制作漂亮。欣赏老师好帖

梦江南

马黑黑 发表于 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
精彩不断，欣赏、学习！

晚上好

红影

又一个新的原生歌词播放器效果。
黑黑辛苦了，这个制作很漂亮，视频效果的选取特别棒

红影

mix-blend-mode: lighten;的效果能把视频里的底色弄得那么干净。而且效果像是圆环甩出的泡泡

马黑黑

红影 发表于 2024-8-19 19:20
mix-blend-mode: lighten;的效果能把视频里的底色弄得那么干净。而且效果像是圆环甩出的泡泡

一切皆有可能

小辣椒

这个先收藏好，空了完成作业

红影

马黑黑 发表于 2024-8-19 20:03
一切皆有可能

这样效果漂亮