恋上你的人丢了我的魂（学习套用黑黑的她是水效果）
<style>#papa { left: -344px; width: 1280px; height: 700px; top:150px;background: gray url('https://wj.zp68.com/lxx/yunhua/2022/09/04/00F.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
/* svg按钮↓*/
#mplayer { position: absolute; bottom: 0; }
#btnpause { display: none; }
#btnwrap, #btnplay, #btnpause { cursor: pointer; }
#btnplay:hover + btnwrap, #btnpause:hover + btnwrap { fill: gold; }
#btnwrap:hover { fill: gold; }
#btnwrap:hover + #btnplay + #btnpause { fill: red;}
#tmsg { dominant-baseline: middle; fill: snow; }
#track { shape-rendering: crispEdges; cursor: pointer; }
/* svg 歌词及动态效果 ↓ */
#lrc { position: absolute; width: 1200px; height: 100px; top: 120px; }
.text { font: bold 3em sans-serif; text-anchor: middle; dominant-baseline: middle; letter-spacing: 4px; fill: none; stroke-width: 1.5px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: Maroon; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: Cornislk; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: Green; text-shadow: 0 0 5px blue; animation-delay: -4.5s; }
.text-4{ stroke: tomato; text-shadow: 0 0 5px purple; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
</style>
<div id="papa">
<svg id="lrc">
<text x="50%" y="50%" class="text text-1">lrc歌词</text>
<text x="50%" y="50%" class="text text-2">lrc歌词</text>
<text x="50%" y="50%" class="text text-3">lrc歌词</text>
<text x="50%" y="50%" class="text text-4">lrc歌词</text>
</svg>
<svg id="mplayer" width="600" height="100">
<circle id="btnwrap" cx="20" cy="30" r="20" fill="olive" />
<polygon id="btnplay" points="15 20, 15 40, 30 30" fill="snow" />
<g id="btnpause" fill="snow">
<rect x= "15" y="20" width="3" height="20" />
<rect x="22" y="20" width="3" height="20" />
</g>
<g id="track"stroke-width="2">
<line x1="45" y1="30" x2="345" y2="30" stroke="transparent" stroke-width = "20" />
<line x1="45" y1="30" x2="345" y2="30" stroke="snow" />
<line id="prog" x1="45" y1="30" x2="345" y2="30" stroke="red" stroke-dasharray="300" stroke-dashoffset="300" />
</g>
<text id="tmsg" x="360" y="30">00:00 | 00:00</text>
</svg>
</div>
<script>
let lrcAr = [
['0.00','恋上你的人丢了我的魂 '],
['4.88','歌手：- 石梅 '],
['16.16','谢谢黑黑教程分享'],
['21.47','你悄悄地敲开我心门'],
['26.60','让我相信什么是永恒'],
['32.01','从来没有如此的认真'],
['36.37','以为你就是我今生的缘分'],
['42.26','梦醒之后枕边的泪痕'],
['47.39','提醒着我心依然在疼'],
['52.68','你就是我最深爱的人'],
['57.30','为何对我竟是如此的残忍'],
['62.94','恋上你的人丢了我的魂'],
['68.31','每个夜晚还在痴痴地等啊等'],
['73.38','等你来敲开敲开我的门'],
['78.60','我要给你我的全部温存'],
['83.90','恋上你的人丢了我的魂'],
['89.24','朝思慕想你那迷人的眼神'],
['94.40','多想告诉你我依然爱着你'],
['99.62','我要和你一起迎接每个早晨'],
['105.72','LRC编辑：小辣椒'],
['126.24','梦醒之后枕边的泪痕'],
['130.05','提醒着我心依然在疼'],
['136.22','你就是我最深爱的人'],
['140.80','为何对我竟是如此的残忍'],
['146.51','恋上你的人丢了我的魂'],
['151.81','每个夜晚还在痴痴地等啊等'],
['156.98','等你来敲开敲开我的门'],
['162.14','我要给你我的全部温存'],
['167.36','恋上你的人丢了我的魂'],
['172.74','朝思慕想你那迷人的眼神'],
['177.95','多想告诉你我依然爱着你'],
['183.04','我要和你一起迎接每个早晨'],
['188.47','恋上你的人丢了我的魂'],
['193.51','朝思慕想你那迷人的眼神'],
['198.78','多想告诉你我依然爱着你'],
['203.87','我要和你一起迎接每个早晨'],
['210.68','谢谢欣赏！'],
['221.00','谢谢欣赏！']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/04/dlh.mp3';
aud.autoplay = true;
aud.loop = true;
track.onclick = (e) => aud.currentTime = aud.duration * (e.offsetX - prog.getAttribute('x1')) / lw;
btnwrap.onclick = btnpause.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.strokeDashoffset = lw - lw * aud.currentTime / aud.duration + 'px';
tmsg.textContent = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) {
for(ele of txtAr) ele.textContent = lrcAr;
}
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
黑黑来首煽情的歌{:4_170:} 还有动态的图啊，厉害厉害。{:4_199:} 整首歌听完{:4_189:}
谢谢黑黑分享教程，这个代码一点不懂，纯套用了 加林森 发表于 2022-9-4 14:21
还有动态的图啊，厉害厉害。
队长好，刚才在听歌，整首歌发了才来欣赏，怕上次一样最后歌词出错 小辣椒 发表于 2022-9-4 14:26
队长好，刚才在听歌，整首歌发了才来欣赏，怕上次一样最后歌词出错
是的，我都是先听完了再制作的。 加林森 发表于 2022-9-4 14:28
是的，我都是先听完了再制作的。
我是求速度的，队长我得下了。。。。。去休息一下 小辣椒 发表于 2022-9-4 14:34
我是求速度的，队长我得下了。。。。。去休息一下
好的好的。 这个制作真漂亮，有漂亮的同步歌词，还有一只小船儿在飘荡。亲爱的好制作{:4_187:} 红影 发表于 2022-9-4 14:59
这个制作真漂亮，有漂亮的同步歌词，还有一只小船儿在飘荡。亲爱的好制作
亲爱的，我现在求速度，都没有动脑子的 加林森 发表于 2022-9-4 14:37
好的好的。
队长还在啊，我躺一下再上来看看，看看再躺一下{:4_173:} 小辣椒朋友下午好！欣赏你的美贴也是一种享受。 小辣椒 发表于 2022-9-4 15:58
队长还在啊，我躺一下再上来看看，看看再躺一下
保养最重要。。。。{:4_189:} 漂亮！{:4_187:} 都丢魂了。看来是爱急眼了。。。。{:5_117:} 漂亮，真好看，欣赏点赞！{:4_178:}{:4_185:} 小辣椒 发表于 2022-9-4 14:19
@马黑黑
黑黑来首煽情的歌
{:4_173:} 欣赏大作 小辣椒 发表于 2022-9-4 15:58
亲爱的，我现在求速度，都没有动脑子的
不管怎么说，亲爱的做出来的都漂亮{:4_187:}
页:
[1]
2