献天缘 （再来复习制作一个）
<style>
#papa { left: -214px; width: 1024px; height: 576px; background: gray url('https://pic.imgdb.cn/item/6316b13116f2c2beb14b2a99.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','献天缘-HITA / 吾恩'],
['28.08','（女）一笑拈花让恩怨倦'],
['32.60','一念灭尘世化成天'],
['36.89','一恋成痴心爱恨纠结'],
['42.05','心痛离别 那是缘'],
['47.08','（男）渡千年 箫声远'],
['51.36','意绵绵 眼泪滴成莲'],
['55.87','等你我相约挥情剑'],
['60.99','（合）谁能够破茧 看穿恩怨'],
['63.54','仙逍遥在人间'],
['65.89','（合）贪尘世妄言绝千恋'],
['70.16','莫被谣言迷了眼'],
['74.04','愿化作云烟'],
['76.25','晓梦托蝴蝶'],
['79.03','烟火阑珊倚人间'],
['101.31','（男）渡千年 箫声远'],
['105.70','意绵绵 眼泪滴成莲'],
['110.23','等你我相约挥情剑'],
['115.08','（合）谁能够破茧 看穿恩怨'],
['117.50','仙逍遥在人间'],
['120.13','（合）贪尘世妄言绝千恋'],
['124.42','莫被谣言迷了眼'],
['128.34','愿化作云烟'],
['130.54','晓梦托蝴蝶'],
['133.39','烟火阑珊倚人间'],
['154.68','贪尘世妄言绝千恋'],
['158.34','莫被谣言迷了眼'],
['162.25','愿化作云烟'],
['164.50','晓梦托蝴蝶'],
['167.29','烟火阑珊倚人间'],
['174.66','贪尘世妄言绝千恋'],
['178.73','莫被谣言迷了眼'],
['182.73','愿化作云烟'],
['184.90','晓梦托蝴蝶'],
['187.85','烟火阑珊倚人间'],
['200.00','谢谢欣赏']
];
let aud = new Audio(), lw = prog.getTotalLength(), txtAr = document.querySelectorAll('.text');
aud.src = 'https://music.163.com/song/media/outer/url?id=28631330.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>
好听好看！2只蝴蝶加的好，谁能够破茧看穿恩怨，仙逍遥在人间，队长好制作！赞！
{:4_204:}{:4_190:} @马黑黑 大猫咪 发表于 2022-9-6 11:20
好听好看！2只蝴蝶加的好，谁能够破茧看穿恩怨，仙逍遥在人间，队长好制作！赞！
我在复习。{:4_189:} 欣赏老师的精美帖，问好！{:4_190:} 梦缘 发表于 2022-9-6 11:28
欣赏老师的精美帖，问好！
梦缘中午好！{:4_190:} 队长越来越厉害了 马黑黑 发表于 2022-9-6 12:20
队长越来越厉害了
不厉害的。复习一下增强记忆。 加林森 发表于 2022-9-6 12:25
不厉害的。复习一下增强记忆。
要记得分类保存一些模板 马黑黑 发表于 2022-9-6 12:34
要记得分类保存一些模板
嗯嗯。好的。 这个背景选择得漂亮，还加了个动图，更美了，欣赏队长好制作{:4_187:} 红影 发表于 2022-9-6 19:21
这个背景选择得漂亮，还加了个动图，更美了，欣赏队长好制作
谢谢红影支持！
页:
[1]