吉尔拉

马黑黑

陈悦 - 吉尔拉

马黑黑

代码分享：

1. <style>
   
2. #papa { left: -214px; width: 1024px; height: 576px; background: lightgreen url('https://638183.freep.cn/638183/Pic/81/lake1.jpg') no-repeat center/cover; box-shadow: 3px 3px 24px #000; position: relative; }
   
3. #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; }
   
4. #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); }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <span id="tit">陈悦 - 吉尔拉</span>
   
9.         <span id="ball"></span>
   
10. </div>
    
11. 
    
12. <script>
    
13. let moveX = 0, moveY = 0, stepX = 1, stepY = 1, canMove = true, aud = new Audio(), timer;
    
14. 
    
15. aud.src = 'https://music.163.com/song/media/outer/url?id=211011.mp3';
    
16. aud.loop = true;
    
17. aud.autoplay = true;
    
18. 
    
19. timer = requestAnimationFrame(motion);
    
20. 
    
21. function motion() {
    
22.         moveX += stepX;
    
23.         moveY += stepY;
    
24.         ball.style.left = moveX + 'px';
    
25.         ball.style.top = moveY + 'px';
    
26.         timer = requestAnimationFrame(motion);
    
27.         if(moveX < 0 || moveX > papa.offsetWidth - ball.offsetWidth) stepX = -stepX;
    
28.         if(moveY < 0 || moveY > papa.offsetHeight - ball.offsetHeight) stepY = -stepY;
    
29. }
    
30. 
    
31. ball.onclick = () => aud.paused ? (aud.play(), requestAnimationFrame(motion)) : (aud.pause(), cancelAnimationFrame(timer));
    
32. </script>

复制代码

加林森

圆球是播放器啊。有意思！

樵歌

圆球是播放器，图面好干净清爽，帕米尔高原的歌曲吧。

梦油

马黑黑 发表于 2022-8-5 07:30
代码分享：

图美、曲美、制作美。

红影

这个圆球的色彩好美。黑黑的制作好棒

马黑黑

加林森 发表于 2022-8-5 08:56
圆球是播放器啊。有意思！

万物皆可做播放器

马黑黑

樵歌 发表于 2022-8-5 09:58
圆球是播放器，图面好干净清爽，帕米尔高原的歌曲吧。

新疆的曲子。吉尔拉，有前苏联、现在俄罗斯民歌特色，上世纪中苏关系甜蜜期时期由前苏联专家带进新疆，后被批为流毒，后来解禁，重新流行。

马黑黑

梦油 发表于 2022-8-5 10:16
图美、曲美、制作美。

过得去，一般般

马黑黑

红影 发表于 2022-8-5 10:52
这个圆球的色彩好美。黑黑的制作好棒

一般般，过得去

加林森

马黑黑 发表于 2022-8-5 12:37
万物皆可做播放器

嗯嗯，明白的。

梦油

马黑黑 发表于 2022-8-5 12:41
过得去，一般般

你注册一个自己的工作室多好啊

东篱闲人

黑黑玩球，出神入化！

红影

马黑黑 发表于 2022-8-5 12:42
一般般，过得去

很喜欢的色彩

马黑黑

红影 发表于 2022-8-5 16:55
很喜欢的色彩

还行，不难看

马黑黑

东篱闲人 发表于 2022-8-5 15:47
黑黑玩球，出神入化！

玩球需要太极功力

樵歌

马黑黑 发表于 2022-8-5 12:40
新疆的曲子。吉尔拉，有前苏联、现在俄罗斯民歌特色，上世纪中苏关系甜蜜期时期由前苏联专家带进新疆，后 ...

和柳笛独奏＂帕米尔的春天＂相似

马黑黑

樵歌 发表于 2022-8-5 19:06
和柳笛独奏＂帕米尔的春天＂相似

它们基本同源

马黑黑

加林森 发表于 2022-8-5 13:44
嗯嗯，明白的。

马黑黑

梦油 发表于 2022-8-5 14:38
你注册一个自己的工作室多好啊

算了，没那闲心，随意玩玩