加林森 发表于 2022-6-1 11:37

《雪之梦重混版 》- Sound River/Bandari

本帖最后由 加林森 于 2022-6-1 18:21 编辑 <br /><br /><style>
.mama { width: 768px; height: 560px; background: #fff; box-shadow: 2px 2px 4px #333; position: relative; }
.wrap { left: 20px; top: 80px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: #6f5e97; 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/6296de0509475431295c4e9f.jpg">
      <div class="wrap"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=465301792.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 - 1;
                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-6-1 11:38

@马黑黑

马黑黑 发表于 2022-6-1 12:17

这个挂在树根处就更形象了，挂在天空太平淡

加林森 发表于 2022-6-1 12:34

马黑黑 发表于 2022-6-1 12:17
这个挂在树根处就更形象了，挂在天空太平淡

那我就移回来。

加林森 发表于 2022-6-1 12:35

马黑黑 发表于 2022-6-1 12:17
这个挂在树根处就更形象了，挂在天空太平淡

我移回来了，老黑再来看看。

马黑黑 发表于 2022-6-1 13:16

加林森 发表于 2022-6-1 12:35
我移回来了，老黑再来看看。

我的意思不是移回来

加林森 发表于 2022-6-1 13:24

马黑黑 发表于 2022-6-1 13:16
我的意思不是移回来

明白的，移到树上有艺术感的。

梦油 发表于 2022-6-1 16:20

《雪之梦重混版》宛如阳春白雪,天籁之音。这支乐曲选得好！

红影 发表于 2022-6-1 16:39

好听。这制作真漂亮{:4_187:}

加林森 发表于 2022-6-1 17:14

梦油 发表于 2022-6-1 16:20
《雪之梦重混版》宛如阳春白雪,天籁之音。这支乐曲选得好！

是的

加林森 发表于 2022-6-1 17:14

红影 发表于 2022-6-1 16:39
好听。这制作真漂亮

谢谢啊！

小辣椒 发表于 2022-6-1 17:32

队长不错了，可以播放器自由修改位置，现在代码看的懂了，进步很快哦{:4_178:}

加林森 发表于 2022-6-1 17:38

小辣椒 发表于 2022-6-1 17:32
队长不错了，可以播放器自由修改位置，现在代码看的懂了，进步很快哦

嗯嗯，必须学好才行的。

马黑黑 发表于 2022-6-1 18:14

加林森 发表于 2022-6-1 13:24
明白的，移到树上有艺术感的。

是这个意思

马黑黑 发表于 2022-6-1 18:15

加林森 发表于 2022-6-1 13:24
明白的，移到树上有艺术感的。

但是是让树干作为跷跷板的支撑点，这样才能在有艺术感的基础上更贴切生活

加林森 发表于 2022-6-1 18:17

马黑黑 发表于 2022-6-1 18:14
是这个意思

谢谢！

加林森 发表于 2022-6-1 18:18

马黑黑 发表于 2022-6-1 18:15
但是是让树干作为跷跷板的支撑点，这样才能在有艺术感的基础上更贴切生活

是的。
页: [1]
查看完整版本: 《雪之梦重混版 》- Sound River/Bandari