加林森 发表于 2022-7-11 18:06

《云朵上的灯塔》 - 刘良骏


<style>
#papa { left: -352px;width: 1300px; height: 758px; background: blue url('https://pic.imgdb.cn/item/62cbf4e3f54cd3f937d7969d.png') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 122px; height: 147px; 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/6247e3c027f86abb2a56f17a.gif" />
        <img id="prey" src="https://pic.imgdb.cn/item/62cbf191f54cd3f937d2229c.jpg" alt="" />
</div>
<audio id="aud" src="https://www.joy127.com/url/88280.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,1050), top = num(420,518);
        prey.style.left = left + 'px';
        prey.style.top = top + 'px';
        hunter.style.left = left + 45 + 'px';
        hunter.style.top = top - 100 + 'px';
        setTimeout(gogo,6000);
}
</script>

梦油 发表于 2022-7-11 18:16

这灯塔还有个保护神，灯塔到哪，它就跟到哪儿。

红影 发表于 2022-7-11 18:20

黑黑说你喜欢玩鹰，真的弄了一只鹰啊{:4_170:}

加林森 发表于 2022-7-11 18:20

梦油 发表于 2022-7-11 18:16
这灯塔还有个保护神，灯塔到哪，它就跟到哪儿。

是的。本队的鹰放出来了。{:4_189:}

加林森 发表于 2022-7-11 18:23

红影 发表于 2022-7-11 18:20
黑黑说你喜欢玩鹰，真的弄了一只鹰啊

必须的。{:4_205:}

马黑黑 发表于 2022-7-11 18:26

图片做的有水平。队长好制作。赞！

加林森 发表于 2022-7-11 18:28

马黑黑 发表于 2022-7-11 18:26
图片做的有水平。队长好制作。赞！

谢谢老黑！

马黑黑 发表于 2022-7-11 18:29

加林森 发表于 2022-7-11 18:28
谢谢老黑！

喝水{:4_190:}

加林森 发表于 2022-7-11 18:33

马黑黑 发表于 2022-7-11 18:29
喝水

谢茶！你喝：{:4_191:}

红影 发表于 2022-7-11 19:08

加林森 发表于 2022-7-11 18:23
必须的。

到底用透明的图片好，感觉更漂亮{:4_204:}

加林森 发表于 2022-7-11 20:02

红影 发表于 2022-7-11 19:08
到底用透明的图片好，感觉更漂亮

有感觉就好。

加林森 发表于 2022-7-11 21:21

@小辣椒

小辣椒 发表于 2022-7-11 21:31

队长这个效果不错{:4_178:}

小辣椒 发表于 2022-7-11 21:32

这个图图也是漂亮。队长现在玩的很溜了{:4_199:}

加林森 发表于 2022-7-11 21:34

小辣椒 发表于 2022-7-11 21:31
队长这个效果不错

我自己也感觉挺好的。

加林森 发表于 2022-7-11 21:36

小辣椒 发表于 2022-7-11 21:32
这个图图也是漂亮。队长现在玩的很溜了

我用的是秀秀，把图片修改了一下。

梦油 发表于 2022-7-12 10:46

加林森 发表于 2022-7-11 18:20
是的。本队的鹰放出来了。

是啊，好几天没见到你的鹰了。

加林森 发表于 2022-7-12 11:46

梦油 发表于 2022-7-12 10:46
是啊，好几天没见到你的鹰了。

是的。
页: [1]
查看完整版本: 《云朵上的灯塔》 - 刘良骏