设计思路非常好。。。
谢谢老兄点评！{:4_190:}
<style>
#papa { left: -202px; width: 1000px; height: 700px; background: blue url('https://pic.imgdb.cn/item/62cab79bf54cd3f937638f99.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 80px; height: 102px; transition: all 3s; z-index: 99; }
#prey { position: absolute; width: 160px; height: 180px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 60px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>
<div id="papa">
<input id="btnplay" type="button" value=">" />
<div id="lrcbox">LRC LOADING ...</div>
<img id="hunter" alt="" src="https://pic.imgdb.cn/item/62cac666f54cd3f9377aeb88.gif" />
<img id="prey" src="https://pic.imgdb.cn/item/62cab895f54cd3f93765232f.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=206133.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let lrcAr = [
['0.00','曲名 : 光阴仙子'],
['5.00','歌手 : 阿轮'],
['10.00','帖名 : 纯音乐'],
['160.00','谢谢欣赏 ']
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function gogo() {
let left = num(50,800), top = num(420,518);
prey.style.left = left + 'px';
prey.style.top = top + 'px';
hunter.style.left = left + 110 + 'px';
hunter.style.top = top - 50 + 'px';
setTimeout(gogo,6000);
}
</script>
加林森 发表于 2022-6-4 12:26
你的想法又出来了哇？真是大脑壳，想法都与别人不一样。。。。
嗯嗯，注意小行星。。。{:5_117:} 东篱闲人 发表于 2022-6-4 12:27
嗯嗯，注意小行星。。。
要得要得 加林森 发表于 2022-6-4 12:27
谢谢老兄点评！
整个画面和谐了。不再显得突兀，非常好。。。{:4_187:} 东篱闲人 发表于 2022-6-4 12:28
整个画面和谐了。不再显得突兀，非常好。。。
那就好那就好。来来来，喝点水：{:4_176:} 这个做得漂亮，队长修改了按钮颜色，和背景非常协调，真棒{:4_187:} 红影 发表于 2022-6-4 12:53
这个做得漂亮，队长修改了按钮颜色，和背景非常协调，真棒
是啊，与背景融合在一起了。 你这个播放器设计的位置太巧秒了。 梦油 发表于 2022-6-4 14:56
你这个播放器设计的位置太巧秒了。
谢谢老梦！{:4_190:} 加林森 发表于 2022-6-4 14:59
谢谢老梦！
别客气。 加林森 发表于 2022-6-4 11:52
我把播放器的颜色修改了，并让播放器可以随便移动了。
队长这个按钮移动会了，那个风和云的按钮也是去学会移动玩玩 小辣椒 发表于 2022-6-4 16:22
队长这个按钮移动会了，那个风和云的按钮也是去学会移动玩玩
嗯嗯，好像有点明白的。 梦油 发表于 2022-6-4 15:12
别客气。
好的好的
页:
1
[2]