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

《琵琶行歌》（学习老黑“空月”制作）


<style>
#papa { left: -302px;; width: 1200px; height: 800px; background: #985b0a url('https://s1.ax1x.com/2022/08/06/vuFM2n.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }
#mama { position: absolute; width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); display: grid; place-items: center; }
#box { position: absolute; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset -8px -8px 160px -8px tan; animation: circle 4s linear infinite alternate; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: tan; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>

<div id="papa">
      <div id="mama"><span id="box"></span></div>
      <div id="tit">琵琶行歌 - 高思超</div>
      <div id="disc"></div>
</div>

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

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

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

motion();

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

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

@马黑黑

小辣椒 发表于 2022-8-6 13:59

队长的学习态度真的佩服，也是速度的{:4_178:}

加林森 发表于 2022-8-6 14:16

小辣椒 发表于 2022-8-6 13:59
队长的学习态度真的佩服，也是速度的

我是活学活用，看了就想制作的。{:4_189:}

马黑黑 发表于 2022-8-6 16:41

欣赏队长精美制作

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

马黑黑 发表于 2022-8-6 16:41
欣赏队长精美制作

谢谢老黑了。{:4_190:}

樵歌 发表于 2022-8-6 17:52

不愧大师兄，这质量速度杠杠的！{:4_178:}

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

樵歌 发表于 2022-8-6 17:52
不愧大师兄，这质量速度杠杠的！

好听好看就行了。

红影 发表于 2022-8-6 18:31

欣赏队长精美制作{:4_204:}

加林森 发表于 2022-8-6 18:37

红影 发表于 2022-8-6 18:31
欣赏队长精美制作

红影晚上好！

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

加林森 发表于 2022-8-6 18:21
好听好看就行了。

做到可不容易了

加林森 发表于 2022-8-7 08:38

樵歌 发表于 2022-8-7 07:27
做到可不容易了

嗯嗯。有点难度的。

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

加林森 发表于 2022-8-7 08:38
嗯嗯。有点难度的。

啃腚是后面越来越难{:4_173:}

加林森 发表于 2022-8-7 12:11

樵歌 发表于 2022-8-7 11:24
啃腚是后面越来越难

不急的，慢慢学习就行了。

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

加林森 发表于 2022-8-7 12:11
不急的，慢慢学习就行了。

还真的认真哪{:4_189:}

加林森 发表于 2022-8-8 08:29

樵歌 发表于 2022-8-8 06:59
还真的认真哪

当然了啊

樵歌 发表于 2022-8-8 17:02

加林森 发表于 2022-8-8 08:29
当然了啊

必须赞{:4_190:}

加林森 发表于 2022-8-8 17:39

樵歌 发表于 2022-8-8 17:02
必须赞

谢谢老兄！{:4_190:}

樵歌 发表于 2022-8-9 11:03

加林森 发表于 2022-8-8 17:39
谢谢老兄！

说远了

加林森 发表于 2022-8-9 11:43

樵歌 发表于 2022-8-9 11:03
说远了

那就不说了。
页: [1]
查看完整版本: 《琵琶行歌》（学习老黑“空月”制作）