朵拉 发表于 2022-8-6 23:38

球球播放器（马黑黑原创）

本帖最后由 朵拉 于 2022-8-6 23:41 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 576px; background: lightgreen url('https://pic.imgdb.cn/item/62ee88e216f2c2beb1b9bee8.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 = 'http://www.kumeiwp.com/sub/filestores/2022/02/03/7325f90b6f4a73b9be7bdf5de6d04d98.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-6 23:40

@马黑黑
马老师好，请指正{:4_190:}

马黑黑 发表于 2022-8-6 23:48

朵拉 发表于 2022-8-6 23:40
@马黑黑
马老师好，请指正

完美！

樵歌 发表于 2022-8-7 07:19

到底是搞音画的，一学就上手，完美！

马黑黑 发表于 2022-8-7 07:38

樵歌 发表于 2022-8-7 07:19
到底是搞音画的，一学就上手，完美！

朵朵有较好的审美力，对音乐的理解也非常到位

加林森 发表于 2022-8-7 09:17

朵拉的作品制作得真漂亮，画面很干净，完美，真好！{:4_199:}

红影 发表于 2022-8-7 09:53

朵宝的制作好漂亮，欣赏{:4_187:}

樵歌 发表于 2022-8-7 11:21

马黑黑 发表于 2022-8-7 07:38
朵朵有较好的审美力，对音乐的理解也非常到位

早就知道了，朵儿厉害得很{:4_173:}

马黑黑 发表于 2022-8-7 11:32

樵歌 发表于 2022-8-7 11:21
早就知道了，朵儿厉害得很

你知道的太多了{:4_170:}

小辣椒 发表于 2022-8-7 12:52

欣赏朵拉漂亮的制作{:4_187:}

樵歌 发表于 2022-8-8 06:47

马黑黑 发表于 2022-8-7 11:32
你知道的太多了

还有许多你不知道的{:4_189:}

马黑黑 发表于 2022-8-8 06:56

樵歌 发表于 2022-8-8 06:47
还有许多你不知道的

那是那是，每个人都有点大小秘密
页: [1]
查看完整版本: 球球播放器（马黑黑原创）