朵拉 发表于 2026-3-23 22:39:19

【音乐播放器】锁 赠：圊圊淥詶老师

<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/69815dfb2f70276239a98bd2.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/6980a109a030e93d66a0c2b3.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://upfile.mp3.wf/view.php/0e7af18908431c738d95c85f15f98a09.mp3" 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 = `
词：帘子/此木
曲：郭有柴
制作：朵 拉
我就当我的爱 是罪
是东流水
美梦摇摇欲坠
一去不回
你教我读懂了那喜与悲
徒留这爱恨的 余味
不知进退
又有谁
和我举杯
不醉不回
举一杯
敬我的无畏
又几载年岁
头也不回
情一字 谁又能 不欠不亏
珠玉碎 痴人拈花醉
这一杯 为你 我舍命奉陪
结局
是 劳燕分飞
或 各分南北
我不猜 不追 也不惭愧
相思被锁在轮回
你的 我的 情债累累
半世悲
等你说问心有愧
我就当我的爱 是罪
是东流水
美梦摇摇欲坠
一去不回
你教我读懂了那喜与悲
徒留这爱恨的 余味
不知进退
又有谁
和我举杯
不醉不回
举一杯
敬我的无畏
又几载年岁
头也不回
情一字 谁又能 不欠不亏
珠玉碎 痴人拈花醉
这一杯 为你 我舍命奉陪
结局
是 劳燕分飞
或 各分南北
我不猜 不追 也不惭愧
相思被锁在轮回
你的 我的 情债累累
半世悲
等你说问心有愧
我就当我的爱 是罪
是东流水
美梦摇摇欲坠
一去不回
你教我读懂了那喜与悲
徒留这爱恨的 余味
不知进退
又有谁
和我举杯
不醉不回
我就当我的爱 是罪
是东流水
美梦摇摇欲坠
一去不回
你教我读懂了那喜与悲
徒留这爱恨的 余味
不知进退
又有谁
和我举杯
不醉不回
我就当我的爱 是罪
是东流水
美梦摇摇欲坠
一去不回
你教我读懂了那喜与悲
徒留这爱恨的 余味
不知进退
又有谁
和我举杯
不醉不回
`;
getAr(lrc);
</script>

朵拉 发表于 2026-3-23 22:45:33

最近学生学习制作了一款音乐播放器，赠予圊圊淥詶老师，
感谢老师裁制了好些漂亮衣服，祝您马年吉祥 万事顺意{:1_155:}{:1_153:}

朵拉 发表于 2026-3-23 22:46:21

@圊圊淥詶
圊圊淥詶老师 看过来呦~

欧阳风刀 发表于 2026-3-24 09:38:21

这款音乐播放器很是精彩，画面亦很唯美。赞一个。

欧阳风刀 发表于 2026-3-24 09:39:15

朵拉 发表于 2026-3-23 22:45
最近学生学习制作了一款音乐播放器，赠予圊圊淥詶老师，
感谢老师裁制了好些漂亮衣服，祝您马年吉祥 万事顺 ...

朵拉去收春装和春天小坠子。

欧阳风刀 发表于 2026-3-24 09:39:48

问好朵拉，制作辛苦。顺祝詶兄收礼愉快。

风樱落 发表于 2026-3-24 09:43:49

既是单图又是播放器，好帖欣赏学习

圊圊淥詶 发表于 2026-3-24 09:51:07

朵拉 发表于 2026-3-23 22:46
@圊圊淥詶
圊圊淥詶老师 看过来呦~

来了，谢谢朵拉~~{:1_155:}

圊圊淥詶 发表于 2026-3-24 09:54:11

制作的好看，
画面色调很合适，
配图人物的处理也细腻，
播放器漂亮的，
闪烁跳跃的光点，
增加了画面的氛围感，
蛐蛐也很好听~~

圊圊淥詶 发表于 2026-3-24 09:54:45

朵拉费心了，谢谢你的礼物，祝春日安好！{:1_155:}
页: [1] 2 3
查看完整版本: 【音乐播放器】锁 赠：圊圊淥詶老师