陪你到天涯-黄安（学习马老师代码）
本帖最后由 梦缘 于 2022-9-14 21:48 编辑 <br /><br /><style>#papa{left:-214px;width:1024px;height:640px; top: 120px;background:tan url('https://www.huachaowang.com/data/attachment/forum/202209/14/205448vy20e3jw88efs0j2.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}#mplayer{position:absolute;left:20px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}#mplayer:hover #btnwrap{background:linear-gradient(to top right,rgba(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}#lrc{position:absolute;top:60px;font:700 2em sans-serif;color:transparent;letter-spacing:2px;background:linear-gradient(-90deg,#8b0000,gold,orange,snow) 100% 0 / 200% 100%;background-clip:text;-webkit-background-clip:text;animation:bgMerge 5s linear infinite}.ball{--ss:0s;position:absolute;width:10px;height:10px;left:546px;top:200px;border-radius:50%;background:red;offset-distance:0;offset-path:path("M150 60 Q245 -10 280 60 Q320 150 150 290 Q-20 150 20 60 Q65 -10 150 60z");animation:move 6s var(--ss) linear infinite}@keyframes move{to{offset-distance:100%}}@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}#dt{ position: absolute; width: 544px; height: 200px; top: -20px; left: 150px; }</style>
<div id=papa>
<img id="dt" src="https://pic.imgdb.cn/item/62f232a416f2c2beb1d93890.gif" alt="" />
<div id=lrc>lrc</div><div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div><script>let lrcAr = [
['0.00','陪你到天涯-黄安'],
['15.41','天涯在何方'],
['17.77','不敢回头望'],
['19.79','英雄不怕太阳高'],
['23.90','看黄沙卷起千层浪'],
['27.10','一笑不能忘'],
['28.95','热血涌上胸膛'],
['36.25','故人在何方'],
['38.56','不敢回头望'],
['40.55','一生情歌唱到亮'],
['44.66','让恩怨随风飘荡'],
['47.77','无处话凄凉'],
['49.94','肩挑山高水长'],
['56.54','决心陪你到天涯'],
['58.76','决心陪你到海角'],
['61.15','让这相思比那海天更长'],
['65.67','难道非要我受伤'],
['67.95','难道非要我失望'],
['70.34','才能让你陪在我身旁'],
['77.74','故人在何方'],
['80.12','不敢回头望'],
['82.17','一生情歌唱到亮'],
['86.34','让恩怨随风飘荡'],
['89.33','无处话凄凉'],
['91.41','肩挑山高水长'],
['97.10','天涯在何方'],
['110.26','天涯在何方'],
['112.42','不敢回头望'],
['114.45','英雄不怕太阳高'],
['118.61','看黄沙卷起千层浪'],
['121.66','一笑不能忘'],
['123.64','热血涌上胸膛'],
['130.90','故人在何方'],
['133.24','不敢回头望'],
['135.29','一生情歌唱到亮'],
['139.34','让恩怨随风飘荡'],
['142.44','无处话凄凉'],
['144.47','肩挑山高水长'],
['151.18','决心陪你到天涯'],
['153.35','决心陪你到海角'],
['155.66','让这相思比那海天更长'],
['160.35','难道非要我受伤'],
['162.67','难道非要我失望'],
['164.97','才能让你陪在我身旁'],
['172.49','故人在何方'],
['174.77','不敢回头望'],
['176.82','一生情歌唱到亮'],
['180.87','让恩怨随风飘荡'],
['183.98','无处话凄凉'],
['186.90','肩挑山高水长'],
['193.80','肩挑山高水长'],
['209.00','谢谢大家欣赏']
];
let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'http://music.163.com/song/media/outer/url?id=95428.mp3';
aud.autoplay = true;
aud.loop = true;
Array.from({length: 60}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'ball';
ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
papa.appendChild(ele);
});
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
prog.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>
<br><br><br><br><br><br><br><br><br><br>
这个真漂亮，欣赏梦缘好帖{:4_187:} 红影 发表于 2022-9-14 21:54
这个真漂亮，欣赏梦缘好帖
谢谢老师的欣赏支持，问好！{:4_204:} 这个制作挺漂亮的。赞！ 加林森 发表于 2022-9-15 11:53
这个制作挺漂亮的。赞！
谢谢老师的欣赏支持，问好！{:4_187:} 欣赏精彩制作{:4_199:} 梦缘 发表于 2022-9-15 14:26
谢谢老师的欣赏支持，问好！
{:4_190:} 小辣椒 发表于 2022-9-15 14:29
欣赏精彩制作
谢谢老师的欣赏支持，问好！{:4_176:} 梦缘 发表于 2022-9-15 10:49
谢谢老师的欣赏支持，问好！
不客气啊，继续欣赏梦缘好帖{:4_187:} 梦梦做得真好，歌词还是同步的。{:4_199:}{:4_199:} 红芍药 发表于 2022-9-17 10:44
梦梦做得真好，歌词还是同步的。
感谢老师的欣赏点评，问好！{:4_176:}
页:
[1]