论坛 › 音乐沙龙 › 黄河从草原走过 - 李小沛

绿叶清舟 发表于 2022-9-2 11:43

黄河从草原走过 - 李小沛

本帖最后由 绿叶清舟 于 2022-9-2 19:24 编辑 <br /><br /><style>
#papa { left: -250px; width: 1100px; height: 700px; background: gray url('https://pic.imgdb.cn/item/631177e016f2c2beb1cc6f0e.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#box{ position: absolute;
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #cb6341;
    left: 50%;
    top: 50%;
    margin-top: 50px;
    margin-left: 300px;
}
#mplayer { position: absolute; left: 370px; top: 80px; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 8px; }
#btnwrap { width: 28px; height: 28px; background: #9AB38B; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
#btnwrap:hover { background: #418147; }
#btnplay { width: 16px; height: 16px; background: gold; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent gold; display: none; }
#prog { width: 200px; height: 2px; background: #CDD8DD linear-gradient(90deg,red,olive,red) no-repeat ; background-size: 1px 2px; position: relative; cursor: pointer; }
#prog::before { position: absolute; top: -5px; height: 12px; width: 200px; content: ''; }
#tmsg { left: 260px; bottom: 16px; color: #306052; }
.ball { position: absolute; left: -0px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #F9D23A; animation: move 20s var(--ss) linear infinite; }
@keyframes move {
      0%, 100% { left: 0; top: 0; }
      25% { left: calc(100% - 10px); top: 0; }
      50% { left: calc(100% - 10px); top: calc(100% - 10px); }
      75% { left: 0; top: calc(100% - 10px); }
}
</style>

<div id="papa">
      
      <span id="box">
                <iframe style="opacity: 0.5;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=200 src="https://music.163.com/outchain/player?type=1&id=82919148&auto=1&height=430"></iframe>
                <span id="prog"></span>
               
      </span>
</div>

<script>



Array.from({length: 60}).forEach((item,key) => {
      item = document.createElement('span');
      item.className = 'ball';
      item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(1,6)};`;
      box.appendChild(item);
});

prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());

aud.addEventListener('timeupdate', () => {
      prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
      tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
      for(j = 0; j < lrcAr.length;j ++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
      }
});

let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

let toMin = (val)=> {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 30), sec = parseFloat(val % 30);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>

梦油 发表于 2022-9-2 12:21

小彩球挺漂亮哎！

红影 发表于 2022-9-2 13:51

清舟聪明，这些小珠珠放在小方框也很漂亮呢。欣赏清舟好制作{:4_187:}

梦缘 发表于 2022-9-2 16:30

欣赏老师的精彩分享，问好！{:4_187:}

绿叶清舟 发表于 2022-9-2 18:58

梦缘 发表于 2022-9-2 16:30
欣赏老师的精彩分享，问好！

谢谢梦缘，晚上好，欢迎常来

绿叶清舟 发表于 2022-9-2 18:59

红影 发表于 2022-9-2 13:51
清舟聪明，这些小珠珠放在小方框也很漂亮呢。欣赏清舟好制作

这个套起来容易了{:4_189:}

绿叶清舟 发表于 2022-9-2 19:00

梦油 发表于 2022-9-2 12:21
小彩球挺漂亮哎！

梦油好，马黑的代码套来的了

梦油 发表于 2022-9-2 20:20

绿叶清舟 发表于 2022-9-2 19:00
梦油好，马黑的代码套来的了

你的再创作很不错啊。

红影 发表于 2022-9-2 20:34

绿叶清舟 发表于 2022-9-2 18:59
这个套起来容易了

这个特别适合清舟的网易音乐专辑呢{:4_187:}

绿叶清舟 发表于 2022-9-2 20:39

红影 发表于 2022-9-2 20:34
这个特别适合清舟的网易音乐专辑呢

是啊，这样那个框的大小也能随意的改了

绿叶清舟 发表于 2022-9-2 20:43

梦油 发表于 2022-9-2 20:20
你的再创作很不错啊。

有了现成的套起来就容易了

小辣椒 发表于 2022-9-2 22:56

清舟这个小珠子运用的好{:4_178:}

梦油 发表于 2022-9-3 09:58

绿叶清舟 发表于 2022-9-2 20:43
有了现成的套起来就容易了

再创作的过称，也是一种艰苦的劳动。

绿叶清舟 发表于 2022-9-3 11:23

小辣椒 发表于 2022-9-2 22:56
清舟这个小珠子运用的好

下回搬专辑可以玩啦{:4_189:}

绿叶清舟 发表于 2022-9-3 11:24

梦油 发表于 2022-9-3 09:58
再创作的过称，也是一种艰苦的劳动。

套用简单，一知半解就能玩了{:4_173:}

梦油 发表于 2022-9-3 11:31

绿叶清舟 发表于 2022-9-3 11:24
套用简单，一知半解就能玩了

会者不难，难者不会。

红影 发表于 2022-9-3 15:43

绿叶清舟 发表于 2022-9-2 20:39
是啊，这样那个框的大小也能随意的改了

清舟的颜色也调得好，真棒{:4_187:}

查看完整版本: 黄河从草原走过 - 李小沛