加林森 发表于 2022-8-5 09:46

《绿野仙踪》- 陈悦 （学习老黑“吉尔拉”制作）


<style>
#papa { left: -214px; width: 1024px; height: 576px; background: lightgreen url('https://s1.ax1x.com/2022/08/05/vms3Se.jpg') no-repeat center/cover; box-shadow: 3px 3px 24px #000; position: relative; }
#ball { position: absolute; width: 100px; height: 100px; background: rgba(0,255,255,.75) radial-gradient(at 35% 35%, lightgray, transparent); border-radius: 50%; cursor: pointer; }
#tit { position: absolute; padding: 0; margin: 0; left: 20px; top: 20px; font: bold 2em sans-serif; color: #6795ac; text-shadow: 1px 1px 2px rgba(0,0,0,.75); }
</style>

<div id="papa">
      <span id="tit">陈悦 - 绿野仙踪</span>
      <span id="ball"></span>
</div>

<script>
let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;

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

timer = requestAnimationFrame(motion);

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

ball.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(motion)) : (aud.pause(), cancelAnimationFrame(timer));
</script>

加林森 发表于 2022-8-5 09:46

@马黑黑

梦油 发表于 2022-8-5 10:37

欣赏美乐，问候队长。

加林森 发表于 2022-8-5 10:43

梦油 发表于 2022-8-5 10:37
欣赏美乐，问候队长。

老梦上午好！

红影 发表于 2022-8-5 11:06

队长学得真快，这个真漂亮{:4_187:}

梦油 发表于 2022-8-5 11:16

加林森 发表于 2022-8-5 10:43
老梦上午好！

你好老林。陈悦的演奏真精彩。

加林森 发表于 2022-8-5 11:25

红影 发表于 2022-8-5 11:06
队长学得真快，这个真漂亮

红影中午好。有点梦幻的感觉吧。

加林森 发表于 2022-8-5 11:26

梦油 发表于 2022-8-5 11:16
你好老林。陈悦的演奏真精彩。

是的，很好听的。

马黑黑 发表于 2022-8-5 12:40

仙境一样

加林森 发表于 2022-8-5 13:43

马黑黑 发表于 2022-8-5 12:40
仙境一样

要得不？

红影 发表于 2022-8-5 16:54

加林森 发表于 2022-8-5 11:25
红影中午好。有点梦幻的感觉吧。

嗯嗯挺漂亮的。

马黑黑 发表于 2022-8-5 19:07

加林森 发表于 2022-8-5 13:43
要得不？

要得要得

加林森 发表于 2022-8-5 20:51

红影 发表于 2022-8-5 16:54
嗯嗯挺漂亮的。

谢谢啦？

加林森 发表于 2022-8-5 20:56

@小辣椒

小辣椒 发表于 2022-8-5 22:18

队长每天都有作业完成{:4_178:}

加林森 发表于 2022-8-5 22:27

小辣椒 发表于 2022-8-5 22:18
队长每天都有作业完成

是啊。小辣椒晚上好！

青青子衿 发表于 2022-8-5 22:59

加林森友友，厉害，这么快就学会了。。。赞！

青青子衿 发表于 2022-8-5 22:59

俺抽空，也鼓捣鼓捣，入入门

加林森 发表于 2022-8-5 23:16

青青子衿 发表于 2022-8-5 22:59
加林森友友，厉害，这么快就学会了。。。赞！

谢谢青青支持。希望你也参加。

加林森 发表于 2022-8-5 23:17

青青子衿 发表于 2022-8-5 22:59
俺抽空，也鼓捣鼓捣，入入门

欢迎欢迎。
页: [1] 2
查看完整版本: 《绿野仙踪》- 陈悦 （学习老黑“吉尔拉”制作）