屿风 发表于 4 天前

【Something New】- Faul 谁是你今夜的猎物

<style>
:root{
    --bg-color:#A9DF8459;
    --progress-color:#A9DF84;
}
.music-card{max-width:420px;margin:10px auto;background:var(--bg-color);backdrop-filter:blur(14px);border-radius:34px;padding:24px;font-family:system-ui}
.music-cover{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#eee;margin-bottom:18px}
.music-cover img{
    max-width:100%!important;
    max-height:100%!important;
    width:auto!important;
    height:auto!important;
    object-fit:cover!important;
    pointer-events:none !important; /* 屏蔽点击弹窗关键 */
}
.music-title-row{display:flex;justify-content:space-between;margin-bottom:6px}
.music-title{font-size:26px;margin:0}
.music-like{width:26px;height:26px;cursor:pointer}
.music-singer{font-size:18px;color:#444;margin:0 0 14px}
.music-lyric{font-size:15px;color:#666;margin:0 0 16px}
.music-time-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px}
.music-progress{width:100%;height:4px;background:#ffffff;border-radius:99px}
.music-progress-bar{height:100%;width:0;background:var(--progress-color);border-radius:99px}
.music-btn-row{display:flex;justify-content:space-between;align-items:center}
.music-btn-row img{width:26px;height:26px;cursor:pointer}
.music-play{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000012;cursor:pointer}
</style>
<div class="music-card">
    <div class="music-cover"></div>

    <div class="music-title-row">
      <h2 class="music-title">Something New</h2>
      <img class="music-like" id="likeBtn" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png">
    </div>
    <div class="music-singer">歌手：Faul</div>
    <div class="music-lyric">What is the purpose of tonight my baby<br>亲爱的 谁是你今夜的猎物</div>

    <div class="music-time-row">
      <span id="curTime">00:00</span>
      <span id="totalTime">02:56</span>
    </div>
    <div class="music-progress">
      <div class="music-progress-bar" id="progressBar"></div>
    </div>
<br>
    <div class="music-btn-row">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png">
      <div class="music-play" id="playBtn"><img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png"></div>
      <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png">
      <img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png">
    </div>

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=1 src="//music.163.com/outchain/player?type=2&id=33312060&auto=1&height=32"></iframe>
</div>
<script>
(function(){
    const c=document.getElementById('curTime'),b=document.getElementById('progressBar'),t=document.getElementById('totalTime');
    const playBtn=document.getElementById('playBtn'),playIcon=document.getElementById('playIcon');
    const likeBtn=document.getElementById('likeBtn');

    // 图标地址
    const playSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png";
    const pauseSrc="https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png";
    const likeOff="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png";
    const likeOn="https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png";

    let isPlay=true;
    let isLike=false;

    function s(x){let =x.split(':').map(Number);return m*60+n}
    function f(x){let m=String(Math.floor(x/60)).padStart(2,'0'),n=String(Math.floor(x%60)).padStart(2,'0');return m+':'+n}
    let total=s(t.innerText),now=0,timer=null;

    function run(){now+=0.1;if(now>=total){now=total;pausePlay()}c.innerText=f(now);b.style.width=now/total*100+'%'}
    function startTimer(){timer=setInterval(run,100)}
    function stopTimer(){clearInterval(timer);timer=null}

    function pausePlay(){
      isPlay=false;
      playIcon.src=playSrc;
      stopTimer();
    }
    function startPlay(){
      isPlay=true;
      playIcon.src=pauseSrc;
      startTimer();
    }

    // 播放暂停点击
    playBtn.onclick=()=>{
      isPlay ? pausePlay() : startPlay();
    }

    // 收藏切换
    likeBtn.onclick=()=>{
      isLike=!isLike;
      likeBtn.src=isLike ? likeOn : likeOff;
    }

    run();
    startTimer();
})();
</script>

朴宰基 发表于 4 天前

先 mark，免得之后找不到

迟以 发表于 4 天前

偶然刷到，意外收获宝藏资源

脑袋炸了 发表于 4 天前

音色很干净，喜欢

吴大花Amy 发表于 4 天前

前奏一出来瞬间就被吸引

囚心 发表于 4 天前

器乐悠扬婉转，意境格外美好

山丘 发表于 4 天前

这旋律太戳人了。

风月归海 发表于 4 天前

越往后听，后劲越是充足

乔时 发表于 4 天前

配乐质感绝了。

huang123321 发表于 4 天前

打开就被惊艳，没有失望。
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 【Something New】- Faul 谁是你今夜的猎物