本帖最后由 加林森 于 2022-7-4 20:21 编辑 <br /><br />红影 发表于 2022-3-29 23:16
嗯嗯，这样很好
嗯嗯，谢谢你！
<style>
.papa { left: -342px; width: 1280px; height: 720px; top:150px; background: silver; perspective: 1000px; box-shadow: 4px 4px 28px rgba(0,0,0,.85); position: relative; }
.papa>img {position: absolute; width: 256px; box-shadow: inherit; transform-style: preserve-3d; }
.papa>span { width: 50%; height: 50%; transition: all 1s linear; transform-style: preserve-3d; position: absolute; }
.papa>span:hover { box-shadow: 2px 2px 40px rgba(0,0,0,.95); cursor: pointer; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 550px; bottom: 10px; 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; }
</style>
<div class="papa">
<div class="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=187797.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script language='javascript'>
let papa = document.querySelector('.papa'),
slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let flag = 1, slip = 0, idxar = [];
let imgAr = [
'https://www.huachaowang.com/data/attachment/forum/202207/04/164800ppf2qz2qqbpq6pqf.jpg',
'https://www.huachaowang.com/data/attachment/forum/202207/04/164939qgsapptz6tau5ch2.jpg',
'https://www.huachaowang.com/data/attachment/forum/202207/04/171334tl9qelaqokqkrhwz.jpg',
'https://www.huachaowang.com/data/attachment/forum/202207/04/171419p3dxomqtxv6dgqut.jpg',
'https://www.huachaowang.com/data/attachment/forum/202207/04/171447ryhqg69hzhyhqy8y.jpg',
'https://www.huachaowang.com/data/attachment/forum/202207/04/171509e2yd76dxdynnqzcd.jpg'
];
let lrcAr = [
['2.08','风雨无阻'],
['3.71','歌手：周华健'],
['5.47','所属专辑：风雨无阻'],
['21.04','给你我的全部'],
['24.54','你是我今生唯一的赌注'],
['29.22','只留下一段岁月'],
['31.41','让我无怨无悔全心的付出'],
['36.85','怕你忧伤 怕你哭'],
['41.77','怕你孤单 怕你糊涂'],
['45.78','红尘千山万里路'],
['49.12','我可以朝朝暮暮'],
['53.94','给你一条我的路'],
['57.56','你是我一生不停的脚步'],
['62.21','让我走出一片天空'],
['64.67','让你尽情飞舞 放心的追逐'],
['71.39','爱是漫长的旅途'],
['74.59','梦有快乐 梦有痛苦'],
['78.49','悲欢离合人间路'],
['82.63','我可以缝缝补补'],
['90.12','提着昨日种种千辛万苦'],
['92.01','向明天换一些美满和幸福'],
['96.79','爱你够不够多 对你够不够好'],
['101.69','可以要求 不要不在乎'],
['105.64','不愿让你看见 我的伤处'],
['108.40','是曾经无悔的风雨无阻'],
['115.02','拥有够不够多 梦的够不够好'],
['118.64','可以追求 不认输'],
['139.04','给你一条我的路'],
['142.44','你是我一生不停的脚步'],
['146.53','让我走出一片天空'],
['149.55','让你尽情飞舞 放心的追逐'],
['155.30','爱是漫长的旅途'],
['158.85','梦有快乐 梦有痛苦'],
['164.23','悲欢离合人间路'],
['167.65','我可以缝缝补补'],
['172.67','提着昨日种种千辛万苦'],
['177.38','向明天换一些美满和幸福'],
['182.98','爱你够不够多 对你够不够好'],
['186.50','可以要求 不要不在乎'],
['189.96','不愿让你看见 我的伤处'],
['193.38','是曾经无悔的风雨无阻'],
['198.03','拥有够不够多 梦的够不够好'],
['202.98','可以追求 不认输'],
['210.86','提着昨日种种千辛万苦'],
['213.95','向明天换一些美满和幸福'],
['219.35','爱你够不够多 对你够不够好'],
['223.57','可以要求 不要不在乎'],
['226.84','不愿让你看见 我的伤处'],
['230.39','是曾经无悔的风雨无阻'],
['236.15','拥有够不够多 梦的够不够好'],
['240.10','可以追求 不认输']
];
let gnum = (min,max) => Math.floor(Math.random()*(max-min+1))+min;
Array.from({length:32}).forEach((item,key) => idxar.push(key));
imgAr.forEach((item,key) => {
item = document.createElement('img');
item.src = imgAr;
;
item.style.left = key * 190 + 50 + 'px';
item.style.top = gnum(40, 300) + 'px';
item.style.transform = 'rotateY(' + gnum(5,45) +'deg)';
item.alt = '';
papa.appendChild(item);
});
for(j=0; j<4; j++) {
for(k=0; k < 8; k++) {
let span = document.createElement('span');
span.style.background = 'url("https://pic.imgdb.cn/item/62c274bb5be16ec74aefc8c5.jpg") -' + (k*160) + 'px -' + (j*180) + 'px' ;
span.style.left = k*160 + 'px';
span.style.top = j*180 + 'px';
span.style.width = '160px';
span.style.height ='180px';
span.className = 'masks';
papa.appendChild(span);
}
}
let masks = document.querySelectorAll('.masks');
setTimeout(() => disappear(), 6000);
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');
}
function disappear() {
let idx = gnum(0,idxar.length - 1);
masks].style.opacity = (flag == 1 ? '0' : '1');
if(flag == 1) {
masks].style.transform = 'rotateY(45deg) rotateZ(15deg)';
masks].style.opacity = '0';
} else {
masks].style.transform = 'rotateY(0deg) rotateZ(0deg)';
masks].style.opacity = '1';
}
idxar.splice(idx, 1);
if(idxar.length == 0) {
Array.from({length:32}).forEach((item,key) => idxar.push(key));
flag = -flag;
}
setTimeout(() => disappear(), 2000);
}
</script>
<br><br><br><br><br><br><br><br>
加林森 发表于 2022-3-28 21:46
樵歌曲晚上好。听音乐玩吧。
出门玩了几天，回来感冒了，才上坛，问好。{:4_190:}
樵歌 发表于 2022-4-7 15:47
出门玩了几天，回来感冒了，才上坛，问好。
感冒好多了吧。多喝水才行。{:4_190:}
加林森 发表于 2022-4-7 16:38
感冒好多了吧。多喝水才行。
已经四天了，基本快好了。
樵歌 发表于 2022-4-7 19:58
已经四天了，基本快好了。
好的，现在不能喝酒哈。
加林森 发表于 2022-4-7 20:43
好的，现在不能喝酒哈。
好了再说吧，只有先克服了{:4_173:}
樵歌 发表于 2022-4-8 14:00
好了再说吧，只有先克服了
嗯嗯，听话就好。{:4_189:}