论坛 › 音乐沙龙 › 国色 - 天弦唱片

绿叶清舟 发表于 2022-9-4 10:42

国色 - 天弦唱片

本帖最后由 绿叶清舟 于 2022-9-4 11:38 编辑 <br /><br /><style>
#papa { left: -250px; width: 1100px; height: 700px; background: gray url('https://pic.imgdb.cn/item/63140e5b16f2c2beb1cdbab0.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#box{ position: absolute;
    width: 485px;
    height: 367px;
    box-sizing: border-box;
    border: 0px solid #db1820;
    left: 50%;
    top: 50%;
    top: 240px;
    left: 130px;
}
#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: 12px; height: 12px; border-radius: 50%; background: #db1820; 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;position: absolute; top: 31px;left: 43px;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=400 height=300 src="https://music.163.com/outchain/player?type=1&id=130769785&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-4 11:18

播放器外的小珠滚动，欣赏学习！{:4_187:}

醉美水芙蓉 发表于 2022-9-4 11:41

绿叶清舟 发表于 2022-9-4 11:54

梦缘 发表于 2022-9-4 11:18
播放器外的小珠滚动，欣赏学习！

谢谢梦缘，周末快乐

绿叶清舟 发表于 2022-9-4 11:55

醉美水芙蓉 发表于 2022-9-4 11:41
清舟美女好厉害！做得漂亮！

芙蓉周末好，只是套用的了

小辣椒 发表于 2022-9-4 11:59

清舟这个小珠子运用非常漂亮，你这音乐不晓得为什么我总听不到

红影 发表于 2022-9-4 14:02

清舟的那个红色方框设计得好巧妙，那些小珠珠正好依次在其中滚动。这个位置要算得很准的，真不容易{:4_199:}

小辣椒 发表于 2022-9-4 15:54

现在听到了，清舟套一个你这个代码，感觉特别好看{:4_170:}

绿叶清舟 发表于 2022-9-4 19:50

小辣椒 发表于 2022-9-4 15:54
现在听到了，清舟套一个你这个代码，感觉特别好看

好象网易问题，搬专辑总这样时有时无的。发出来了就是大家的了{:4_189:}

绿叶清舟 发表于 2022-9-4 19:51

红影 发表于 2022-9-4 14:02
清舟的那个红色方框设计得好巧妙，那些小珠珠正好依次在其中滚动。这个位置要算得很准的，真不容易{:4_199: ...

还好，做图时留意一下框的尺寸，算位置时就很方便了

红影 发表于 2022-9-4 22:47

绿叶清舟 发表于 2022-9-4 19:51
还好，做图时留意一下框的尺寸，算位置时就很方便了

嗯嗯，这也是个不错的办法{:4_204:}

马黑黑 发表于 2022-9-4 23:24

这个设计得分。歌好听。

绿叶清舟 发表于 2022-9-5 20:32

马黑黑 发表于 2022-9-4 23:24
这个设计得分。歌好听。

就是这样一来只有一种颜色的了，换成彩球，改颜色好象没啥作用的

绿叶清舟 发表于 2022-9-5 20:33

红影 发表于 2022-9-4 22:47
嗯嗯，这也是个不错的办法

懒人办法了{:4_189:}

大猫咪 发表于 2022-9-5 20:37

清舟推荐的音乐真棒！今晚可以舒舒服服的享受了{:4_173:}晚上好！{:4_204:}{:4_179:}

绿叶清舟 发表于 2022-9-5 20:50

大猫咪 发表于 2022-9-5 20:37
清舟推荐的音乐真棒！今晚可以舒舒服服的享受了    晚上好！

猫来了啊，晚上好

大猫咪 发表于 2022-9-5 20:51

绿叶清舟 发表于 2022-9-5 20:50
猫来了啊，晚上好

来了清舟，上来试试新电脑   {:4_173:}

绿叶清舟 发表于 2022-9-5 20:52

大猫咪 发表于 2022-9-5 20:51
来了清舟，上来试试新电脑

还没到家啊

大猫咪 发表于 2022-9-5 20:58

绿叶清舟 发表于 2022-9-5 20:52
还没到家啊

在装电脑，一条线{:4_173:}

绿叶清舟 发表于 2022-9-5 21:06

大猫咪 发表于 2022-9-5 20:58
在装电脑，一条线

用的一体机吗

查看完整版本: 国色 - 天弦唱片