朵拉 发表于 2026-4-8 21:04:16

【音乐播放器】归零

<style>
#papa {
        margin: 80px 0 0 calc(50% - 721px);
        width: 1280px;
        height: 680px;
        box-shadow: 4px 8px 28px gray;
        background:radial-gradient(circle,transparent, rgba(6,25,98)100%),url('https://pic1.imgdb.cn/item/69d3832180f163db14659975.jpg') no-repeat center/cover;
        overflow: hidden;
        z-index: 1;
        position: relative;
        --state: paused;
}
#player{cursor: pointer;
        margin: 80px 80px ;
        width: 160px;border-radius: 50%;box-shadow: 0px 0px 0px 2px #fff;
        height: 160px;position: absolute;background:url('https://pic1.imgdb.cn/item/69d6490dfe07599d0e221990.jpg') no-repeat center/cover;animation: rote 10s infinitelinear var(--state);}

@keyframes rote {
        from { transform: rotate(0deg)scale(1);}
        to { transform:rotate(360deg)scale(1);}
}

#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10 {
        position: absolute;
        left: 402px;
        top: 515px;
width: 35px;
        height: 3px;
        border-radius: 50%;
          background:#00ff00;
        box-shadow: 0px 0px 10px #ff0000;
       
        --time: .4s;
        animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: -100px; top: 0px; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 500px; top: 492px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 544px; top: 548px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 586px; top: 554px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 664px; top: 568px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 713px; top: 441px; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 816px; top: 554px; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 894px; top: 468px; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 943px; top: 521px; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 450px; top: 451px; filter: hue-rotate(20deg);}
#clone_player10 { --time: 0.4s; left: 300px; top: 480px; filter: hue-rotate(60deg); }
@keyframes rotating {
        from { transform: translate(0,0px) rotate(0deg)scale(1);}
        to { transform: translate(0px,-80px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}
#tz { top:60px;left:1100px;width: 100px; height: 600px; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 30px/80px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3364820395" autoplay loop></audio>
        <div id="player"></div>
   <div id="clone_player0"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
        <div id="clone_player3"></div>
        <div id="clone_player4"></div>
        <div id="clone_player5"></div>
        <div id="clone_player6"></div>
        <div id="clone_player7"></div>
        <div id="clone_player8"></div>
<div id="clone_player9"></div>
<div id="clone_player10"></div>
<div id="tz" data-lrc=""></div>
</div>
<script>

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
player.onclick =() => aud.paused ? aud.play() : aud.pause();
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};

aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `
归 零
词曲：郭嘉俊
演唱：郭嘉俊
制作：朵拉
后来习惯了安静
少了从前的热情
那些落空的约定
慢慢结冰
以为时间能抚平
心里斑驳的曾经
却更分明
情绪总无处躲避
想念又毫无预兆
越是刻意去忘掉
越会缠绕
那些短暂的美好
变成漫长的煎熬
甩不掉
最难释怀的是动过真心
最放不下的是爱过的姓名
就算一切都归零
我还困在旧场景
不肯抽离
最难过的是还抱有憧憬
最卑微的是还抱有侥幸
以为还能再靠近
最后只剩我自己
守着空影
情绪总无处躲避
想念又毫无预兆
越是刻意去忘掉
越会缠绕
那些短暂的美好
变成漫长的煎熬
甩不掉
最难释怀的是动过真心
最放不下的是爱过的姓名
就算一切都归零
我还困在旧场景
不肯抽离
最难过的是还抱有憧憬
最卑微的是还抱有侥幸
以为还能再靠近
最后只剩我自己
守着空影
最难释怀的是动过真心
最放不下的是爱过的姓名
就算从此无交集
你依然在我心底
从未远离
2026—04—08
`;
getAr(lrc);
</script>

欧阳风刀 发表于 2026-4-8 21:14:55

播放器漂亮，画面意境悠深。一首归零，很是动人。

欧阳风刀 发表于 2026-4-8 21:15:24

感谢朵拉精心制作分享！问好！

风樱落 发表于 2026-4-8 22:39:41

很漂亮欣赏分享

风樱落 发表于 2026-4-8 22:40:02

图图做的唯美。问好美女

风樱落 发表于 2026-4-8 22:40:56

蛐蛐也好听，精彩作品

南烛 发表于 2026-4-9 09:42:39

这个声音不错

南烛 发表于 2026-4-9 09:42:43

好听，制作漂亮

绿蔷薇 发表于 2026-4-9 11:14:18

深色背景制作的很有意境
播放器和同步歌词漂亮的说~~~

绿蔷薇 发表于 2026-4-9 11:15:24

归零不只是情感释怀
更是回到原点再出发的坚定心念
页: [1] 2
查看完整版本: 【音乐播放器】归零