绿叶清舟 发表于 2022-9-29 19:16

天禅 - 巫娜


<style>
#papa { left: -250px; width: 1100px; height: 700px; background: gray url('https://pic1.imgdb.cn/item/63355f1e16f2c2beb14d898f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#box{ position: absolute;
   
    width: 475px;
    height: 376px;
    box-sizing: content-box;
    border: 0px
    left: 50%;
    top: 50%;
    top: 213px;
    left: 301px;
}

.ball { position: absolute; left: -0px; top: 0px; width: 12px; height: 12px; border-radius: 50%; background: #749ab1; 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=310 src="https://music.163.com/outchain/player?type=1&id=30210&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-29 19:35

沙发我的{:4_174:}

小辣椒 发表于 2022-9-29 19:36

提示音乐加载出错{:4_201:}

小辣椒 发表于 2022-9-29 19:36

提示音乐加载出错{:4_201:}

小辣椒 发表于 2022-9-29 19:36

清舟这同色系的珠珠太漂亮了{:4_178:}

马黑黑 发表于 2022-9-29 20:08

淡雅的背景，与音乐列表区域融合，真功夫。好音乐，刷新三次资源可以连接。

醉美水芙蓉 发表于 2022-9-29 20:52

红影 发表于 2022-9-29 20:54

巫娜的音乐，真的非常好听。清舟的制作好美啊，色调淡雅，珠珠的设计也好棒{:4_199:}

绿叶清舟 发表于 2022-9-29 21:01

小辣椒 发表于 2022-9-29 19:36
提示音乐加载出错

网易的专辑老是这样的了

绿叶清舟 发表于 2022-9-29 21:03

马黑黑 发表于 2022-9-29 20:08
淡雅的背景，与音乐列表区域融合，真功夫。好音乐，刷新三次资源可以连接。

本来想那个框做成透明的放盒子里做背景图片，可是珠子就只沿着图片最外围走了

绿叶清舟 发表于 2022-9-29 21:04

红影 发表于 2022-9-29 20:54
巫娜的音乐，真的非常好听。清舟的制作好美啊，色调淡雅，珠珠的设计也好棒

是啊，这几天都在听她的了

绿叶清舟 发表于 2022-9-29 21:04

醉美水芙蓉 发表于 2022-9-29 20:52
清舟好厉害!珠子玩得溜！

谢谢芙蓉，一起来玩啊

马黑黑 发表于 2022-9-29 21:05

绿叶清舟 发表于 2022-9-29 21:03
本来想那个框做成透明的放盒子里做背景图片，可是珠子就只沿着图片最外围走了

还是现在这个样子好

绿叶清舟 发表于 2022-9-29 21:10

马黑黑 发表于 2022-9-29 21:05
还是现在这个样子好

位置放不好，只能把框拉进图片了

马黑黑 发表于 2022-9-29 21:44

绿叶清舟 发表于 2022-9-29 21:10
位置放不好，只能把框拉进图片了

手段是多的

红影 发表于 2022-9-30 10:34

绿叶清舟 发表于 2022-9-29 21:04
是啊，这几天都在听她的了

可以清心洗脑，让人恍若超脱凡俗，置身在仙境中一般。

绿叶清舟 发表于 2022-9-30 19:18

红影 发表于 2022-9-30 10:34
可以清心洗脑，让人恍若超脱凡俗，置身在仙境中一般。

是啊，可以让人静心的音乐

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

马黑黑 发表于 2022-9-29 21:44
手段是多的

方法 总比困难多的

红影 发表于 2022-9-30 20:31

绿叶清舟 发表于 2022-9-30 19:18
是啊，可以让人静心的音乐

我也一直很喜欢这个专辑{:4_187:}

绿叶清舟 发表于 2022-9-30 20:35

红影 发表于 2022-9-30 20:31
我也一直很喜欢这个专辑

我也是，再说现在素材难找，听着那些闹哄哄的音乐真的做不出贴来
页: [1] 2
查看完整版本: 天禅 - 巫娜