论坛 › 欢乐水吧 › 东游记

绿叶清舟 发表于 2022-8-27 19:48

东游记

<style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #122232 url('https://pic.imgdb.cn/item/630a04ae16f2c2beb1a82691.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }

#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(#000000,#969696,#000000,#969696,#000000); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: #c5d0e2; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>

<div id="papa">
      
      <div id="tit">东游记 - 斑马森林乐队</div>
      <div id="disc"></div>
</div>
<BR><BR><BR><BR><BR><BR>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();

aud.src = 'http://music.163.com/song/media/outer/url?id=36150817.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

motion();

function motion() {
      moveX += stepX;
      moveY += stepY;
      mama.style.left = moveX + 'px';
      mama.style.top = moveY + 'px';
      requestAnimationFrame(motion);
      if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
      if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>

红影 发表于 2022-8-27 20:16

西游是去西天，这东游是想去哪啊{:4_173:}

红影 发表于 2022-8-27 20:17

歌曲很奇特，图图制作很美。清舟真棒{:4_187:}

梦油 发表于 2022-8-27 20:31

唱的挺有意思，哈哈哈……

小辣椒 发表于 2022-8-27 20:57

清舟的转盘颜色做的真漂亮{:4_199:}

小辣椒 发表于 2022-8-27 20:58

这个图图也是有趣，这个歌曲第一次听到的

加林森 发表于 2022-8-27 21:10

怎么停不下来啊？{:4_203:}

马黑黑 发表于 2022-8-27 22:08

这是孔家老二周游列国的场景。老二像施展自己的才华，无奈落得个丧家犬的下场。世界不缺人才，缺的是发现人才的统治者。

绿叶清舟 发表于 2022-8-30 19:54

加林森 发表于 2022-8-27 21:10
怎么停不下来啊？

谢谢队长，可以停的啊

绿叶清舟 发表于 2022-8-30 19:54

马黑黑 发表于 2022-8-27 22:08
这是孔家老二周游列国的场景。老二像施展自己的才华，无奈落得个丧家犬的下场。世界不缺人才，缺的是发现人 ...

老二生不逢时了

绿叶清舟 发表于 2022-8-30 19:55

小辣椒 发表于 2022-8-27 20:57
清舟的转盘颜色做的真漂亮

从那个渐变转盘改来的了

绿叶清舟 发表于 2022-8-30 19:56

梦油 发表于 2022-8-27 20:31
唱的挺有意思，哈哈哈……

这风格俺也是头一回听的了

绿叶清舟 发表于 2022-8-30 19:56

红影 发表于 2022-8-27 20:16
西游是去西天，这东游是想去哪啊

茶马古道去了{:4_189:}

马黑黑 发表于 2022-8-30 20:18

绿叶清舟 发表于 2022-8-30 19:54
老二生不逢时了

逢了，是时不逢他

加林森 发表于 2022-8-30 20:22

绿叶清舟 发表于 2022-8-30 19:54
谢谢队长，可以停的啊

哦。我再看看。

绿叶清舟 发表于 2022-8-30 20:28

马黑黑 发表于 2022-8-30 20:18
逢了，是时不逢他

他的那套理论只能用于盛时，乱世时不管用的了

马黑黑 发表于 2022-8-30 20:28

绿叶清舟 发表于 2022-8-30 20:28
他的那套理论只能用于盛时，乱世时不管用的了

其实啥时候都同步了，谁用了谁乱

梦油 发表于 2022-8-30 20:29

绿叶清舟 发表于 2022-8-30 19:56
这风格俺也是头一回听的了

挺有意思的。

红影 发表于 2022-8-30 20:54

绿叶清舟 发表于 2022-8-30 19:56
茶马古道去了

哈哈，清舟真能想，也真敢想{:4_173:}

绿叶清舟 发表于 2022-8-30 20:55

红影 发表于 2022-8-30 20:54
哈哈，清舟真能想，也真敢想

反正想想不犯罪{:4_189:}

查看完整版本: 东游记