加林森 发表于 2022-8-6 10:53

【中伏消暑】第十二天 产：《国产动画片片尾曲快乐女孩》- 刘惜君

本帖最后由 加林森 于 2022-8-6 13:28 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: lightgreen url('https://s1.ax1x.com/2022/08/05/vm52Js.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: #ffb3a7; 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=255184.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 10:54

快乐女孩 - 歌手：刘惜君

所属专辑：快乐女孩

作词 : 秋言
作曲 : 秋言
我要甜甜的味道
我要香香的泡泡
不要咸咸的眼泪
我要星星都闪耀
我有奇幻的梦想
穿越时空到处跑
衣服鞋子多的数不清
古装时装要配套
笑一笑跳一跳
快乐女孩没烦恼
下雨了洗个澡
没有什么大不了
笑一笑跳一跳
快乐女孩乐逍遥
天晴了空气中
都是成长的味道


我要甜甜的味道
我要香香的泡泡
不要咸咸的眼泪
我要星星都闪耀
我有奇幻的梦想
穿越时空到处跑
衣服鞋子多的数不清
古装时装要配套
笑一笑跳一跳
快乐女孩没烦恼
下雨了洗个澡
没有什么大不了
笑一笑 跳一跳
快乐女孩乐逍遥
天晴了 空气中
都是成长的味道
笑一笑 跳一跳
快乐女孩没烦恼
下雨了 洗个澡
没有什么大不了
笑一笑 跳一跳
快乐女孩乐逍遥
天晴了 空气中
都是成长的味道
都是成长的味道
都是成长的味道

梦油 发表于 2022-8-6 11:06

《快乐女孩》为朋友们带来快乐。

加林森 发表于 2022-8-6 11:13

梦油 发表于 2022-8-6 11:06
《快乐女孩》为朋友们带来快乐。

老梦周六快乐！

梦油 发表于 2022-8-6 11:24

加林森 发表于 2022-8-6 11:13
老梦周六快乐！

你好，老林。

加林森 发表于 2022-8-6 12:15

梦油 发表于 2022-8-6 11:24
你好，老林。

大家都好！

红影 发表于 2022-8-6 13:11

哈哈，国产，用这个字来扣消暑字，倒也巧妙。这帖子很童趣好看{:4_187:}

红影 发表于 2022-8-6 13:12

这个浮动的球球要是弄成底图同色系就更好了{:4_204:}

加林森 发表于 2022-8-6 13:19

红影 发表于 2022-8-6 13:11
哈哈，国产，用这个字来扣消暑字，倒也巧妙。这帖子很童趣好看

挺好玩的。

加林森 发表于 2022-8-6 13:31

红影 发表于 2022-8-6 13:12
这个浮动的球球要是弄成底图同色系就更好了

我换了，还是这个颜色呢？真奇怪。

红影 发表于 2022-8-6 21:27

加林森 发表于 2022-8-6 13:19
挺好玩的。

是啊，非常有趣。

红影 发表于 2022-8-6 21:27

加林森 发表于 2022-8-6 13:31
我换了，还是这个颜色呢？真奇怪。

是的，颜色没换过来。

加林森 发表于 2022-8-6 21:34

红影 发表于 2022-8-6 21:27
是啊，非常有趣。

就是。喜欢这些年轻人蹦蹦跳跳的 。

加林森 发表于 2022-8-6 21:36

红影 发表于 2022-8-6 21:27
是的，颜色没换过来。

等它这样了 。
页: [1]
查看完整版本: 【中伏消暑】第十二天 产：《国产动画片片尾曲快乐女孩》- 刘惜君