论坛 › 欢乐水吧 › 《陪你千山万水(dj版)》樊少华&唐薇

亚伦影音工作室 发表于 2025-3-16 19:35

《陪你千山万水(dj版)》樊少华&唐薇

本帖最后由 亚伦影音工作室 于 2025-3-16 19:39 编辑 <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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b3eb0e5b039583e5f6f0d847f0875f88.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://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b3eb0e5b039583e5f6f0d847f0875f88.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://s2.ananas.chaoxing.com/sv-w9/audio/aa/86/1c/0b67d75bfbc0fd65f67e601491c458ef/audio.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 = `陪你千山万水 (DJ何鹏版) - 樊少华&唐薇
词：樊少华
曲：樊少华
（未经许可,不得翻唱或使用）
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
`;
getAr(lrc);
</script>

红影 发表于 2025-3-16 19:52

有趣，这些旋转的变色小棒，能形成如此奇妙的效果呢。
太赞了{:4_199:}

红影 发表于 2025-3-16 19:53

如此简单的代码能有如此效果，很奇妙。
欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2025-3-17 10:59

          这个代码音画好看，欣赏了！

查看完整版本: 《陪你千山万水(dj版)》樊少华&唐薇