醒来
<style>
#papa { left: -250px; width: 1100px; height: 700px; background: #333 url('https://pic1.imgdb.cn/item/635a3a7316f2c2beb1ca3b4f.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; }
#circle { left: 210px; top: 50px; width: 280px; height: 280px; border-radius: 50%; position: absolute; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; }
@keyframes flash { 20%, to { opacity: 0; } }
</style>
<div id="papa">
<div id="circle"></div>
</p>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1479402682.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;
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 50; 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.2 * num(10,80) + '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_187:} 精彩制作！ 柔缓的音乐 想起我也曾发过一首《醒来》{:5_106:}
https://www.huachaowang.com/forum.php?mod=viewthread&tid=38685&highlight=%D0%D1%C0%B4 清舟醒来了{:4_173:}，音乐也好听， 画面设计很漂亮，点点的星光，尤其文字字体，非常特别。清舟好帖{:4_187:} 清舟朋友的作品总是有出奇制胜的地方。 清舟这个醒来代表是觉醒吗 小辣椒 发表于 2022-10-27 21:12
清舟这个醒来代表是觉醒吗
只是一觉睡醒了{:4_189:} 梦油 发表于 2022-10-27 20:49
清舟朋友的作品总是有出奇制胜的地方。
补技术短板来的{:4_173:} 红影 发表于 2022-10-27 19:37
画面设计很漂亮，点点的星光，尤其文字字体，非常特别。清舟好帖
看到这字喜欢就抠来了 千羽 发表于 2022-10-27 19:33
清舟醒来了，音乐也好听，
嗯··让俺再睡会儿{:4_189:} 绿叶清舟 发表于 2022-10-27 21:25
只是一觉睡醒了
哈哈~~~不会是被吵醒的吧 绿叶清舟 发表于 2022-10-27 21:26
嗯··让俺再睡会儿
在明媚的画面中迎接新的一天{:4_173:} 马黑黑 发表于 2022-10-27 17:09
醒来睁眼，大概就这意思？
醒了还不睁眼，那是想再睡回笼觉了 绿叶清舟 发表于 2022-10-27 21:30
醒了还不睁眼，那是想再睡回笼觉了
睡回笼觉长寿 友昕 发表于 2022-10-27 18:18
精彩制作！ 柔缓的音乐
谢谢{:4_190:}她的歌都有点宗教概念的 欣赏音画佳作！ 小辣椒 发表于 2022-10-27 21:27
哈哈~~~不会是被吵醒的吧
一觉睡到自然醒{:4_189:}