醉美水芙蓉 发表于 2026-2-5 22:02:23

你是一束光落进我心房

<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://www.joy127.com/url/143679.mp3" loop autoplay></audio>
<div id="wrapper"></div>
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608cac40d5011.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 = `
你是一束光落进我心房
词曲：梦笙先生
编曲：Fulsun
演唱：山风灵玉儿
（女）
LRC编辑：醉美水芙蓉
曾踏过苍茫寂寥的荒原
曾熬过彻夜难眠的时光
心事打包塞进行囊
脚步匆匆不敢有彷徨
以为余生只配独闯
以为温柔都是虚妄
（男）
穿过了人潮拥挤的街巷
躲过了骤雨疾风的慌张
眼底沉灰凝成霜
（女）
从未奢望有人来照亮
（合）
直到那日你立于晨光
笑意盈盈撞进我胸膛
（合）
你是一束光落进我心房
驱散了迷雾融化了冰霜
（女）
从此不必再流浪
（男）
不必把孤独熬成汤
（合）
你是一束光落进我心房
温暖了岁月温柔了时光
（女）
漂泊终于有归港
（男）
从此风雨亦安详
（女）
原来所有颠沛流离的闯荡
都为等这束温柔的光
（男）
原来所有小心翼翼的躲藏
（女）
都在等一句别来无恙
（合）
你是一束光落进我心房
驱散了迷雾融化了冰霜
从此不必再流浪
（男）
不必把孤独熬成汤
（合）
你是一束光落进我心房
温暖了岁月温柔了时光
（女）
漂泊终于有归港
（男）
从此风雨亦安详
（女）
你是我的光
（合）
是我余生稳稳的向往
-- 谢谢欣赏 --


`;
        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>

xicangzhiye 发表于 2026-2-9 05:23:35

很不错的哦，支持，加油

月明工作室 发表于 2026-2-9 09:49:20

欣赏芙蓉老师佳作，风格独具一格！

醉美水芙蓉 发表于 2026-2-9 11:50:03

月明工作室 发表于 2026-2-9 09:49
欣赏芙蓉老师佳作，风格独具一格！

谢谢老师支持！

klxf 发表于 2026-2-9 12:48:10

漂亮~谢谢醉美管理员精彩分享

kexueyanjiu 发表于 2026-2-11 07:32:43

支持分享，文章十分出彩

MichaelCok 发表于 7 天前

赞，顶帖真的超有魅力呀

纳兰叶 发表于 5 天前

支持博主，内容超吸引人
页: [1]
查看完整版本: 你是一束光落进我心房