论坛 › 音乐沙龙 › 《人生的下半场》 - 郭玲（试帖黑黑老师代码）

亦是金 发表于 2026-2-2 20:27

《人生的下半场》 - 郭玲（试帖黑黑老师代码）

<meta charset="utf-8">
<style>
#pa{
        position:relative;
        margin:30px 0;
        left:calc(50% - 81px);
        transform:translateX(-50%);
        width:clamp(600px,90vw,1400px);
        min-height:80vh;
        aspect-ratio:16/7.5;
        border-radius:20px;
        border: thick double#88abfa;
        overflow:hidden;
        z-index:1;
        background: url('')no-repeat center/cover;
display:grid;
        place-items:center;
        user-drag: none;
        user-select: none;
        --state:running;
}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;bottom:10%;pointer-events:none;object-position:center;mix-blend-mode: normal;z-index:2;opacity: 1;transform: rotateY(180deg);}

.pTitle {
        width: 50%;
        height: 20%;
        line-height: 2em;
        color: transparent;
        font-family: STLiti, NSimSun, 'Microsoft YaHei';
        font-size: 46px;
        font-weight: 400;
        text-align: center;
        margin: auto;
        z-index: 5;
        position: absolute;
        left: -5%;
        top: 1.5%;
}
.sp { animation: flashTitle 12s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
.pTitle span:nth-child(8) { animation-delay: 3.5s; }
.pTitle span:nth-child(9) { animation-delay: 4.0s; }
.pTitle span:nth-child(10) { animation-delay: 4.5s; }
.pTitle span:nth-child(11) { animation-delay: 5.0s; }
.pTitle span:nth-child(12) { animation-delay: 5.5s; }
@keyframes flashTitle {
0%, 100% {
color: #034ffa;
text-shadow: 2px 2px 20px #ffffff, 2px 2px 30px #fc9503, 2px 2px 40px #fc9503, 2px 2px 50px #ffffff, 2px 2px 60px #fc9503, 2px 2px 70px #fc9503, 2px 2px 80px #ffffff;
}
50%, 90% {
color: transparent;
text-shadow: none; }
}
@keyframes flashing { 0% { filter: brightness(.8); } 100% { filter: brightness(1.2); } }
#wrapper{position:absolute; white-space: nowrap;padding:2%;font:bold 2.6em/1.2 STXihei;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);bottom:10%;z-index:10;}
.char{display:inline-block;padding:0 4px;opacity:0;transform:translate(var(--x),var(--y));animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:translate(0,0);opacity:1;}}
@keyframes flash {to { filter: hue-rotate(360deg); }}
#mplayer{position:absolute;text-align:center;top:92%;transform:translate(-50%);left:50%;z-index:60;color:Azure;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px;accent-color:darkgreen;outline:none;cursor:pointer;}
#play{position:absolute;width:120px;height:120px;left:-35%;top:85%;cursor:pointer;animation:rotating 6s infinite linear var(--state);margin:-90px 0px;border-radius:50px;}
#play:hover{filter: grayscale(30%) sepia(90%) contrast(320%);transition: filter 0.5s ease; }
@keyframes rotating{
        0%{transform:rotate(0deg);}

        100%{transform:rotate(360deg);}
}
#fullscreen{position:absolute;top:30px;right:30px;font:1.5em 楷体;color:Azure;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
@keyframes opa{to{opacity:0;}}
</style>



<div id="pa">

<div style="position:absolute;width: 500px;height: 50px;bottom:20px;right: -280px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

<div id="mplayer" data-tt="00:00 00:00">

<svg id="play" width="120" height="120" viewBox="0 0 450 450"><title>播放/暂停</title></svg>

<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" /></div>


<span id="fullscreen">全屏欣赏</span>
<div class="pTitle">
      <span class="sp"></span>
      <span class="sp">《</span>
      <span class="sp">人</span>
      <span class="sp">生</span>
      <span class="sp">的</span>
      <span class="sp">下</span>
      <span class="sp">半</span>
      <span class="sp">场</span>
      <span class="sp">》</span>
      <span class="sp">～</span>
      <span class="sp">郭</span>
      <span class="sp">玲</span>
      
    </div>
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=2707619235" loop autoplay></audio>
<div id="wrapper"></div>
<video class="vid" src="https://video.699pic.com/videos/13/14/53/a_l2rha3bt2izru28f16861314535527_10s.mp4" autoplay loop muted></video>
</div>


<script>
   const pa = document.getElementById('pa');
            const audio = document.getElementById('audio');
            const wrapper = document.getElementById('wrapper');
            const mplayer = document.getElementById('mplayer');            
            const mprog = document.getElementById('mprog');
            const play = document.getElementById('play');
            const fullscreen = document.getElementById('fullscreen');                     
        const gc = `
《人生的下半场》 - 郭玲
作词 : 陈红卫
作曲 : 何鹏
演唱：郭玲
歌词编辑：亦是金
。。。。。。
看着镜中沧桑的脸庞
不由地感慨飞逝的时光
总是起早贪黑不停奔忙
早已改变了当初的模样
揉着自己酸痛的肩膀
是时候卸下沉重的行囊
也曾年少轻狂豪情万丈
如今却只能记忆中怀想
来到这人生的下半场
我们要拼的主要是健康
只要能吃能喝身体倍儿棒
其他的又何必放在心上
来到这人生的下半场
我们关注的不再是梦想
曾经心心念念的诗与远方
都不如自在地晒晒太阳
。。。。。。
揉着自己酸痛的肩膀
是时候卸下沉重的行囊
也曾年少轻狂豪情万丈
如今却只能记忆中怀想
来到这人生的下半场
我们要拼的主要是健康
只要能吃能喝身体倍儿棒
其他的又何必放在心上
来到这人生的下半场
我们关注的不再是梦想
曾经心心念念的诗与远方
都不如自在地晒晒太阳

-- 谢谢欣赏 --


`;
        const gcAr = lrc2HC(gc);
        let curkey = 0, isSeeking = false;
        audio.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(audio.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
        };
        audio.onended = () => {
                curkey = 0;
                audio.play();
        }
        audio.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 ? 400 : -400);
                        const y = Math.random() * (Math.random() > 0.5 ? 150 : -150);
                        span.style.cssText += `
                                color: hsl(${Math.floor(Math.random() * 360)}, 100%, 50%);
                                --x: ${x}px;
                                --y: ${y}px;
                                --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
        }             
const vids = document.querySelectorAll(', .vid');
var mState = () => {
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? vid.pause() : vid.play());
};
   audio.oncanplay = audio.onplaying = audio.onpause = () => mState();   
var mseek = false;
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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () =>audio.currentTime = mprog.value / mprog.max * audio.duration;
let fs = true;let fsTimer;
      fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
      pa.addEventListener('mousemove', () => {
            clearTimeout(fsTimer);
            fullscreen.style.opacity = '1';
            fsTimer = setTimeout(() => {
                fullscreen.style.opacity = '0';
            }, 3000);
      });
   document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';});   
        play.onclick = () => {
        audio.paused ? audio.play() : audio.pause();
        pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');};               
</script>

<script type="module">
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(play);
        var d = 'm214.49882,138.43732c-43.49714,0 -78.72482,35.11104 -78.72482,78.46415c0,43.32322 35.22768,78.45419 78.72482,78.45419c43.45714,0 78.70482,-35.13097 78.70482,-78.45419c0.01,-43.35311 -35.22768,-78.46415 -78.70482,-78.46415zm0,136.99584c-32.43787,-0.07973 -58.65614,-26.21119 -58.73614,-58.52172c0.07,-32.32049 26.29827,-58.46192 58.73614,-58.54165c32.41787,0.07973 58.63614,26.22116 58.70614,58.54165c-0.07,32.31053 -26.28827,58.44199 -58.70614,58.52172zm0,-142.24805c5.52964,0 9.99934,-4.46487 9.99934,-9.9762l0,-48.3462c-0.02,-5.51133 -4.47971,-9.96623 -9.99934,-9.96623c-5.52964,0 -10.00934,4.47484 -9.99934,9.98617l0,48.33623c0,5.49139 4.46971,9.96623 9.99934,9.96623zm32.12789,6.35846c1.24992,0.52821 2.54983,0.75743 3.81975,0.7674c3.93974,0 7.6495,-2.32213 9.24939,-6.15913l18.55878,-44.67862c2.09986,-5.09275 -0.30998,-10.91303 -5.40964,-13.0159c-5.10966,-2.10288 -10.95928,0.30895 -13.07914,5.39173l-18.54878,44.68859c-2.10986,5.08278 0.30998,10.91303 5.40964,13.00593zm27.24821,18.14851c1.94987,1.93345 4.5097,2.92011 7.06954,2.92011s5.11966,-0.97669 7.06954,-2.92011l34.29774,-34.21408c3.90974,-3.88683 3.89974,-10.19546 0,-14.10222c-3.91974,-3.88683 -10.24933,-3.88683 -14.14907,0.01993l-34.28775,34.19415c-3.90974,3.8968 -3.90974,10.20542 0,14.10222zm18.2288,27.14802c1.5799,3.837 5.30965,6.14917 9.22939,6.14917c1.26992,0 2.56983,-0.24916 3.82975,-0.77737l44.79705,-18.5073c5.10966,-2.10288 7.5295,-7.94309 5.40964,-13.02587s-7.95948,-7.49461 -13.06914,-5.38177l-44.80705,18.5073c-5.09966,2.11284 -7.50951,7.95305 -5.38965,13.03583zm64.88573,22.03534l-48.50681,0.00997c-5.51964,0 -9.99934,4.46487 -9.97934,9.9762c0,5.51133 4.46971,9.95627 9.97934,9.95627l48.51681,-0.01993c5.52964,0 9.98934,-4.47484 9.98934,-9.96623c0,-5.51133 -4.47971,-9.9762 -9.99934,-9.95627zm-6.97954,55.09334l-44.81705,-18.4774c-5.11966,-2.11284 -10.96928,0.29899 -13.06914,5.39173c-2.10986,5.09275 0.30998,10.92299 5.40964,13.03583l44.81705,18.4774c1.25992,0.50828 2.55983,0.74747 3.82975,0.74747c3.92974,0 7.6495,-2.31217 9.24939,-6.14917c2.09986,-5.09275 -0.32998,-10.93296 -5.41964,-13.02587zm-61.93593,14.08229c-3.90974,-3.8968 -10.22933,-3.8968 -14.13907,0.00997c-3.90974,3.88683 -3.89974,10.18549 0,14.08229l34.33774,34.17421c1.94987,1.94342 4.4997,2.92011 7.05954,2.92011s5.12966,-0.97669 7.07953,-2.92011c3.90974,-3.90676 3.88974,-10.21539 0,-14.10222l-34.33774,-34.16425zm-28.30814,23.55021c-2.10986,-5.09275 -7.95948,-7.49461 -13.06914,-5.39173c-5.09966,2.11284 -7.51951,7.94309 -5.39964,13.03583l18.59878,44.64872c1.5899,3.837 5.30965,6.14917 9.24939,6.14917c1.27992,0 2.57983,-0.23919 3.82975,-0.75743c5.10966,-2.10288 7.51951,-7.94309 5.39964,-13.0458l-18.60878,-44.63876zm-45.16703,1.02652c-5.52964,0 -9.99934,4.46487 -9.99934,9.96623l0.04,48.3462c0,5.51133 4.4897,9.95627 9.99934,9.95627c5.52964,0 9.99934,-4.46487 9.97934,-9.96623l-0.03,-48.35616c0,-5.48143 -4.4897,-9.95627 -9.98934,-9.9463zm-32.15789,-6.33852c-5.09966,-2.09291 -10.93928,0.30895 -13.05914,5.41166l-18.51878,44.67862c-2.09986,5.09275 0.32998,10.92299 5.42964,13.02587c1.24992,0.51824 2.53983,0.75743 3.81975,0.75743c3.91974,0 7.6495,-2.3321 9.23939,-6.1691l18.52878,-44.69856c2.10986,-5.08278 -0.32998,-10.90306 -5.43964,-13.00593zm-27.25821,-18.10865c-3.91974,-3.8968 -10.24933,-3.87686 -14.14907,0.01993l-34.25775,34.21408c-3.90974,3.90676 -3.88974,10.19546 0.02,14.10222c1.94987,1.93345 4.4997,2.91014 7.05954,2.91014c2.56983,0 5.12966,-0.97669 7.07953,-2.92011l34.26775,-34.22404c3.88974,-3.8968 3.88974,-10.20542 -0.02,-14.10222zm-18.2388,-27.11812c-2.12986,-5.07281 -7.96948,-7.48464 -13.06914,-5.38177l-44.78705,18.54716c-5.10966,2.11284 -7.51951,7.95305 -5.39964,13.03583c1.59989,3.837 5.30965,6.1392 9.23939,6.1392c1.26992,0 2.57983,-0.23919 3.82975,-0.75743l44.78705,-18.54716c5.08967,-2.13277 7.50951,-7.96302 5.39964,-13.03583zm-6.45958,-32.01154c0,-5.51133 -4.46971,-9.95627 -9.99934,-9.95627l-48.50681,0.0598c-5.52964,0 -10.00934,4.46487 -9.98934,9.9762c0.01,5.49139 4.4897,9.96623 9.99934,9.9463l48.51681,-0.0598c5.51964,0 9.99934,-4.4848 9.97934,-9.96623zm-51.55661,-45.07727l44.84705,18.43753c1.24992,0.52821 2.53983,0.75743 3.80975,0.75743c3.92974,0 7.6595,-2.31217 9.24939,-6.15913c2.11986,-5.09275 -0.31998,-10.93296 -5.43964,-13.0159l-44.82705,-18.43753c-5.10966,-2.09291 -10.94928,0.31892 -13.05914,5.4017c-2.11986,5.09275 0.32998,10.90306 5.41964,13.0159zm61.92593,-14.13212c1.94987,1.92348 4.4897,2.90017 7.04954,2.90017s5.12966,-0.97669 7.08953,-2.94004c3.90974,-3.87686 3.88974,-10.19546 -0.04,-14.09225l-34.33774,-34.12438c-3.89974,-3.88683 -10.24933,-3.8669 -14.13907,0.0299c-3.90974,3.88683 -3.88974,10.20542 0.02,14.09225l34.35774,34.13435zm28.26814,-23.59007c1.59989,3.82703 5.31965,6.12923 9.22939,6.12923c1.27992,0 2.57983,-0.24916 3.83975,-0.7674c5.09966,-2.11284 7.5295,-7.95305 5.39964,-13.02587l-18.63877,-44.63876c-2.11986,-5.08278 -7.97948,-7.48464 -13.07914,-5.3718c-5.09966,2.12281 -7.50951,7.96302 -5.38965,13.03583l18.63877,44.63876z';
      dr.path(d,'#fb54e1','#5171fa',0).set('fill-rule', 'evenodd');
      dr.circle(300, 300, 0, 'none', '#ff0000', 0)       
      dr.circle(300, 300, 0, 'none', 'Magenta', 0);       
</script>
</body>
</html>

小辣椒 发表于 2026-2-2 21:27

沙发欣赏前辈的精彩制作{:4_187:}

小辣椒 发表于 2026-2-2 21:31

前辈老师每个制作都非常的耐看，制作精致，黑黑老师的代码等老师来看了

霜染枫丹 发表于 2026-2-2 21:43

亦是金老师的作品我记得只要打开都是一定要看完，不会看几秒就觉得乏味退出来了。感谢您的分享，祝制作愉快！！{:4_204:}{:4_190:}

查看完整版本: 《人生的下半场》 - 郭玲（试帖黑黑老师代码）