论坛 › 动画音画 › 没走我的路怎知我的苦-林舒玥

亚伦影音工作室 发表于 2026-8-30 18:53

没走我的路怎知我的苦-林舒玥

本帖最后由 亚伦影音工作室 于 2026-8-31 16:25 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
        #papa { margin: 10px -440px; width: 1465px; height: 720px; background: #000 ; box-shadow:0 0px 0px 0px #000;position: relative; z-index: 1; --state: running; display: grid;overflow: hidden;font-family:"Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-serif";
                place-items: center;}

#vid {width: 75%; height: 75%; z-index: 4;
position:absolute;
top:20%; left:36%;-webkit-mask-image: radial-gradient(black 15% ,transparent 75%);
object-fit: cover; pointer-events: none;
}

#vid1 {width: 100%; height: 100%; z-index: 3;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

                /*piece盒子*/
                .piece-box {z-index: 9;
                        position: absolute;
                        width: 200px;
                        height: 200px;
                        top:45%; left:20%;
                        perspective-origin: 50% 50%;
                        transform-style: preserve-3d;
                animation: pieceRotate 5s 3 var(--state);
             cursor: pointer;
                }
                /*为了实现第二个动画加的盒子*/
                .piece-box2 {display: grid;
      place-items: center;;
       
                transform-style: preserve-3d;
                animation: boxRotate 6s 10s infinite linear var(--state) ;
                
                }
                /*piece通用样式*/
                .piece {
                        position: absolute;
                        width: 200px;
                        height: 200px;
                       display: grid;
      place-items: center;

                        opacity: 1;

                }
                .piece-1 {
                        background: url(https://img-baofun.zhhainiao.com/fs/3bdc2c70f81652375629d4fe0c5f3044.jpg)-70px 0/150% 100%;
                
                transform: rotateY(0deg) translateZ(173.2px);
                animation: piece1Rotate 4s 5svar(--state);
             
                          animation-fill-mode: forwards;

                }
                .piece-2 {
                        background: url(https://img-baofun.zhhainiao.com/fs/a0f18486941a031d0b21a19fd6d03f67.jpg)-50px 0/150% 100%;
                
                transform: rotateY(60deg) translateZ(173.2px);
                animation: piece2Rotate 4s 5svar(--state);
             
                          animation-fill-mode: forwards;
                }
                .piece-3 {
                        background: url(https://img-baofun.zhhainiao.com/fs/0168993e40c3f609b7f987501aef5eb6.jpg)-50px 0/150% 100%;
                
                transform: rotateY(120deg) translateZ(173.2px);
                 animation: piece3Rotate 4s 5svar(--state);
                
                          animation-fill-mode: forwards;
                }
                .piece-4 {
                        background: url(https://img-baofun.zhhainiao.com/fs/1466b196f4c66b49c325b0bc957c4317.jpg)-50px 0/150% 100%;
                
                transform: rotateY(180deg) translateZ(173.2px);
                 animation: piece4Rotate 4s 5svar(--state);
             
                          animation-fill-mode: forwards;
                }
                .piece-5 {
                        background: url(https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg)-50px 0/150% 100%;
                
                transform: rotateY(240deg) translateZ(173.2px);
                 animation: piece5Rotate 4s 5svar(--state);
                
                          animation-fill-mode: forwards;
                }
                .piece-6 {
                        background: url(https://img-baofun.zhhainiao.com/fs/a0f18486941a031d0b21a19fd6d03f67.jpg)-50px 0/150% 100%;
                
                transform: rotateY(300deg) translateZ(173.2px);
                animation: piece6Rotate 4s 5svar(--state);
                
                          animation-fill-mode: forwards;
                }


/*走马灯动画*/
                @keyframes pieceRotate
          {
          0%   {
                    transform: rotatex(-9deg)rotateY(0deg);}
          100% {
                    transform: rotatex(9deg)rotateY(360deg);}
          }
       
/*以下是走马灯转变为六面正方体的动画*/

/*front*/
          @keyframes piece1Rotate
          {
          0%   {
                transform: rotateY(0deg) translateZ(173.2px);}
          100% {
                        transform:rotateY(0deg) translateZ(100px);}
          }
          
/*back*/
                @keyframes piece2Rotate
          {
          0%   {
                transform: rotateY(60deg) translateZ(173.2px);}
          100% {
                        transform:rotateY(0deg) translateZ(-100px);}
          }
          
/*left*/
                @keyframes piece3Rotate
          {
          0%   {
                transform: rotateY(120deg) translateZ(173.2px);}
          100% {
                        transform: translateX(-100px) rotateY(90deg);}
          }
       
/*right*/
                @keyframes piece4Rotate
          {
          0%   {
                transform: rotateY(180deg) translateZ(173.2px);}
          100% {
                        transform: translateX(100px) rotateY(90deg);}
          }
          
/*top*/
                @keyframes piece5Rotate
          {
          0%   {
                transform: rotateY(240deg) translateZ(173.2px);}
          100% {
                        transform: translateY(-100px) rotateX(90deg);}
          }
          
/*bottom*/
                @keyframes piece6Rotate
          {
          0%   {
                transform: rotateY(300deg) translateZ(173.2px);}
          100% {
                        transform: translateY(100px) rotateX(90deg);}
          }
          
          
/*正方体旋转动画*/
                @keyframes boxRotate
          {
          from { transform: rotateX(40deg) rotateY(0deg) rotateZ(0deg); }
      to { transform: rotateX(40deg) rotateY(360deg) rotateZ(360deg); }
       }
#main {z-index: 6;
position: absolute;
overflow: hidden;display: none;
width: 100%;height:100%;
min-height: 98vh;margin: 0px 0px;
perspective: 340px;
}
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite var(--state);
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite var(--state);
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite var(--state);
}
@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.5;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0;
}
to {
    opacity: 0.5;
}
}


#wrapper {z-index: 12;
                position: absolute;
                padding: 0px 0px; color: #00aa00;
                font:normal 3em "Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-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);
       text-align: center; top: 87%;
        }
        .char {
                display: inline-block;
                padding: 4px 3px;
                opacity: 0;color: #00aa00;
                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:scale(1);
                        opacity: 1;
                }
        }
        @keyframes flash {
                to { filter: hue-rotate(360deg)brightness(120%)contrast(450%); }
        }
#c,#b,#fullscreen{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: 14px;
border: none;
cursor: pointer;z-index: 92;
}


        </style>

<div id="papa" >
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c125df52d2ae6e1b21240a7205b3e7a1_preview.mp4" autoplay loop muted></video>
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/324627432c4495b6f858fdf811ed7770_preview.mp4" autoplay loop muted></video>
        <div class="piece-box" title="暂停/播放">
                <div class="piece-box2">
                        <div class="piece piece-1"></div>
                        <div class="piece piece-2"></div>
                        <div class="piece piece-3"></div>
                        <div class="piece piece-4"></div>
                        <div class="piece piece-5"></div>
                        <div class="piece piece-6"></div>
                </div>
        </div>
<div class="wra"id="wrapper"></div>
<div id="main">
<div id="stars"></div>
</div>
<div style="position: absolute;top:4%;left: 72%;">
<span id="c" title="歌词模式">竖列歌词</span>
<span id="b" title="特效模式">显示粒子</span>
<span id="fullscreen">全屏观赏</span>
</div>


<audio id="aud" src="https://www.qeecc.com/plug/down.php?ac=music&lk=mp3&id=eXl4Y3l3c2lp" loop autoplay></audio>
</div>
<script>
(function() {
      
      var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play());
         document.querySelector(".piece-box").style.setProperty(aud.paused ? 'paused' : 'running');
      };
aud.onplaying = aud.onpause = () => mState();
document.querySelector(".piece-box").onclick = () => aud.paused ? (aud.play()) :(aud.pause()) ;
})();

var wrapper=document.getElementById("wrapper");
const wra= document.querySelector('.wra');
var writingmode=document.getElementById("writing-mode");
var writingspace=document.getElementById("white-space");
var texalign=document.getElementById("center");
let fsa = true;
      c.onclick = () => {
            if (fsa) {c.innerText = '横列歌词';
                   wra.style.width= '60px'; wra.style.height= '90%'; wra.style.top= '10%'; wra.style.left= '78%';
wra.style.writingmode= 'vertical-lr'; wra.style.writingspace= 'pre';wra.style.transform= 'scale(0.8)';
            wra.style.display = 'block';
            wrapper.display = 'none';

         }else {c.innerText = '竖列歌词';
            wrapper.style.transform= 'scale(1.1)';wrapper.style.top= '90%';wrapper.style.width= '100%'; wrapper.style.left= '0%';
            wra.style.display = 'none';
            wrapper.style.display = 'block';
            }
            fsa = !fsa;
      };

let fsb = true;
      b.onclick = () => {
            if (fsb) {b.innerText = '取消粒子';
               main.style.display = 'block';
            }else {b.innerText = '显示粒子';
            main.style.display = 'none';
            }
            fsb = !fsb;
      };   
let fss = true;
      fullscreen.onclick = () => {
                fss ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fss = !fss;
      };

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, gap);
               
        }

        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 ? 650 : -650);
                        const y = Math.random() * (Math.random() > 0.5 ? -650 : 650);
                        span.style.cssText += `
                                color: #${Math.random().toString(10).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>
   

杨帆 发表于 2026-8-30 20:03

好听好看，效果漂亮，谢谢亚伦老师精彩示范{:4_190:}

小辣椒 发表于 2026-8-30 20:49

欣赏亚纶精彩的制作{:4_187:}

红影 发表于 2026-8-30 22:07

这个播放器还能变化组装，真漂亮。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: 没走我的路怎知我的苦-林舒玥