论坛 › 动画音画 › 不要问我过得好不好(漂泊版)-桃坚坚

亚伦影音工作室 发表于 2026-9-2 13:34

不要问我过得好不好(漂泊版)-桃坚坚

本帖最后由 亚伦影音工作室 于 2026-9-2 20:32 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap");
   
    #bj {
      position: relative;
      width: 1186px;
      height: 640px;
      margin: 0;left: calc(50% - 81px);transform: translateX(-50%);
      overflow: hidden;
      background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ea07ea836871019fe4e074a6a94a9696.jpg)no-repeat center/cover;;--state: paused;
}

.fold-image{position: absolute; margin: 50px 150px;
width:800px;z-index: -1;
height: 450px;
   display: flex;
filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8));
}

.fold-image span{
width: 25%;
height: 100%;
background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7f2a8237ef017e2687f8f8ff2795b33d.jpg)no-repeat center/cover;
box-shadow: inset 1px 0 1px rgba(0,0,0,0.6);animation: rot 10s linear infinite var(--state);filter: drop-shadow(2px 0px 2px rgba(0,0,0,0.8));
}



.fold-image span:nth-child(odd){
transform: skewY(-14deg);
}

.fold-image span:nth-child(even){
transform: skewY(14deg);
}
@keyframes rot {
50%{transform: skewY(0deg);}
}
.fold-image span:first-child{
background-position: 0;
}
.fold-image span:nth-child(2){
background-position: -200px;
}
.fold-image span:nth-child(3){
background-position: -400px;
}
.fold-image span:last-child{
background-position: -600px;
}
   
/* 歌词 */
    .lrc-wrap {
      position: absolute;
      width: 100%;
      height: auto;
      left: 0px;
      top: 78%;
      text-align: center;
      font:400 3em 'Long Cang','ZCOOL KuaiLe','华文琥珀',STLiti,"宋体","SimSun","Microsoft YaHei",sans-serif !important;
      letter-spacing: 6px;
      
      white-space: nowrap;}

.lrc-wrap span {
    opacity: 0;
    transition: color 0.12s ease, text-shadow 0.12s ease;
       transform: translatex(120px);
      
    }

      .lrc-wrap .active {opacity: 1;
      transform: translatex(0deg)rotate(-720deg);filter: hue-rotate(360deg)brightness(320%)contrast(450%);
      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);
    }
   

/* 进度 */
       #progress {
      position: absolute;
      width: 74%;
      height: 4px;
      cursor: pointer;
      top: 95%;
      left: 14%;
      background: #eee;
      z-index: 100;
      border-radius: 2px;
    }
/* 时间 */
      #sj {
            position: absolute;
            width: 125px;
            top: 94%;
            left:90%;
            color: #eee;
            font-size: 14px;
      }
/* 播放暂停 */
    #bfzt {
      left:80%;top: 80%;width: 150px;height: 50px;position: absolute;filter: invert(0%); cursor: pointer;z-index: 61
    }

   

    .animation-paused #bfzt {
      animation-play-state: paused;
    }
    #pic{margin: 0px 10px ; top: 88%; width: 145px;height: 45px; display: flex;
      justify-content: center; mix-blend-mode: lighten;
      align-items: center; position: absolute; cursor: pointer; }

#fullscreen{border-radius: 2px;position: absolute;
color:#fff;background:#0000;box-shadow:0px 0px 0px 0px #fff;
width:80px;
       
font-size: 20px;
border: none;
cursor: pointer;z-index: 92;top: 4%;
            left:90%;
}
</style>

<div id="bj">
<div class="fold-image" >
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="lrc-wrap" id="lrcWrap"></div>
    <div id="fullscreen">全屏观赏</div>
      <div id="progress"></div>
    <img id="bfzt" title="播放暂停"src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png"> </img>
    <img id = "pic" src = "https://pic1.imgdb.cn/item/665ba41ed9c307b7e9c165af.gif"></img>
   
    <div id="sj">00:00 / 00:00</div>
</div>

<audio id="audio" src="http://music.163.com/song/media/outer/url?id=3420687867.mp3"loop autoplay>

<script>
const audio = document.getElementById('audio');
const lrcWrap = document.getElementById('lrcWrap');
const progress = document.getElementById('progress');
const bfzt = document.getElementById('bfzt');
const sj = document.getElementById('sj');
const xmhy = ` 作词 : 温夏
作曲 : 舟木楼
不要问我过得好不好(漂泊版)-桃坚坚
出品: 四海声纹
【未经著作权人许可不得翻唱翻录或使用】
我就像一颗孤独的野草
漂泊了半生还无依无靠
为了碎银两低头又弯腰
风雨里没有人把我照料
不知不觉我已变得苍老
早没有了年轻时的骄傲
尝尽了世间冷暖的味道
看清了人的虚伪和计较
不要问我过得好不好
我怕一不小心眼泪掉
这一路走得有多煎熬
只有自己心里最知晓
不要问我过得好不好
我的难处你又帮不了
多余的关心我不需要
只想一人静静悄悄慢慢的熬
不知不觉我已变得苍老
早没有了年轻时的骄傲
尝尽了世间冷暖的味道
看清了人的虚伪和计较
不要问我过得好不好
我怕一不小心眼泪掉
这一路走得有多煎熬
只有自己心里最知晓
不要问我过得好不好
我的难处你又帮不了
多余的关心我不需要
只想一人静静悄悄慢慢的熬`;

function parseLrc(lrcText) {
    const list = [];
    const lines = lrcText.split('\n');
    const reg = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.+)/;
    lines.forEach(line => {
      const m = line.match(reg);
      if (!m) return;
      let min = +m, sec = +m, msStr = m, txt = m.trim();
      let ms = +msStr;
      if (msStr.length === 2) ms *= 10;
      let time = min * 60 + sec + ms / 1000;
      if(!txt || /Music|End|编辑/.test(txt)) return;
      list.push({time, text: txt});
    });
    return list;
}

function randomColor(){
    const colors = ['#ff4444','#ffbb33','#00C851','#0099cc','#aa66cc','#ff8800','#ff33cc'];
    return colors;
}

const lrcList = parseLrc(xmhy);
let timerList = [];
let currLineIdx = -1;

function renderLine(text){
    lrcWrap.innerHTML = '';
    [...text].forEach(char => {
      const span = document.createElement('span');
      span.textContent = char;
      span.style.color = randomColor();
      lrcWrap.appendChild(span);
    });
}

function clearAllTimer(){
    timerList.forEach(t => clearTimeout(t));
    timerList = [];
}

function buildTimeAxis(){
    clearAllTimer();
    const now = audio.currentTime;

    for(let i=0; i<lrcList.length; i++){
      const curr = lrcList;
      const next = lrcList || {time: audio.duration};
      const lineDur = next.time - curr.time;
      const chars = [...curr.text];

      if(next.time < now) continue;

      if(curr.time <= now && next.time > now){
            renderLine(curr.text);
            currLineIdx = i;
            const progress = Math.max(0, Math.min(1, (now - curr.time)/lineDur));
            const activeCnt = Math.floor(progress * chars.length);
            const spans = lrcWrap.querySelectorAll('span');
            spans.forEach((s,idx)=>{
                if(idx <= activeCnt) s.classList.add('active');
            });
      }

      const lineDelay = (curr.time - now) * 1000;
      if(lineDelay >= 0){
            timerList.push(setTimeout(()=>{
                renderLine(curr.text);
                currLineIdx = i;
            }, lineDelay));
      }

      chars.forEach((char, idx)=>{
            const charTime = curr.time + (idx / chars.length) * lineDur;
            const charDelay = (charTime - now) * 1000;
            if(charDelay >= 0){
                timerList.push(setTimeout(()=>{
                  const spans = lrcWrap.querySelectorAll('span');
                  if(spans) spans.classList.add('active');
                }, charDelay));
            }
      });
    }
}
audio.addEventListener('pause', () => {
    clearAllTimer();
    document.body.classList.add('animation-paused');
});
audio.addEventListener('play', () => {
    buildTimeAxis();
    document.body.classList.remove('animation-paused');
});

audio.addEventListener('seeked', buildTimeAxis);
audio.addEventListener('timeupdate', () => {
    if(audio.duration){
      progress.style.background = `linear-gradient(90deg, red ${(audio.currentTime / audio.duration * 100)}%, white 0)`;
         sj.innerText = millToTime(audio.duration * 1000) + " / " + millToTime(audio.currentTime * 1000);
    }
    if(Math.abs(audio.currentTime - (lrcList?.time||0)) > 0.3){
      buildTimeAxis();
    }
});
function millToTime(mill) {
      var totalSeconds = Math.floor(mill / 1000);
      var minutes = Math.floor(totalSeconds / 60);
      var seconds = totalSeconds % 60;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return minutes + ":" + seconds;
}
progress.addEventListener('click', (e) => {
    audio.currentTime = (e.offsetX / progress.offsetWidth) * audio.duration;
});

bfzt.addEventListener('click', () => {
    if (audio.paused) {
      audio.play();bfzt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png"
      ;pic.src = "https://pic1.imgdb.cn/item/665ba41ed9c307b7e9c165af.gif";
    } else {bfzt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png";
      audio.pause();pic.src = "https://pic1.imgdb.cn/item/66c414c0d9c307b7e92555b8.jpg";
    }
});


(function() {
      const foldimage = document.querySelectorAll('.fold-image');
      var mState = () => {bj.style.setProperty('--state', audio.paused ? 'paused' : 'running');};
audio.onplaying = audio.onpause = () => mState();

})();
let fss = true;
      fullscreen.onclick = () => {
                fss ? (fullscreen.innerText = '退出全屏', bj.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fss = !fss;
      };

</script>

风雨梦 发表于 2026-9-2 14:06

精彩的分享，好帖劲赏。{:4_199:}

杨帆 发表于 2026-9-2 15:16

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

姚云裳 发表于 2026-9-2 19:08

这折子效果杠杠的

红影 发表于 2026-9-2 21:41

这制作效果真漂亮。欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-9-2 22:54

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

查看完整版本: 不要问我过得好不好(漂泊版)-桃坚坚