红梅妃（学习老黑“她是水”制作）
本帖最后由 加林森 于 2022-9-4 17:58 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 639px; background: gray url('https://pic.imgdb.cn/item/6314394b16f2c2beb1f95cb7.jpg') 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: 1000px; height: 80px; top: 10px; }
.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: snow; text-shadow: 0 0 5px red; animation-delay: -1.5s; }
.text-2{ stroke: orange; text-shadow: 0 0 5px green; animation-delay: -3s; }
.text-3{ stroke: gold; 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">
<div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
<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="400" height="60">
<circle id="btnwrap" cx="20" cy="30" r="15" 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="245" y2="30" stroke="transparent" stroke-width = "20" />
<line x1="45" y1="30" x2="245" y2="30" stroke="snow" />
<line id="prog" x1="45" y1="30" x2="245" y2="30" stroke="red" stroke-dasharray="200" stroke-dashoffset="200" />
</g>
<text id="tmsg" x="260" y="30">00:00 | 00:00</text>
</svg>
</div>
<script>
let lrcAr = [
['00.00','红梅妃-尹昔眠 / 小田音乐社'],
['2.26','三冬相陪，却把冷寂追回'],
['6.17','半日芳菲，不经弹指风吹'],
['11.26','一片坠 又飞 嫁给东风不归'],
['16.20','看白雪 挂在了 怨眉'],
['22.26','一枝绕在我心扉 如墨挥'],
['23.26','一瓣落在我心昧 抵年岁'],
['27.04','灼灼似你饮杯'],
['33.01','曾言来去山北'],
['35.03','看我的衣袂 欲把你随'],
['39.48','墙角红梅 捻一朵纳为妃'],
['43.81','今朝花媚 开满血色为谁'],
['48.51','良人哭着寒香醉'],
['51.56','谁道我无泪'],
['53.96','只因难辨泪与祸水'],
['58.64','墙角红梅 捻一朵纳为妃'],
['63.47','今朝花媚 开满血色为谁'],
['67.54','良人哭着寒香醉'],
['70.31','谁道我无泪'],
['72.72','只因难辨泪与祸水'],
['76.00','lrc编辑：加林森'],
['96.56','一枝绕在我心扉 如墨挥'],
['100.77','一瓣落在我心昧 抵年岁'],
['105.42','灼灼似你饮杯'],
['108.13','曾言来去山北'],
['110.36','看我的衣袂 欲把你随'],
['114.74','墙角红梅 捻一朵纳为妃'],
['119.18','今朝花媚 开满血色为谁'],
['123.76','良人哭着寒香醉'],
['126.99','谁道我无泪'],
['129.08','只因难辨泪与祸水'],
['133.70','墙角红梅 捻一朵纳为妃'],
['137.82','今朝花媚 开满血色为谁'],
['142.57','良人哭着寒香醉'],
['145.66','谁道我无泪'],
['147.94','只因难辨泪与祸水'],
['153.02','墙角红梅 捻一朵纳为妃'],
['156.78','今朝花媚 开满血色为谁'],
['161.54','良人哭着寒香醉'],
['164.52','谁道我无泪'],
['166.78','只因难辨泪与祸水'],
['171.40','墙角红梅 捻一朵纳为妃'],
['175.66','今朝花媚 开满血色为谁'],
['180.16','良人哭着寒香醉'],
['183.31','谁道我无泪'],
['185.56','只因难辨泪与祸水'],
['190.08','墙角红梅 捻一朵纳为妃'],
['194.52','今朝花媚 开满血色为谁'],
['199.05','良人哭着寒香醉'],
['202.13','谁道我无泪'],
['204.48','只因难辨泪与祸水'],
['214.48','谢谢欣赏']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://music.163.com/song/media/outer/url?id=1818335369.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>
@马黑黑 @小辣椒 黑黑的这个效果，歌词特别炫。队长真快，欣赏队长好帖{:4_204:} 红影 发表于 2022-9-4 14:12
黑黑的这个效果，歌词特别炫。队长真快，欣赏队长好帖
还行吧。 队长也是速度的{:4_178:} 小辣椒 发表于 2022-9-4 14:33
队长也是速度的
任务必须完成啊。 队长的蝴蝶翩翩起舞啊 梦油 发表于 2022-9-4 16:05
队长的蝴蝶翩翩起舞啊
是啊，好看吗？ 加林森 发表于 2022-9-4 16:44
是啊，好看吗？
绚丽多彩的蝴蝶翅膀仿佛是极美的绸缎，美不胜收。 梦油 发表于 2022-9-4 17:29
绚丽多彩的蝴蝶翅膀仿佛是极美的绸缎，美不胜收。
嗯嗯，你喜欢就好！ 加加有妃子了，恭喜恭喜。。。。{:5_116:} 东篱闲人 发表于 2022-9-4 17:38
加加有妃子了，恭喜恭喜。。。。
啊？老兄在想什么啊？{:5_158:} 醉美水芙蓉 发表于 2022-9-4 17:44
队长速度这么快！
不快的吧。{:4_190:} 加林森 发表于 2022-9-4 17:37
嗯嗯，你喜欢就好！
喜欢，喜欢。 梦油 发表于 2022-9-4 17:47
喜欢，喜欢。
挺好的。{:4_190:} 好看好听，欣赏点赞，老师真棒！{:4_204:} 加林森 发表于 2022-9-4 17:41
啊？老兄在想什么啊？
别客气。。。。 东篱闲人 发表于 2022-9-4 17:38
加加有妃子了，恭喜恭喜。。。。
{:4_189:} 欣赏队长大作