论坛 › 欢乐水吧 › 刘珂矣-国风音乐联盟

三月的阳光 发表于 2023-6-27 15:08

刘珂矣-国风音乐联盟

本帖最后由 三月的阳光 于 2023-6-27 17:39 编辑 <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>https://img.wyc520.com.cn/data/attachment/forum/202306/27/154350e18btvlyv19kt8ra.png
        <p><br>刘珂矣，中国最美禅意歌者，她把禅意融入音乐中，名字已够古典特别，似乎正对应她歌词的典雅和声线的特别。</p>
        <p>她的歌声醇雅，好似香茶。每一首歌曲都典雅唯美，每一篇歌词都颇具意蕴。</p>
        <p>与一般的古风歌手不同，她的每首歌声里不仅有诗情画意，还有娓娓的禅意。</p>
        <p>她的歌曲也被听众称为“中国最美禅音”，她创立的“禅意中国风”成为近年来音乐界最为别致的标签。</p>
        <p>相貌气质素雅清秀的刘珂矣，很有传统淑女风范，声音温婉细腻，又极其低柔沉稳。</p>
        <p>每首歌的情感发抒都非常克制，真是哀而不伤，一开口就让人的心安静了下来，温柔了起来。</p>
        <div id="mlist"></div>
        <div id="mplayer"></div>
        <p style="text-align: right">资源来自网络 2023年6月27日</p>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1498555234" autoplay="autoplay"></audio>

<script>
(function () {
        let spans = [];
        let ypAr = [['1498555234','花开不惑'],['1875909191','流星白羽'],['1911856994','弦丝万缕 ']];
        ypAr.forEach((item) => item = 'https://music.163.com/song/media/outer/url?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 15:09

学习黑黑老师《巫娜-茶道》之作~~{:4_190:}{:4_187:}

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

三月的阳光 发表于 2023-6-27 17:37

醉美水芙蓉 发表于 2023-6-27 17:07
阳光老师速度好快啊！漂亮！

芙蓉也很快做帖了，阳光已经落后了~~{:4_171:}

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

阳光哥哥学得好快啊，这么多好听的歌儿，真棒{:4_199:}

小文 发表于 2023-6-27 19:54

好美，文美人美制作美！

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

阳光好制作，果然一看就会，厉害的{:4_199:}

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

我都好久没有做作业了，慢慢来了。。。

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

欢迎阳光一起玩黑黑的代码播放器。{:4_187:}

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

红影 发表于 2023-6-27 19:15
阳光哥哥学得好快啊，这么多好听的歌儿，真棒

发现网易里刘珂矣有效的歌曲现在已经不多了~~

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

小文 发表于 2023-6-27 19:54
好美，文美人美制作美！

都不如小文更美~~{:4_187:}

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

小辣椒 发表于 2023-6-27 22:26
阳光好制作，果然一看就会，厉害的

师傅，夸奖了~~{:4_172:}

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

小辣椒 发表于 2023-6-27 22:26
我都好久没有做作业了，慢慢来了。。。

哈哈，徒儿替师傅把作业交了就是了~~{:4_173:}

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

小辣椒 发表于 2023-6-27 22:27
欢迎阳光一起玩黑黑的代码播放器。

谢谢师傅，一起学习黑黑老师播放器~~{:4_173:}

梦缘 发表于 2023-6-28 21:56

问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_187:}

小辣椒 发表于 2023-6-28 22:09

三月的阳光 发表于 2023-6-28 14:40
师傅，夸奖了~~

不是夸奖是你有真本实力{:4_199:}

红影 发表于 2023-6-28 22:54

三月的阳光 发表于 2023-6-28 14:38
发现网易里刘珂矣有效的歌曲现在已经不多了~~

她的歌实际上非常好看。歌词好，唱得也好{:4_204:}

查看完整版本: 刘珂矣-国风音乐联盟