《兰亭序（抖音纯享版）》- 纯音乐馆
<style>#papa { left: -90px; 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: 200px; top: 244px; width: 500px; height: 500px; 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-7-13 21:17
@小辣椒
队长，你这个图片效果没有出来，你看见有出来吗 小辣椒 发表于 2022-7-13 21:30
队长，你这个图片效果没有出来，你看见有出来吗
原来还出来的。现在不知道怎么不出来了。 队长这个好制作，意境优美，音乐好听 加林森 发表于 2022-7-13 21:40
原来还出来的。现在不知道怎么不出来了。
出来，队长好制作{:4_187:} 队长我下了，晚安 队长这个做得真漂亮，音乐以及小图和背景都配合得很完美，真棒{:4_199:} 马黑黑 发表于 2022-7-13 21:42
队长这个好制作，意境优美，音乐好听
谢谢老黑。我的系统好像还是不对。好卡哦。 小辣椒 发表于 2022-7-13 21:45
出来，队长好制作
谢谢了。 小辣椒 发表于 2022-7-13 21:47
队长我下了，晚安
嗯嗯，晚安，拜拜。祝好梦 ！ 红影 发表于 2022-7-13 21:49
队长这个做得真漂亮，音乐以及小图和背景都配合得很完美，真棒
谢谢红影。我电脑系统好像出问题了。我去整电脑了 。 加林森 发表于 2022-7-13 22:01
谢谢老黑。我的系统好像还是不对。好卡哦。
所以我怀疑是硬件问题。
硬件问题可能是接触问题，一般重新拔插硬盘数据线、内存条、显卡（如果是独立显卡）甚至CPU（难度较大）。一般来说，如果是接触问题，这么处理后都可以解决问题。
还可能是BIOS设置问题，可以搜索一下BIOS的设置操作，自行做简单的处理：使用默认优化设置。BIOS的问题还可能与主板电池有关，比如电池电压偏低了，主板的BIOS设置得不到很好的保存和发挥。
硬盘故障也会导致你现在碰到的问题，有条件换一个硬盘试试，没有硬盘可换的可考虑重新分区再格式化、装系统。
内存条也会有限损坏，有条件更换内存条试试，双内存条的可以依次使用单条试试。
主板元件老化也会发生你现在的问题，要维修或更换。
是在不好古董就送修，或买台新主机（2000左右的配置就已经非常好了）。 马黑黑 发表于 2022-7-13 22:53
所以我怀疑是硬件问题。
硬件问题可能是接触问题，一般重新拔插硬盘数据线、内存条、显卡（如果是独立 ...
谢谢老黑！ 加林森 发表于 2022-7-13 23:20
谢谢老黑！
只能慢慢去查找了。八九不离十是硬件问题，大小而已 马黑黑 发表于 2022-7-13 23:53
只能慢慢去查找了。八九不离十是硬件问题，大小而已
好的。谢谢啦！ 马黑黑 发表于 2022-7-13 22:53
所以我怀疑是硬件问题。
硬件问题可能是接触问题，一般重新拔插硬盘数据线、内存条、显卡（如果是独立 ...
我是这个系统。今天还没有发生卡瞪的问题。
把文人的雅做出来了。体会得深。 樵歌 发表于 2022-7-14 09:05
把文人的雅做出来了。体会得深。
谢谢樵歌啦。