醉美水芙蓉 发表于 2026-8-9 23:07:13

去自由的远方(雷鬼版)-沙哑大叔

<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

#papa {position: relative;display: grid;place-items: center;margin-left:0px;margin-top: 0px;width: 1260px;height: 720px;overflow: hidden;z-index: 10000;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";--state: running; left: 50%; transform: translateX(calc(-50% - 60px));}
      #intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:conic-gradient(red, yellow, green, cyan, blue, magenta, red);
background-size: cover;
opacity:1;
animation: hue-rotate 6s linear infinite var(--state);
}
@keyframes hue-rotate {
0%{
   filter: hue-rotate(-360deg);
}

100%{
   filter: hue-rotate(360deg);
}
}
#tu{position:absolute;z-index: 4;
      width: 100%;
      height: 100%;
      opacity: 0;filter:hue-rotate(0deg)contrast(180%)brightness(100%);
-webkit-mask-image: radial-gradient(black 25% ,transparent 85%);
animation:cover30s linear infinite var(--state);
         bottom: 0px;
left:0%;
}
@keyframes cover{0% {opacity: 0; transform: scale(1);}
        10% {opacity: 1;transform: scale(1);}
        22% {opacity: 1;transform: scale(1);}
        24% {opacity: 0; transform: scale(6);}
        }
#tu:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/93e9d13d052521ee499589b0d41eb118.jpg)no-repeat center/cover;
animation-delay: 24s;
}
#tu:nth-child(2) {background:url(https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc/live/252300602978130f5473b146b4df9195.jpg)no-repeat center/cover;
animation-delay: 18s;
}
#tu:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/cae88555702108b09c92047d1effba53.jpg)no-repeat center/cover;
animation-delay: 12s;
}
#tu:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/59f29c89795dd8a625e5159aab7ce9b4.jpg)no-repeat center/cover;
animation-delay: 6s;
}
#tu:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/c507faa88eeca0ad3cc9879e9718f060.jpg)no-repeat center/cover;
animation-delay: 0s;
}


#dt{position:absolute;z-index: 5;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      background:url(https://image.hnol.net/c/2026-08/07/19/202608071933034661-5769293.gif)no-repeat center/cover;
         bottom: 0px;
left:0%;
}
#bfq{position: absolute;
width: 250px;
height: 250px;top:55%; left:5%;z-index: 114;transform:scale(0.6);}
#cd{top:40px; left:0px;z-index: 5;
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png')no-repeat center/cover;
animation: spin 10s infinite linear var(--state);}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {z-index: 6;
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 250px;
        height: 250px;
opacity: 1;
        transition: 0.5s;
       
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before , #mplayer::after{
        position: absolute;
        content: '';
cursor: pointer;
        transition: 0.5s;
}
#mplayer::before {
        width: 250px;
        height: 250px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5104b9f345e8d03c1d60f.png)no-repeat center/cover;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 250px;
        height: 250px;opacity: 1;
        background:url(https://pic.imgdb.cn/item/65f5103d9f345e8d03c17eca.png)no-repeat center/cover;
        opacity: var(--disp2);
}

#tmsg {position: absolute;z-index: 2;
      font: normal 18px sans-serif;
      color: #ffffff;
         top:100%;
      left:24%;}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 215px; right: 42px; bottom: 3px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 68%, #000 68%, #000 0);cursor: #333; z-index: 6;}

#wrapper {
                position: absolute;
                padding: 0px;
                font-weight:100;font-size:3.4em;font-family:"Ma Shan Zheng","STKaiti","SimHei",   cursive, serif;
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0)hue-rotate(20deg)contrast(250%)brightness(120%);
white-space: pre;transform: translateX(0%);text-align: center;
      width:100%;height:10%;left: 0%;z-index: 20;
                top:80%;white-space: nowrap;
        }
        .char {
                display: inline-block;
                padding: 0px 4px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(-720deg) ;
                animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 50%);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }


#fullscreen { opacity:1;position: absolute; width: 20px; height: 20px;   bottom:26px; cursor: pointer;right:1%;z-index: 40;filter:invert(0%);}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 20px; height: 20px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 20px; height: 20px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div><div id="tu"></div></div>
<div id="intro"></div>
<div id="dt"></div>
<div id="bfq"><div id="tmsg">00:00 | 00:00</div>
<div id="cd" ></div>
<divid="prog"></div>
<div id="mplayer"></div>
</div>

<div id="wrapper"></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<audio id="aud"src="https://www.joy127.com/url/157224.mp3" loop autoplay ></audio>
</div>
<script>
(function(){
mplayer.onclick = () => aud.paused ?(aud.play(),mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'),dt.style.opacity = '1'):(aud.pause(),mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'),dt.style.opacity = '0' );
let mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
/*进度条 进度时间*/

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg,#009393,#009393,#009393 ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                });




let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/

(function() {
const gc = `去自由的远方(雷鬼版)-沙哑大叔
词:Manym
曲: 郭仔
LRC编辑：醉美水芙蓉
吹来一阵风啷儿哩个啷
管它有多浪也要闯一闯
乘着风晃呀晃掀起万重浪
去找回你曾说过的梦想
哼着这首歌吊儿又啷当
管它几道伤肆意去流浪
岁月它像一把刀斩不断倔强
去找回当初年少的模样
去自由的远方追热烈的骄阳
看一看天边万丈的光芒
翻过山踏过河策马走四方
马蹄声唤着我去流浪
去自由的远方追热烈的骄阳
望一望跨过风雨的晴朗
人来又人往岁月太匆忙
迎着风不回头走一场
吹来一阵风啷儿哩个啷
管它有多浪也要闯一闯
乘着风晃呀晃掀起万重浪
去找回你曾说过的梦想
哼着这首歌吊儿又啷当
管它几道伤肆意去流浪
岁月它像一把刀斩不断倔强
去找回当初年少的模样
去自由的远方追热烈的骄阳
看一看天边万丈的光芒
翻过山踏过河策马走四方
马蹄声唤着我去流浪
去自由的远方追热烈的骄阳
望一望跨过风雨的晴朗
人来又人往岁月太匆忙
迎着风不回头走一场
谢谢欣赏！
`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (audio.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 800 : -800);
                        const y = Math.random() * (Math.random() > 0.5 ? 0:0);
                        span.style.cssText += `
                              color: #${Math.random().toString(14).substring(8,2)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
      })();
      
      

</script>

llz123 发表于 6 天前

欣赏美芙蓉美贴，帖子有点偏右了，在#papa选择器中加上一段代码：left: 50%; transform: translateX(calc(-50% - 60px));   应该可以回到居中，60px可以视情况修改调整。
#papa {position: relative;display: grid;place-items: center;margin-left:0px;margin-top: 0px;width: 1260px;height: 720px;overflow: hidden;z-index: 10000;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";--state: running; left: 50%; transform: translateX(calc(-50% - 60px));}将这段代码替换第一段代码试试看。

醉美水芙蓉 发表于 6 天前

llz123 发表于 2026-8-18 19:06
欣赏美芙蓉美贴，帖子有点偏右了，在#papa选择器中加上一段代码：left: 50%; transform: translateX(calc(- ...

谢谢老师指导！
页: [1]
查看完整版本: 去自由的远方(雷鬼版)-沙哑大叔