midnight bounce
<style>.papa { left: -214px; width: 1024px; height: 680px; background: rgba(0,0,0,.6) url('/data/attachment/forum/202206/29/130913khm8ki78pakxlw7a.jpg') no-repeat center / cover; box-shadow: 0 2px 30px #000; overflow: hidden; position: relative; perspective: 1000px; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 10px; right: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: ghostwhite; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
.ball { right: 20px;top: 20px;width: 360px;height: 360px;background: #ccc;position: relative;animation: rot 10s linear infinite;border-radius: 50%;background: snow linear-gradient(65deg, black, tan, teal, tomato, green, red, white);mask-image: radial-gradient(transparent 60%, #eee);-webkit-mask-image: radial-gradient(transparent 60%, #eee);position: absolute; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="papa">
<div class="ball"></div>
<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:0 | 0:0</span>
</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=521415750.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0;
let lrcAr = [
['0.01','Midnight Bounce - 纯音乐'],
['3.00','歌手：LAKEY INSPIRED'],
['5.05','所属专辑：Midnight Bounce'],
['160','音乐是我们最好的朋友']
];
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');
}
</script> 老黑的这个制作很特别，一个同步大圆球跟着在转。真漂亮！{:4_199:} 一个流光溢彩的大水泡，让帖子多了几份灵动。真美{:4_199:} 这音乐是高品质音乐的吧，听着很舒服{:4_204:} 红影 发表于 2022-6-29 16:28
这音乐是高品质音乐的吧，听着很舒服
国人的作品 加林森 发表于 2022-6-29 13:57
老黑的这个制作很特别，一个同步大圆球跟着在转。真漂亮！
还可以一看吧 红影 发表于 2022-6-29 16:21
一个流光溢彩的大水泡，让帖子多了几份灵动。真美
这个水泡做的匆忙，好像不是很像 马黑黑 发表于 2022-6-29 19:10
还可以一看吧
相当漂亮的。老黑制作真认真。{:4_199:} 漂亮，吹这么大不容易吧{:4_189:} 绿叶清舟 发表于 2022-6-29 19:57
漂亮，吹这么大不容易吧
肥皂泡确实不好吹 加林森 发表于 2022-6-29 19:49
相当漂亮的。老黑制作真认真。
随手制作，不算认真的 马黑黑 发表于 2022-6-29 21:18
肥皂泡确实不好吹
现在有黑科技的再大也能吹了 马黑黑 发表于 2022-6-29 21:18
随手制作，不算认真的
漂亮。 这个泡泡有点大的{:4_173:} 黑黑也是厉害，这么忙还每天都有新作品出来{:4_178:} 小辣椒 发表于 2022-6-29 21:42
黑黑也是厉害，这么忙还每天都有新作品出来
吃午饭后做下 马黑黑 发表于 2022-6-29 21:54
吃午饭后做下
黑黑辛苦的，我白天不能玩电脑，只能晚上了{:4_201:} 小辣椒 发表于 2022-6-29 21:55
黑黑辛苦的，我白天不能玩电脑，只能晚上了
适可而止额 加林森 发表于 2022-6-29 21:27
漂亮。
谢夸 绿叶清舟 发表于 2022-6-29 21:24
现在有黑科技的再大也能吹了
吹个天大的行不