亚伦影音工作室 发表于 2025-12-12 19:43

方辰 - 冷冷的冬冷冷的风【模式切换】

本帖最后由 亚伦影音工作室 于 2025-12-12 21:41 编辑 <br /><br /><style>
        #pa {
                margin: 20px -300px;
                width: 1182px ;
                height: 620px;
                border: 1px solid gray;
                display: grid;overflow: hidden;
                place-items: center;background: url(https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)no-repeat;
                position: relative;background-size: cover;
        }
#picc {z-index: 2;
      top:0%; left:0%;
position: absolute;
    width: 1182px; height: 620px;
    background: url(https://pic.imgdb.cn/item/675cf3c3d0e0a243d4e3c992.jpg)no-repeat0px 0px/17730px 620px;
animation: mheart steps(15) 2s infinite ;
      mix-blend-mode: lighten;
}
@keyframes mheart {
0% {background-position: 0px 0;}
100% {background-position: -17730px 0;}
}

.mnBox {display: none;
        top: 0px;
        position:absolute;
        z-index: 2;
        height:100%;
        width: 100%;
      left:0px;overflow: hidden;
       
}

.rain {
        width: 1px;
        height: 8px;
        top: -20px;
        left: 400px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 18px;
        background: #eee;
}



.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}

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

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

}
#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;
                padding: 0px; color: #00aa00;
                font:normal 3em 华文隶书;
                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);
       text-align: center; top: 80%;
        }

        .char {
                display: inline-block;
                padding: 2px 2px;
                opacity: 0;color: #00aa00;
                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%); }
        }
#g,#he,#shu{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;z-index: 120;width: 40%;
        height: 20%;
font-size: 12px;
border: none;
cursor: pointer;top: -250px;left: 450px;
}
</style>

<div id="pa">
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/f4/3f/15/ccae9c20a3a5f802f714bbaad3e6ad5b/audio.mp3" loop autoplay></audio>
<divclass="mnBox" id="mnBox" ><span class="rain"></span>
<span class="circle"></span></div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
        <div class="wra"id="wrapper">红蔷薇 - 走不完的路</div>
<div id="picc" ></div>
<div>
<span id="he" onclick="btnh()" title="">横排歌词</span>
<span id="shu" onclick="btns()" title="">竖排歌词</span>
<span id="g" title="雨/雪模式">下雨效果</span>
</div>
</div>

<script>

        const gc = `冷冷的冬冷冷的风
演唱：方辰
出品：亚伦影音工作室
冷冷的冬冷冷的风
冷冷的心冷冷的梦
一杯烈酒一杯伤痛
我喝醉了
没人来哄
冷冷的月冷冷的城
冷冷的街冷冷的灯
爱你一程
痛我一生
海誓山盟变成嘲讽
我的思念你不懂
我那温柔你不懂
你不懂我对你的爱有多重
你像雾像雨又像风
你来去太过匆匆
把我一个人困在回忆中
我的眼泪你不懂
我那痴情你不懂
你不懂我破碎的心有多痛
我问天问地问佛
何时再与你相逢
为何留下我一个人过冷冬
冷冷的月冷冷的城
冷冷的街冷冷的灯
爱你一程
痛我一生
海誓山盟变成嘲讽
我的思念你不懂
我那温柔你不懂
你不懂我对你的爱有多重
你像雾像雨又像风
你来去太过匆匆
把我一个人困在回忆中
我的眼泪你不懂
我那痴情你不懂
你不懂我破碎的心有多痛
我问天问地问佛
何时再与你相逢
为何留下我一个人过冷冬

`;

        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 ? -350 : 350);
                        const y = Math.random() * (Math.random() > 0.5 ? -350 : 350);
                        span.style.cssText += `
                                color: #ff0000;
                                --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 shu=document.getElementById("wrapper");
var writingmode=document.getElementById("writing-mode");
var writingspace=document.getElementById("white-space");
const he= document.querySelector('.wra');
functionbtnh(){
      he.style.top= '80%';he.style.width= '100%'; he.style.left= '0%';he.style.font= 'normal 3em 华文隶书';
};
functionbtns(){
            shu.style.width= '60px';shu.style.height= '90%';shu.style.top= '100px';shu.style.left= '8%';shu.style.font= 'normal 2.4em 华文隶书';
shu.style.writingmode= 'vertical-lr';shu.style.writingspace= 'pre';
};
var pc=document.getElementById("picc");
const yu = document.querySelector('.mnBox');
let fs = true;
      g.onclick = () => {
            if (fs) {g.innerText = '下雪效果';
                  pc.style.display = 'none';
            yu.style.display = 'block';

            }else {g.innerText = '下雨效果';
               pc.style.display = 'block';
            yu.style.display = 'none';

            }
            fs = !fs;
      };
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',picc.style.animationPlayState = 'running',raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'})) :( aud.pause(),player.style.animationPlayState = 'paused',picc.style.animationPlayState = 'paused',raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}));

function rain() {
      var str = "";
      for(i=0; i<80; i++) {
                var l = Math.ceil(Math.random()*1286);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
      }
      for(j=0;j<100; j++){
                var k1 = Math.ceil(Math.random()*100);
                var k2 = Math.round(Math.random()*30+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
      }
      document.getElementById('mnBox').innerHTML += str;
}

rain();
let raindrops = mnBox.querySelectorAll('.rain');
let rainpops = mnBox.querySelectorAll('.circle');
</script>

红影 发表于 2025-12-12 21:54

这个真好，能切换横板和竖版歌词，还是切换下雨和下雪效果{:4_204:}

红影 发表于 2025-12-12 21:54

欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-12-12 23:21

多模式切换顺畅，谢谢亚伦老师经典分享{:4_191:}

樵歌 发表于 2025-12-13 07:23

欣赏亚伦精美作品。{:4_174:}

小文 发表于 2025-12-13 20:10

好听，喜欢！
页: [1]
查看完整版本: 方辰 - 冷冷的冬冷冷的风【模式切换】