绿叶清舟 发表于 2022-7-11 21:08

跳舞街


<style>
#papa { left: -200px; width: 1000px; height: 700px; background: blue url('https://pic.imgdb.cn/item/62cc1c7ef54cd3f93713057f.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; opacity: .75;}
#hunter { position: absolute; width: 220px; height: 276px; transition: all 3s; z-index: 99; mix-blend-mode: multiply;}
#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://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2FIvfEoJ91E2jLFdpNdjREoQfPWTr3EIvY.gif&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660134824&t=69a807756457e3d2ec032c3da9e58e99" />
      <img id="prey" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftva1.sinaimg.cn%2Fbmiddle%2F006I1bcHgy1fq6nvxzzppg308c08cq3f.gif&refer=http%3A%2F%2Ftva1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660135002&t=45bef51f95db71b71c2c53ddbd9bb245" alt="" />
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=5256035.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,750), top = num(410,508);
      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-7-11 21:17

挺好玩的。

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

清舟以后跟你玩。{:4_170:}

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

这个制作真漂亮，还是透明的。{:4_178:}

绿叶清舟 发表于 2022-7-11 21:38

加林森 发表于 2022-7-11 21:19
清舟以后跟你玩。

一起来跳舞吗{:4_189:}

绿叶清舟 发表于 2022-7-11 21:39

加林森 发表于 2022-7-11 21:17
挺好玩的。

谢谢队长，正好听到这首歌了

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

绿叶清舟 发表于 2022-7-11 21:38
一起来跳舞吗

跟你学习。

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

绿叶清舟 发表于 2022-7-11 21:39
谢谢队长，正好听到这首歌了

不客气的啊。

绿叶清舟 发表于 2022-7-11 21:47

加林森 发表于 2022-7-11 21:42
跟你学习。

咱们一起学了

绿叶清舟 发表于 2022-7-11 21:48

加林森 发表于 2022-7-11 21:43
不客气的啊。

嗯，来干一个{:4_176:}

红影 发表于 2022-7-11 21:54

这个做得有趣，旁边的是舞魂么，一直有舞魂跟着，怪不得跳得那么好{:4_173:}

马黑黑 发表于 2022-7-11 22:22

这舞蹈，滑步做的比俺雨天下山的滑步还漂亮

加林森 发表于 2022-7-11 22:29

绿叶清舟 发表于 2022-7-11 21:48
嗯，来干一个

我又被卡出去了。现在用的是手机。

大猫咪 发表于 2022-7-12 12:54

哈哈   清舟这是在疫情时候吧，就2个人真跳{:4_187:} 好玩！ 好创意！{:4_173:}

马黑黑 发表于 2022-7-12 13:11

{:4_181:}

绿叶清舟 发表于 2022-7-12 16:36

马黑黑 发表于 2022-7-11 22:22
这舞蹈，滑步做的比俺雨天下山的滑步还漂亮

雨天下山用滚步的好吧

绿叶清舟 发表于 2022-7-12 16:37

大猫咪 发表于 2022-7-12 12:54
哈哈   清舟这是在疫情时候吧，就2个人真跳   好玩！ 好创意！

找到那个小图觉得好玩就做了个

绿叶清舟 发表于 2022-7-12 16:37

加林森 发表于 2022-7-11 22:29
我又被卡出去了。现在用的是手机。

昨晚俺这也是网速不好

绿叶清舟 发表于 2022-7-12 16:38

红影 发表于 2022-7-11 21:54
这个做得有趣，旁边的是舞魂么，一直有舞魂跟着，怪不得跳得那么好

看到那个小图自己也想笑了{:4_189:}

加林森 发表于 2022-7-12 16:42

绿叶清舟 发表于 2022-7-12 16:37
昨晚俺这也是网速不好

我现在用的是手机。
页: [1] 2 3 4
查看完整版本: 跳舞街