爱你的心永不变
<style>#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/6117bcda5132923bf8a8e491.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#lrc { position: absolute; left: 370px; top:550px; font: bold 1.5em sans-serif; color: #FFCC00; text-shadow: 1px 1px 2px #000; letter-spacing: 2px; }
#mplayer { position: absolute; left: 350px; top:600px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 200px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: 0px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #FFCC00; }
.ball { position: absolute; left: -10px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: red; animation: move 40s var(--ss) linear infinite; }
@keyframes move {
0%, 100% { left: 0; top: 0; }
25% { left: calc(100% - 10px); top: 0; }
50% { left: calc(100% - 10px); top: calc(100% - 10px); }
75% { left: 0; top: calc(100% - 10px); }
}
</style>
<div id="papa">
<span id="lrc">lrc歌词</span>
<span id="mplayer">
<span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prog"></span>
<span id="tmsg">00:00 | 00:00</span>
</span>
</div>
<script>
let lrcAr = [
['0.01','薄云天、张怡诺 - 爱你的心永不变'],
['3.01','作词：薄云天'],
['4.03','作曲：薄云天'],
['5.05','编曲：徐晴超'],
['6.08','混音：徐晴超'],
['7.09','制作人：薄云天'],
['8.09','LRC编辑：醉美水芙蓉'],
['19.02','男：'],
['24.03','在这个冬雪飘零的季节'],
['29.06','能不能拥抱给我多一些'],
['35.00','别让我独自在深夜凋谢'],
['40.08','所以你要学会呵护体贴'],
['45.03','女 ：'],
['45.09','为了你相依相伴心无怨'],
['51.05','就算是历尽千难和万险'],
['57.02','爱的路上有两人分担'],
['62.05','纵然时光它苍老了容颜'],
['66.09','男：'],
['68.02','啊'],
['71.03','爱你的心永不变'],
['73.09','啊'],
['75.00','你就是我的永远'],
['79.02','就算天会老就算地会陷'],
['84.02','合：'],
['84.08','我们会好好珍惜这段缘'],
['88.07','女：啊'],
['92.09','爱你的心永不变'],
['95.06','啊'],
['97.01','为你我愿守千年'],
['101.05','多少的思念多少的期盼'],
['106.02','合：'],
['106.07','我就是你最幸福的港湾'],
['132.09','男：'],
['134.05','为了你相依相伴心无怨'],
['139.08','就算是历尽千难和万险'],
['143.07','女：'],
['145.04','爱的路上有两人分担'],
['150.09','纵然时光它苍老了容颜'],
['155.01','男：'],
['156.04','啊'],
['159.01','爱你的心永不变'],
['161.09','啊'],
['163.03','你就是我的永远'],
['167.04','就算天会老就算地会陷'],
['172.04','合：'],
['172.09','我们会好好珍惜这段缘'],
['177.00','女：'],
['178.03','啊'],
['181.03','爱你的心永不变'],
['183.09','啊'],
['185.04','为你我愿守千年'],
['189.05','多少的思念多少的期盼'],
['194.05','合：'],
['194.10','我就是你最幸福的港湾'],
['200.01','男：'],
['200.06','啊'],
['203.03','爱你的心永不变'],
['205.10','啊'],
['207.07','你就是我的永远'],
['211.05','就算天会老就算地会陷'],
['216.05','合：'],
['217.02','我们会好好珍惜这段缘'],
['221.04','女：'],
['222.06','啊'],
['225.04','爱你的心永不变'],
['228.00','啊'],
['229.07','为你我愿守千年'],
['233.07','多少的思念多少的期盼'],
['238.06','合：'],
['239.01','我就是你最幸福的港湾'],
['244.08','我就是你最幸福的港湾'],
['249.03','谢谢欣赏！']
];
let aud = new Audio(), lw = prog.offsetWidth;
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=237240138&.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'ball';
item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(-6)};`;
papa.appendChild(item);
});
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) lrc.innerText = 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_199:} 水芙蓉的图做的真好，代码也是棒棒哒{:4_187:} 这个是黑黑的新教程吧，漂亮{:4_199:} 红影 发表于 2022-9-1 20:41
水芙蓉也做成了珠珠滚动，真棒。这个画面好甜蜜啊，真漂亮的制作
谢谢红影美女点评！ 小辣椒 发表于 2022-9-1 20:49
这个是黑黑的新教程吧，漂亮
小辣椒晚上好！是的，刚学的！ 千羽 发表于 2022-9-1 20:44
水芙蓉的图做的真好，代码也是棒棒哒
谢谢千羽欣赏支持！ 醉美水芙蓉 发表于 2022-9-1 20:54
谢谢千羽欣赏支持！
不客气哈{:4_173:} 制作漂亮。赞！{:4_199:} 加林森 发表于 2022-9-1 21:04
制作漂亮。赞！
谢谢队长欣赏支持！ 醉美水芙蓉 发表于 2022-9-1 21:11
谢谢队长欣赏支持！
{:4_190:} 醉美水芙蓉 发表于 2022-9-1 20:53
谢谢红影美女点评！
不客气啊，水芙蓉美女聪明{:4_187:}
页:
[1]