马黑黑 发表于 2022-4-6 22:01

加林森 发表于 2022-4-6 21:36
飞翔变成奔跑了？

大地之上无从飞翔

加林森 发表于 2022-4-6 22:05

本帖最后由 加林森 于 2022-5-31 21:43 编辑 <br /><br />马黑黑 发表于 2022-4-6 22:01
大地之上无从飞翔
哦，这样的说法还是第一次听见。

<style>
.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 20px; top: 30px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: #fff; background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.15)); background-repeat: no-repeat; background-size:0% 100%; position: absolute; display: flex; cursor: pointer; }
.ball { position: relative; width: 20px; height: 20px; border-radius: 50%; display: block; }
.ball::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%; background: radial-gradient(at 35% 40%, rgba(255,255,255,.5), rgba(0,0,255,.1)); }
@keyframes goRight { from { transform: translate(0) rotate(0); } to {transform: translate(100px) rotate(1turn); } }
@keyframes goLeft { from { transform: translate(100px) rotate(0); } to {transform: translate(0) rotate(-1turn); } }

</style>

<div class="mama">
<img src="https://pic.imgdb.cn/item/62961a150947543129ac3f7d.jpg">
      <div class="wrap"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1408561309.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let step = -1, dir = 'goRight';
let gcolor = () => '#' + Math.random().toString(16).substr(-6), prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 5}).forEach((ele) => {
      ele = document.createElement('span');
      ele.className = 'ball';
      ele.setAttribute('style','background: linear-gradient(120deg, ' +gcolor() + ', ' + gcolor() + ')');
      wrap.appendChild(ele);
});

let ball = document.querySelectorAll('.ball'), total = ball.length;

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

function ballgo() {
      total = total + step;
      if(total < 0) {
                step = 1;
                total = 0;
                dir = 'goLeft';
      }
      if(total > ball.length) {
                step = -1;
                total = ball.length;
                dir = 'goRight';
      }
      ball.style.animation = dir + ' 2s linear forwards';
      wrap.style.transform = dir == 'goRight'? 'rotate(1deg)' : 'rotate(-1deg)';
      let timer = setTimeout(ballgo, 2000);
}

aud.addEventListener('timeupdate', () => wrap.style.backgroundSize = prog(aud.duration, aud.currentTime) + '%, 100%');

ballgo();

</script>

马黑黑 发表于 2022-4-7 07:11

加林森 发表于 2022-4-6 22:05
哦，这样的说法还是第一次听见。

只能在天空中飞行。我们说汽车在大地上奔跑，说飞机在天空中飞行，而不说汽车在大地上飞行，飞机在大地上飞行。

加林森 发表于 2022-4-7 08:27

马黑黑 发表于 2022-4-7 07:11
只能在天空中飞行。我们说汽车在大地上奔跑，说飞机在天空中飞行，而不说汽车在大地上飞行，飞机在大地上 ...

嗯嗯

马黑黑 发表于 2022-4-7 12:35

加林森 发表于 2022-4-7 08:27
嗯嗯

所以我没说错

红影 发表于 2022-4-7 13:12

加林森 发表于 2022-4-6 22:00
就是，听见我就制作了一个出来。

这首歌词也很好{:4_204:}

加林森 发表于 2022-4-7 16:46

红影 发表于 2022-4-7 13:12
这首歌词也很好

是的，很好的歌曲。

加林森 发表于 2022-4-7 16:47

马黑黑 发表于 2022-4-7 12:35
所以我没说错

好的好的，你说了算。

马黑黑 发表于 2022-4-7 18:35

加林森 发表于 2022-4-7 16:47
好的好的，你说了算。

我说了也就算了{:4_170:}

加林森 发表于 2022-4-7 18:56

马黑黑 发表于 2022-4-7 18:35
我说了也就算了

可以的可以的。{:4_189:}

马黑黑 发表于 2022-4-7 20:32

加林森 发表于 2022-4-7 18:56
可以的可以的。

挺好挺好

加林森 发表于 2022-4-7 20:41

马黑黑 发表于 2022-4-7 20:32
挺好挺好

好的好的

马黑黑 发表于 2022-4-7 22:11

加林森 发表于 2022-4-7 20:41
好的好的

{:4_181:}

加林森 发表于 2022-4-7 22:13

马黑黑 发表于 2022-4-7 22:11


{:4_190:}
页: 1 [2]
查看完整版本: 《地球之歌》 -- 迈克尔·杰克逊