论坛 › 欢乐水吧 › 吉尔拉

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

吉尔拉

<style>
#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; }
#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=211011.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 07:30

代码分享：
<style>
#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; }
#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=211011.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 08:56

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

樵歌 发表于 2022-8-5 09:58

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

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

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

图美、曲美、制作美。

红影 发表于 2022-8-5 10:52

这个圆球的色彩好美。黑黑的制作好棒{:4_187:}

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

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

万物皆可做播放器

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

樵歌 发表于 2022-8-5 09:58
圆球是播放器，图面好干净清爽，帕米尔高原的歌曲吧。
新疆的曲子。吉尔拉，有前苏联、现在俄罗斯民歌特色，上世纪中苏关系甜蜜期时期由前苏联专家带进新疆，后被批为流毒，后来解禁，重新流行。

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

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

过得去，一般般

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

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

一般般，过得去

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

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

嗯嗯，明白的。

梦油 发表于 2022-8-5 14:38

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

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

东篱闲人 发表于 2022-8-5 15:47

黑黑玩球，出神入化！{:5_116:}

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

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

很喜欢的色彩{:4_187:}

马黑黑 发表于 2022-8-5 18:58

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

还行，不难看

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

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

玩球需要太极功力

樵歌 发表于 2022-8-5 19:06

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

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

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

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

它们基本同源

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

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

{:4_181:}

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

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

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

查看完整版本: 吉尔拉