首页 › 音画作品 › 锁

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

锁

本帖最后由 朵拉 于 2026-3-23 22:41 编辑 <br /><br /><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>

liumang 发表于 2026-3-23 23:33

朵拉好，没有听到音乐的

liumang 发表于 2026-3-23 23:34

不是自动播放？

liumang 发表于 2026-3-23 23:35

@小辣椒 有空进来看看

liumang 发表于 2026-3-23 23:44

小辣椒手机看了说制作很漂亮，我在单位可能网速慢

感谢朵拉的漂亮制作

小辣椒 发表于 2026-3-24 22:23

liumang 发表于 2026-3-23 23:35
@小辣椒 有空进来看看

流~~辛苦，坚守岗位{:5_149:}

小辣椒 发表于 2026-3-24 22:23

欣赏多拉精彩的制作

{:5_150:}{:5_150:}

查看完整版本: 锁