本帖最后由 加林森 于 2022-7-13 19:57 编辑 <br /><br />东篱闲人 发表于 2022-5-15 20:27
那能随便看吗？先给钱。。。。
先撑头过来。。。。{:4_189:}
<style>
#papa { left: -70px; padding: 0; width: 900px; height: 1274px; top: 150px; background: #eee url('https://pic.imgdb.cn/item/62ce8d29f54cd3f937f528a2.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; border-radius: 6px; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 510px; top: 980px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0;
background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#stage { position: absolute; left: 130px; top: 44px; width: 600px; height: 600px; padding: 0; margin: 0;-webkit-clip-path: ellipse(50% 50% at 50% 50%); }
.piece {
position: absolute;
padding: 0;
margin: 0;
border:1px solid transparent;
}
@keyframes in {
80% { transform: scale(1) rotate(0); opacity: 1; }
100% { transform: scale(0) rotate(-360deg); opacity: 0; }
}
@keyframes out {
85% { transform: scale(1) rotate(0); opacity: 1; }
100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
</style>
<div id="papa">
<div id="stage"></div>
<div id="playbox">
<p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1830977415.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let picAr = [
'https://pic.imgdb.cn/item/62ce9463f54cd3f9370116f3.jpg',
'https://pic.imgdb.cn/item/62ce9737f54cd3f93705acdc.jpg',
'https://pic.imgdb.cn/item/62ce9bb1f54cd3f9370cfc98.jpg',
'https://pic.imgdb.cn/item/62ce9dd7f54cd3f9371065c3.jpg',
'https://pic.imgdb.cn/item/62cea16bf54cd3f937164b58.jpg',
'https://pic.imgdb.cn/item/62cea35cf54cd3f93719798c.jpg'
];
let lrcAr = [
['0.00','兰亭序（抖音纯享版） '],
['10.00',' 演奏：纯音乐馆'],
['20.00','感谢黑黑教程分享 '],
['30.00','加林森学习做一次 '],
['40.00','兰亭序（抖音纯享版） '],
['60.00',' 演奏：纯音乐馆'],
['80.00','兰亭序（抖音纯享版）'],
['100.00',' 演奏：纯音乐馆'],
['120.00','兰亭序（抖音纯享版）' ']
['140.00','演奏：纯音乐馆'],
['145.00','感谢欣赏']
];
let ww = stage.clientWidth,
hh = stage.clientHeight;
let piecesX = 5,
piecesY = 5,
flag = 1,
idx = 0,
slip = 0;
let pw = ww / piecesX;
let ph = hh / piecesY;
let bgar = new Array;
for(j=0; j<piecesY; j++) {
for(k=0; k<piecesX; k++) {
let piece = document.createElement('span');
piece.className = 'piece';
piece.style.width = pw + 'px'
piece.style.height = ph + 'px';
piece.style.left = k * pw + 'px';
piece.style.top = j * ph + 'px';
bgar.push(k * pw + '|' + j * ph); //记录背景数据
stage.appendChild(piece);
}
}
let pieces = document.querySelectorAll('.piece');
function out_in() {
pieces.forEach((ele,key) => {
let ar = bgar.split('|');
ele.style.background = 'url(' + picAr + ') -' + ar+ 'px' + ' -' + ar + 'px no-repeat';
flag == 1 ? (ele.style.animation = 'out 8s 1s', flag = 0) : (ele.style.animation = 'in 8s 1s', flag = 1);
});
idx ++;
if(idx > picAr.length - 1) idx = 0;
setTimeout(out_in,9000);
}
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
out_in();
</script>
<br><br><br><br><br><br><br><br><br><br>
梦油 发表于 2022-5-15 20:43
以前，我家买了不少《梁祝》的磁带，交响乐、钢琴、小提琴、二胡、萨克斯……各种乐器演奏的《梁祝》和《 ...
现在你就在电脑就能听见了。
东篱闲人 发表于 2022-5-15 20:16
东篱闲人朋友晚上好！
梦油 发表于 2022-5-15 20:54
东篱闲人朋友晚上好！
{:4_176:}
加林森 发表于 2022-5-15 20:46
现在你就在电脑就能听见了。
是的，是的。
东篱闲人 发表于 2022-5-15 20:56
谢谢东篱闲人朋友。让我们为友谊干杯！{:4_191:}
梦油 发表于 2022-5-15 21:00
谢谢东篱闲人朋友。让我们为友谊干杯！
嗯嗯嗯，多喝点。。。{:5_117:}
梦油 发表于 2022-5-15 20:57
是的，是的。
这样你就很方便了。
东篱闲人 发表于 2022-5-15 21:03
嗯嗯嗯，多喝点。。。
想来，东篱闲人朋友的酒量一定不少吧？
加林森 发表于 2022-5-15 21:03
这样你就很方便了。
是啊，加林森朋友。每当我闲在时，就听听我喜欢的乐曲，特别是红歌、老歌。
梦油 发表于 2022-5-16 09:53
是啊，加林森朋友。每当我闲在时，就听听我喜欢的乐曲，特别是红歌、老歌。
嗯嗯，挺好的。
加林森 发表于 2022-5-16 11:40
嗯嗯，挺好的。
你也很喜欢音乐是吧。
加林森 发表于 2022-5-15 12:41
是啊，老梦需要的，我去找来的。让他欣赏的。
队长有心了，这样的互帮互助真好{:4_187:}
红影 发表于 2022-5-16 11:53
队长有心了，这样的互帮互助真好
是啊，大家互相帮助挺好的。
梦油 发表于 2022-5-16 11:44
你也很喜欢音乐是吧。
是啊。
梦油 发表于 2022-5-16 09:51
想来，东篱闲人朋友的酒量一定不少吧？
嗯嗯，急眼了自己能喝一瓶。。。。。{:5_112:}
加林森 发表于 2022-5-16 11:59
是啊，大家互相帮助挺好的。
很温馨。
加林森 发表于 2022-5-16 12:09
是啊。
看得出，你对音乐很有心得。
红影 发表于 2022-5-16 13:24
很温馨。
是的。
梦油 发表于 2022-5-16 13:31
看得出，你对音乐很有心得。
我从小就喜欢音乐的。