醉美水芙蓉 发表于 前天 19:45

【单幅音画】你从我世界路过

<style>
        #pa {
                margin: 20px -300px;
                width: 1300px ;
                height: 736px;
                border: 1px solid gray;
                display: grid;overflow: hidden;
                place-items: center;background: url(https://bbs.cnzv.cc/up/upload/pic/12/20251127-82ca90e09310eb09942dc05736f4aabc.jpg) no-repeat center/cover;
                position: relative;
        }
zxx-slide {display: block;
z-index: 1;
   width: 100%; height:105%;
    position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
    position: absolute;
   display: none;
}
.zxx-slide-a.in {
    z-index: 1;
}
.zxx-slide-img { position: absolute;
height:100%;width: 100%;
   display: block;}

.zxx-slide-index-x {
    position: absolute;
    left: 0px;bottom: 0px;
    text-align: center;
    font-size: 0;
    z-index: 1;
}

@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
    -webkit-mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: 60px 60px;
    mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 60px 60px;
    animation: seed 1s;
}

#player {position:absolute;top: 60%;z-index: 99;
            left: 70%;
width: 300px;
height: 300px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}

        #wrapper {z-index: 9;
                position: absolute;top: 50px;
                padding: 0px; left: 8%;
                ;font:normal 2.6em 华文隶书;
                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);
      writing-mode: vertical-lr;white-space: pre;
                width: 60px;
height: 90%;
        }
        .char {
                display: inline-block;
                padding: 2px 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards, flash 1s infinite alternate;
        }
       
        @keyframes fadeIn {
                to {
                        transform:scale(1);
                        opacity: 1;
                }
        }
        @keyframes flash {
                to { filter: hue-rotate(360deg)brightness(60%); }
        }
       
</style>

<div id="pa">
        <audio id="aud" src="https://www.lequxiang.com.cn/view.php/eafa47a6714bf1b2b09a9bdf43aeefb2.mp3" loop autoplay></audio>
<zxx-slide>
    <div class="zxx-slide-x">
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://bbs.cnzv.cc/up/upload/pic/12/20251207-73a2791a62e295e324f2bf41d9ecf782.jpg"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://bbs.cnzv.cc/up/upload/pic/12/20251127-82ca90e09310eb09942dc05736f4aabc.jpg"></p>
      <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://bbs.cnzv.cc/up/upload/pic/12/20251022-4063a22361467665c8aadbd5c7b3f9d4.jpg"></p>
      

    </div>
   </zxx-slide>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
        <div id="wrapper">你从我世界路过 - 丁钟泽</div>
</div>

<script>

        const gc = `你从我世界路过
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 (aud.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 ? -240 : 800);
                        const y = Math.random() * (Math.random() > 0.5 ? -250 : 250);
                        span.style.cssText += `
                                color: #${Math.random().toString(16).substring(2,8)};
                                --x: ${x}px;
                                --y: ${y}px;
                                --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
        }
</script>


<script>var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
        var timerSlide = null;
        var indexSlide = 0;
        container.addEventListener('mouseover', function () {
                clearTimeout(timerSlide);
        });
        container.addEventListener('mouseout', function () {
                clearTimeout(timerSlide);
                funSlide();
        });
       
        var eleSlides = [].slice.call(container.querySelectorAll('p'));
        var eleButtons = [].slice.call(container.querySelectorAll('button'));
       
       
        eleButtons.forEach(function (button, index) {
                ['mouseover', 'click'].forEach(function (eventType) {
                        button.addEventListener(eventType, function () {
                                clearTimeout(timerSlide);
                                indexSlide = index;
                                funSlide();
                        });
                });
        });

       
        eleSlides.forEach(function (slide, index) {
                slide.addEventListener('animationend', function () {
                        eleSlides.forEach(function (slide2) {
                                if (slide2.classList.contains('in') == false) {
                                        slide2.style.display = '';
                                }
                        });
                });
        });
       
        var funSlide = function() {
                eleSlides.forEach(function (slide, index) {if(!aud.paused){               
                        if (indexSlide == index) {
                                slide.classList.add('in');
                                slide.style.display = 'block';
                        } else if (slide.classList.contains('in')) {
                                slide.classList.remove('in');
                        }
                }});
                eleButtons.forEach(function (button, index) {
                        button.classList.remove('active');
                        if (indexSlide == index) {
                                button.classList.add('active');
                        }
                });
               
                timerSlide = setTimeout(function () {
                        indexSlide++;
                        if (indexSlide == eleSlides.length) {
                                indexSlide = 0;
                        }
                        funSlide();
                }, 6000);
        }
       
        indexSlide++;

        setTimeout(funSlide, 2000);
});
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused');
</script>

玫の玫 发表于 前天 20:38

歌曲真好听~~

玫の玫 发表于 前天 20:38

欣赏友友佳作，感谢精彩分享，感谢给大家带来美滴享受！祝创作愉快，天天好心情！

玫の玫 发表于 前天 20:39

听乐赏图，真是美美哒！
听音乐带来好心情，赞赞赞！

玫の玫 发表于 前天 20:39

特效美美哒~{:1_154:}

圊圊淥詶 发表于 前天 20:42

问好最美，好久不见~~{:1_154:}

圊圊淥詶 发表于 前天 20:42

谢谢最美的美图分享，辛苦了哦，
蛐蛐很好听！

醉美水芙蓉 发表于 前天 21:33

玫の玫 发表于 2025-12-7 20:39
特效美美哒~

问好玫玫！谢谢友友支持！

醉美水芙蓉 发表于 前天 21:34

圊圊淥詶 发表于 2025-12-7 20:42
问好最美，好久不见~~

问候绿洲老师！谢谢光临！

绿蔷薇 发表于 前天 21:54

醉美也做了这三张同素图，素材处理的漂亮呢，图片转场流畅自然，歌词同步制作精彩~~~
页: [1] 2
查看完整版本: 【单幅音画】你从我世界路过