纯音乐

醉美水芙蓉 发表于 2023-6-27 21:18

本帖最后由醉美水芙蓉于 2023-6-27 21:18 编辑 <br /><br /><style>
#mydiv {
   margin: 30px auto;
   padding: 20px 10px;
   width: 700px;
   min-height: 400px;
   border-radius: 12px;
   border: 2px solid var(--fColor);
   color: var(--fColor);
   background: var(--bgMain);
   position: relative;
   --bgMain: linear-gradient(snow,silver,snow);
   --bgTitle: lightblue;
   --fColor: navy;
   --btnWidth: 50px;
   --state: paused;
}
#mydiv::before, #mydiv::after {
   position: absolute;
   padding: 0 20px;
   font: bold 24px / 36px sans-serif;
   text-shadow: 1px 1px 2px #111;
   border: inherit;
   border-radius: inherit;
   background: var(--bgTitle);
}

#mydiv::before {
   content: '纯音乐';
   left: 18px;
   top: -18px;
}
#mydiv::after {
   content: attr(data-tt);
   position: absolute;
   left: 50%;
   bottom: -14px;
   transform: translateX(-50%);
   font-size: 14px;
   line-height: 20px;
}
#mydiv p { padding: 8px 0; font-size: 16px; }
#mplayer {
   position: absolute;
   width: var(--btnWidth);
   height: var(--btnWidth);
   background: conic-gradient(var(--fColor),var(--bgTitle),var(--fColor),var(--bgTitle));
   border-radius: 50%;
   bottom: 20px;
   left: calc(50% - var(--btnWidth) / 2);
   cursor: pointer;
   pointer-events: auto;
   animation: rot 5s infinite linear var(--state);
}
#mlist { margin: 20px; column-count: 3; column-rule: 2px solid transparent; column-gap: 100px; column-fill: balance; }
#mlist > span { display: block; width: fit-content; }
#mlist a { text-decoration: none; }
#mlist > span > a:hover { cursor: pointer; color: red; }
.lighten > a { color: red; }
.normal > a { color: var(--fColor); }

@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv" data-tt="00:00/00:00">
   <p>Billy，电子舞曲制作人、编曲Remix；喜欢电子纯音乐，作品主要为实验电子、迷幻电子、R&B等元素。曾发表作品《沉默是金》、《旅途》、《渴望》、《不舍》、《彩色画》等。</p>
   <div id="mlist"></div>
   <div id="mplayer"></div>
   <p style="text-align: right">资源来自网络 2023年6月27日</p>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music279011358.mp3" autoplay="autoplay"></audio>

<script>
(function () {
   let spans = [];
   let ypAr = [['279011358','一生有你'],['/204540004','渔舟唱晚'],['226201565','清晨阳光'],['197989231','沉默是金'],['240402036','顺流逆流'],['227059005','光辉岁月'],['245098094','潮湿的心 '],['217699948','不舍'],['224353709',' 突然的自我 '],['216702063','光明 ']];
   ypAr.forEach((item) => item = 'https://mp3.t57.cn:7087/kwlink_d.php?id=' + item);
   ypAr.forEach((item, key) => {let sp = document.createElement('span');sp.className = 'normal';sp.innerHTML = `${key+1} <a onclick="javascript:mplay(${key})">${ypAr}</a>`;mlist.appendChild(sp);spans.push(sp);});
   let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
   mplay = (idx, flag = 0) => {aud.src = ypAr;if (flag >= 0) aud.play();spans.className = 'normal';spans.className = 'lighten';lastIdx = idx;}
   let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('ended', () => mplay(Math.floor(Math.random() * ypAr.length)));
   aud.addEventListener('timeupdate', () => mydiv.dataset.tt = toMin(aud.currentTime) + ' / ' + toMin(aud.duration));
   mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
   let lastIdx = Math.floor(Math.random() * ypAr.length);
   mplay(lastIdx);
})();
</script>

红影发表于 2023-6-27 21:50

好听的乐曲。水芙蓉美女也学得很快呢，很赞{:4_199:}

小文发表于 2023-6-27 21:52

很赞{:4_199:}{:4_199:}

醉美水芙蓉 发表于 2023-6-27 21:57

红影发表于 2023-6-27 21:50
好听的乐曲。水芙蓉美女也学得很快呢，很赞

我想放一张图片怎么也放不好？

醉美水芙蓉 发表于 2023-6-27 21:57

小文发表于 2023-6-27 21:52
很赞

谢谢朋友支持！

小辣椒 发表于 2023-6-27 22:11

刚去看了黑黑分享的几个，这里水芙蓉出来了，赞一记{:4_199:}

东篱闲人 发表于 2023-6-27 22:15

好听，美美听一会。。。。{:4_174:}

马黑黑 发表于 2023-6-27 22:15

醉美水芙蓉发表于 2023-6-27 21:57
我想放一张图片怎么也放不好？

放图片，用 <img src="地址" alt="" />，和 <p>...</p> 标签混在一起便好。注意图片的尺寸，一般要限制一下，比如：

<img src="地址" alt="" style="width: 600px;" />

如果需要图片水平居中，可以考虑用 <p style=“text-align: center"><img ..... /></p> 这样的方法。

红影发表于 2023-6-27 22:15

醉美水芙蓉发表于 2023-6-27 21:57
我想放一张图片怎么也放不好？

应该可以放得进去的吧，三月的阳光的帖子里就放了一张啊。

醉美水芙蓉 发表于 2023-6-27 22:27

小辣椒发表于 2023-6-27 22:11
刚去看了黑黑分享的几个，这里水芙蓉出来了，赞一记

谢谢小辣椒支持！

醉美水芙蓉 发表于 2023-6-27 22:28

东篱闲人发表于 2023-6-27 22:15
好听，美美听一会。。。。

东篱老师喜欢就好！

醉美水芙蓉 发表于 2023-6-27 22:31

马黑黑发表于 2023-6-27 22:15
放图片，用，和 ... 标签混在一起便好。注意图片的尺寸，一般要限制一下，比如：

谢谢黑黑老师，这个文本放图片还是比较陌生的，不太会！

东篱闲人 发表于 2023-6-27 22:40

醉美水芙蓉发表于 2023-6-27 22:28
东篱老师喜欢就好！

喜欢！{:4_204:}

愤怒的葡萄 发表于 2023-6-28 07:43

非常好听的纯音乐，过来支持一下。

岩新新 发表于 2023-6-28 09:58

欣赏精彩制作！

醉美水芙蓉 发表于 2023-6-28 11:44

愤怒的葡萄发表于 2023-6-28 07:43
非常好听的纯音乐，过来支持一下。

谢谢朋友支持！

醉美水芙蓉 发表于 2023-6-28 11:44

岩新新发表于 2023-6-28 09:58
欣赏精彩制作！

谢谢岩新老师支持！

马黑黑 发表于 2023-6-28 12:22

醉美水芙蓉发表于 2023-6-27 22:31
谢谢黑黑老师，这个文本放图片还是比较陌生的，不太会！

图片标签 <img ... />，段落标签 <p>...</p>，是HTML代码最基本的

三月的阳光 发表于 2023-6-28 14:33

水芙蓉美女学的也很快哈~~{:4_187:}

三月的阳光 发表于 2023-6-28 14:34

愤怒的葡萄发表于 2023-6-28 07:43
非常好听的纯音乐，过来支持一下。

终于看到葡萄了~~{:4_176:}

页: [1] 2

花潮论坛's Archiver

纯音乐