论坛 › 音乐沙龙 › 锁（学习亚伦老师代码）

朵拉 发表于 2026-2-4 17:28

锁（学习亚伦老师代码）

<div><table><tr><td><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://cccimg.com/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></td></tr></table>

<div class="modact"><a href="forum.php?mod=misc&amp;action=viewthreadmod&amp;tid=81588" title="帖子模式" onclick="showWindow('viewthreadmod', this.href)"></a></div>
</div>
<div id="comment_2256623" class="cm">
</div>

朵拉 发表于 2026-2-4 17:30

@亚伦影音工作室
学习亚伦老师代码，请老师多指点{:4_190:}

朵拉 发表于 2026-2-4 17:32

请论坛各位老师多指点~{:4_190:}

也曾年轻 发表于 2026-2-4 19:12

https://pic.rmb.bdstatic.com/bjh/250402/dump/a158ae667cb43529c324f9a4053e9a50.gif

查看完整版本: 锁（学习亚伦老师代码）