论坛 › 动画音画 › 走错太多路(治愈版)-戎大姨

亚伦影音工作室 发表于 2026-8-9 19:20

走错太多路(治愈版)-戎大姨

本帖最后由 亚伦影音工作室 于 2026-8-12 10:46 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#papa { position: relative; margin: 10px 0 10px calc(10% - 390px); width: 1286px;height: 720px;
      background: linear-gradient(to right, #0657B3,#81E3EC,#0657B3);overflow: hidden;
      box-shadow: 0px 0px 0px #333; display: grid;
        place-items: center;--state: running; }



.photo {position: absolute;width: 100%;height:100%;overflow:screen; top: 0;
left: 0;
      animation: round 48s   linear infinite var(--state); opacity:0}
      
      .photo img{width: 100%; }
      
@keyframes round{
0% { transform:rotate(0)scale(3)translate(20%,30%);opacity:1;}
10% { transform:rotate(0)scale(1)translate(0%,0%);opacity:1}
12% {transform:rotate(0)scale(1)translate(0%,0%);opacity:1}
16% { transform:rotate(0)scale(1)translate(0%,0%);opacity:0}
}
img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
img:nth-child(8) {animation-delay:0s;}
#djtu {position: absolute;
      top:0px; left:0px;z-index:3;
      width: 100%;
      height: 100%;transition: .1s;filter: invert(100%);
      mix-blend-mode: lighten;opacity:0.6;
}

#intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background:#220080;
background-size: cover;
opacity:1; mix-blend-mode:soft-light;
animation: hue-rotate 6s linear infinite ;
}
@keyframes hue-rotate {
0%{
   filter: hue-rotate(-360deg);
}

100%{
   filter: hue-rotate(360deg);
}
}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 8%;font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;writing-mode: vertical-lr;white-space: pre;transform: translateY(0%);filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {position: absolute;content: attr(data-lrc); width: 10%; height: 100%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
#bnt{left:80%;top: 58%;width: 150px;height: 50px;position: absolute; cursor: pointer;z-index: 61}
#ptxt{width:100%;height:6px;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";color: #fff;line-height:0px;bottom: 32%;left:84%;position: absolute;z-index: 2}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 115px; left:77%; bottom: 30%;border-radius: 80%;-webkit-mask: radial-gradient( transparent 67%, #000 68%, #000 0);cursor:pointer; z-index: 60;}

#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:85%;color:#000;font: 100 2em"Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; opacity: 1; cursor: pointer; z-index: 10}
</style>
<div id="papa">
<div>
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c3d56a62b1e7ae883cf0b26fbd35ba5e.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c1f9f20404ca6d7a7c185f36909ba50a.png" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9a4b44530be9f7b311eb3db2d18e4af5.jpeg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6b190f7126072b0a2f1f2859a2501612.jpeg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5d6b416831d6aff1ce1eeba1ddcc6a7d.jpeg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/021826a443251bdc835f46d074353830.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d4d6b187c51ae31471e1c7439609dd4.jpg" />
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/93884784b498f1a65064e914bb056340.jpg" />
</div>
<img id = "djtu" src = "https://pic1.imgdb.cn/i/0340jPsa8KlGj0lIjMrU0Y.gif">
<div id="lrc" data-lrc=""></div>
<div id="intro"></div>

<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">正在播放 0%</div>
<divid="prog"></div>
<span id="fullscreen">全屏观赏</span>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3406258729.mp3" autoplay loop></audio>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `走错太多路(治愈版)-戎大姨
词: 宋普照
曲: 灰色幽默
编混: 张世彬
制作人: 陈小霞
OP: 星汉马文化
冷风吹着我的孤独
路灯照着我的酸楚
月亮听着我的倾诉 和我的来时路
无人陪我 来喝酒一壶
多少朋友早已殊途
多少故人四海沉浮
无人对我牵肠挂肚 也没有人在乎
我早已习惯 也早已麻木
我走错太多路
知错已到这个岁数
自己满身的无助
怎配曾经天生的反骨
我走错太多路
却没想过要去认输
就算命运不大度
时光也不会被我虚度 被我虚度
多少朋友早已殊途
多少故人四海沉浮
无人对我牵肠挂肚 也没有人在乎
我早已习惯 也早已麻木
我走错太多路
知错已到这个岁数
自己满身的无助
怎配曾经天生的反骨
我走错太多路
却没想过要去认输
就算命运不大度
时光也不会被我虚度 被我虚度
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        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;}
        function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
       
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                });

bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png",djtu.src = "https://pic1.imgdb.cn/i/0340jPsa8KlGj0lIjMrU0Y.gif") : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png",djtu.src = "");

mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();

aud.addEventListener("timeupdate",function(){
                              var percent= aud.currentTime / aud.duration
                              var sp = 600 / 100 ;
                              var swidth =(percent * 100 * sp) + "px";
                              console.log(percent*100,swidth)
                              //保留2位小数
                              document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                              
                        })
                let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };      
                        


</script>

梦油 发表于 2026-8-9 20:00

欣赏佳作，问好亚伦。

红影 发表于 2026-8-9 20:14

制作很漂亮，这歌曲好像也是从熟悉的歌曲中新填词的，好像是那首 不是我不小心？
这制作真漂亮，欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-8-9 23:46

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

查看完整版本: 走错太多路(治愈版)-戎大姨