夜
<style>#papa { left: -214px; width: 1024px; height: 630px; background: #333 url('/data/attachment/forum/202207/12/125409gh5clttt55r5tds5.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #B8972B; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#circle { left: 10px; top: 10px; width: 240px; height: 240px; border-radius: 50%; position: absolute; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; }
@keyframes flash { to { opacity: 0; } }
</style>
<div id="papa">
<div id="circle"></div>
<div class="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">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>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1396953271.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let slip = 0, idx = 0, total = 500, gap = 100;
let add = setInterval(addDot, gap), del;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
['0.00','作曲：种旭、卢一酒'],
['0.36','作词：种旭'],
['0.67','编曲：黑薄荷乐队'],
['1.37','录音、混音、母带：卢一酒'],
['2.40','录音、后期场地：酒歌工作室'],
['3.32','吉他：卢一酒、种旭'],
['4.09','贝斯：陆昕'],
['4.91','鼓：石磊'],
['6.03','主唱：高伟'],
['14.10','今天的饭今天吃饱'],
['19.35','明天的事谁会知道'],
['24.50','心脏在跳像挂在墙上的表'],
['29.72','寂寞在一秒一秒'],
['35.14','这座城市的房子越盖越高'],
['39.72','但人与人之间的对话越来越少'],
['43.94','今夜的路太黑'],
['46.56','你又会想起谁'],
['49.23','今夜我不会睡'],
['51.76','你会不会来安慰'],
['54.46','今夜的路太黑'],
['56.93','你又会想起谁'],
['59.60','今夜我不会睡'],
['62.18','我需要你的安慰'],
['76.71','今天的酒今天喝掉'],
['81.87','昨天的仇不必再报'],
['86.99','时间就这样给了青春一刀'],
['92.34','谁还能面带微笑'],
['97.57','电话打给我的人越来越多'],
['102.06','但在乎我的朋友真的越来越少'],
['106.63','今夜的路太黑'],
['109.22','你又会想起谁'],
['111.83','今夜我不会睡'],
['114.41','你会不会来安慰'],
['117.04','今夜的路太黑'],
['119.54','你又会想起谁'],
['122.13','今夜我不会睡'],
['124.77','我需要你的安慰'],
['139.38','别让我寂寞'],
['141.87','别让我想太多'],
['144.43','别让我在夜晚想找个人却找不到'],
['149.74','别让我寂寞'],
['152.34','别让我想太多'],
['154.97','别让我听着音乐整夜睡不着'],
['160.34','今夜的路太黑'],
['162.62','你又会想起谁'],
['165.30','今夜我不会睡'],
['167.89','你会不会来安慰'],
['170.54','今夜的路太黑'],
['173.08','你又会遇到谁'],
['175.72','今夜都不会睡'],
['178.30','我需要你的安慰']
];
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 = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
function addDot() {
let ele = document.createElement('span');
let ww = circle.offsetWidth / 2;
ele.className = 'star';
ele.style.animation = 'flash ' + 0.1 * num(10,50) + 's infinite';
let pos = calcCirclePos({x: ww, y: ww, r: num(0,ww - 2), a: num(0,360)});
ele.style.left = pos.xx + 'px';
ele.style.top = pos.yy + 'px';
circle.appendChild(ele);
idx ++;
if(idx >= total){
clearInterval(add);
idx = 0;
del = setInterval(delDot, gap);
}
}
function delDot() {
let ele = document.querySelector('.star');
if(ele) {
circle.removeChild(ele);
} else {
clearInterval(del);
add = setInterval(addDot,gap);
}
}
function calcCirclePos({x,y,r,a}) {
let xx = x + r * Math.cos((a * Math.PI) / 180);
let yy = y + r * Math.sin((a * Math.PI) / 180);
return {xx,yy};
}
</script>
这样的夜真浪漫 {:4_189:}老黑昨天晚上梦见小芳了，相牵的似水流年，依旧清晰如昨，{:4_173:} 大猫咪 发表于 2022-7-12 13:01
这样的夜真浪漫 老黑昨天晚上梦见小芳了，相牵的似水流年，依旧清晰如昨，
嗯，还真是。咋俺梦见啥，你都知道呢{:4_170:} 马黑黑 发表于 2022-7-12 13:03
嗯，还真是。咋俺梦见啥，你都知道呢
猫回家的路上见到{:4_189:}天上星星都亮了 {:4_173:} 大猫咪 发表于 2022-7-12 13:05
猫回家的路上见到天上星星都亮了
原理是星相学原理 马黑黑 发表于 2022-7-12 13:07
原理是星相学原理
作为一种征兆向人们显示神的旨意{:4_170:} 大猫咪 发表于 2022-7-12 13:14
作为一种征兆向人们显示神的旨意
说的有道理。空了俺也学学星斗知识 黑黑把圆周点设定和添加和减去小球的内容，都用在这个帖子的星星里了。这个还真的是在圆形区域里呢。
只是感觉不是全部星星出来后再灭掉，而是边生边灭，很有闪烁的感觉呢{:4_187:} 这么浪漫的场景，咋配了这样歇斯底里的歌曲{:4_173:} 红影 发表于 2022-7-12 15:19
这么浪漫的场景，咋配了这样歇斯底里的歌曲
配的挺好的{:5_106:} 红影 发表于 2022-7-12 15:18
黑黑把圆周点设定和添加和减去小球的内容，都用在这个帖子的星星里了。这个还真的是在圆形区域里呢。
只是 ...
出现完了才又陆续消失，当中，每一粒小星星拥有自己闪烁的keyframes动画，看上去好像消失过 马黑黑 发表于 2022-7-12 18:14
出现完了才又陆续消失，当中，每一粒小星星拥有自己闪烁的keyframes动画，看上去好像消失过
哦，是这样啊，效果很不错呢{:4_204:} 马黑黑 发表于 2022-7-12 18:08
配的挺好的
一点都不浪漫了啊{:4_173:} 红影 发表于 2022-7-12 20:16
一点都不浪漫了啊
浪漫又不能当饭吃{:4_170:} 红影 发表于 2022-7-12 20:16
哦，是这样啊，效果很不错呢
一般般，过得去 今天的饭昨天吃饱了也没用啊 绿叶清舟 发表于 2022-7-12 20:40
今天的饭昨天吃饱了也没用啊
那明天吃吧 马黑黑 发表于 2022-7-12 20:55
那明天吃吧
那明天的饭咋办 绿叶清舟 发表于 2022-7-12 20:57
那明天的饭咋办
后天吃，都往后挪 黑黑，这个图图意境特别美{:4_199:}