《风雨无阻》- 周华健（根据老黑教程制作）
<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>
@马黑黑 队长做出来了 队长棒棒的{:4_178:} 马黑黑 发表于 2022-7-4 20:32
队长做出来了
是的。谢谢你了。 小辣椒 发表于 2022-7-4 21:00
队长棒棒的
谢谢小辣椒！{:4_204:}{:4_190:} 加林森 发表于 2022-7-4 21:10
谢谢小辣椒！
队长不客气，刚看见黑黑又一个新的出来了，队长又可以玩了 小辣椒 发表于 2022-7-4 21:15
队长不客气，刚看见黑黑又一个新的出来了，队长又可以玩了
我已经制作了一半了。{:4_189:} 加林森 发表于 2022-7-4 21:20
我已经制作了一半了。
队长速度的，期待队长的制作{:4_187:} 加林森 发表于 2022-7-4 21:08
是的。谢谢你了。
辛苦了 队长真棒，做出来了。切小块逐渐展示后面的图图，这个觉得很有趣呢{:4_187:} 小辣椒 发表于 2022-7-4 21:21
队长速度的，期待队长的制作
好的好的。 马黑黑 发表于 2022-7-4 21:21
辛苦了
做自己开心的事情不会辛苦的。 红影 发表于 2022-7-4 21:23
队长真棒，做出来了。切小块逐渐展示后面的图图，这个觉得很有趣呢
谢谢红影！ 加林森 发表于 2022-7-4 21:43
做自己开心的事情不会辛苦的。
注意劳逸结合 马黑黑 发表于 2022-7-4 21:50
注意劳逸结合
嗯嗯。知道了。谢谢啦！ 醉美水芙蓉 发表于 2022-7-4 22:20
队长厉害！这么难的都做得这么好！队长辛苦了！
谢谢水芙蓉！ 你一个二个的，技术越来越数不胜精了。{:4_203:} 樵歌 发表于 2022-7-5 07:58
你一个二个的，技术越来越数不胜精了。
要不老兄也整个？
页:
[1]
2