论坛 › 动画音画 › 我的眼里都是你

亚伦影音工作室 发表于 2025-7-18 14:13

我的眼里都是你

本帖最后由 亚伦影音工作室 于 2025-7-18 21:08 编辑 <br /><br /><style>
#papa {position: relative;
            width: 1286px;
            height:720px;
            margin: 10px -300px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800000 url(https://img2.oldkids.cn/upload/2025/05/05/photo_0_20250505170049670.jpg) no-repeat center / cover;
--state: running;
      }
.pTitle { line-height: 2em; color: transparent; font-family: STLiti, NSimSun, 'Microsoft YaHei'; font-size: 40px; font-weight:400; text-align: center; margin: auto; z-index: 5; position: absolute; left: 2%; top: 2%; }
.sp{animation: flashTitle 8slinear 20 var(--state);}
.pTitle span:nth-child(1) { animation-delay: 0s;}
.pTitle span:nth-child(2) { animation-delay: 0.5s;}
.pTitle span:nth-child(3) { animation-delay: 1s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s;}
.pTitle span:nth-child(5) { animation-delay: 2s;}
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3s; }
@keyframes flashTitle { 0%, 100% { color:#ff0000; text-shadow:0px 2px 0px #fff,2px 0px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff; } 50%, 90% { color: transparent; text-shadow: 0px 0px 20px #00ff00; } }
#pa{margin: 40% 70%;position:absolute;width: 200px; height:150px; overflow: hidden;}
#anniu {position: absolute; top:45px; width:140px;left: 40px;}
.start{color: #555;position: absolute; top:18px; left: 4px;}
.end{color: #555;position: absolute;top:18px; right:4px;}
      #btn{position: absolute; top:0px; width: 60px;height:60px; cursor: pointer; left: 40px;z-index: 2;}
    #playIcon {display: none; }
#prog {position: absolute; display: grid; place-items: center; width: 180px; height: 140px; right: 0px; bottom: 0px; border-radius: 50% 20% ; -webkit-mask: radial-gradient( transparent 68%, #000 68%, #000 0);cursor: pointer;z-index:1; }
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 20%;bottom: 15%;transform: translate(-50%);font:300 3.8em/1.2em 华文隶书; color: #000080;white-space: pre;-webkit-background-clip: text;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #00ff00;} }@keyframes cover2 { to { clip-path: inset(0 0 0 0);color: transparent; text-shadow: 0px 0px 10px #fff000;} }
    </style>
   <audio id="aud" src="https://file.uhsea.com/2506/2f18f0bf2b7f5bd1746f3b1166d16eccLC.mp3" autoplay loop></audio>
   
<div id="papa">
<div class="pTitle">
      <span class="sp">我</span>
      <span class="sp">的</span>
      <span class="sp">眼</span>
      <span class="sp">里</span>
      <span class="sp">都</span>
      <span class="sp">是</span>
      <span class="sp">你</span>
    </div>
<div id="pa">
<div id="anniu">
<span class="start">00:00</span> <svg   id="btn" width="60" height="60" fill="#555" viewBox="0 0 24 24">
      <path id="playIcon" d="M8 5v14l11-7z"></path>
      <path id="pauseIcon" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
      </svg>
<span class="end">00:00</span>
</div>
<div id="prog" title=""></div>
</div>
<div data-lrc="" id="lrc"></div>
</div>
<script>

    var playIcon = document.getElementById('playIcon');
    var pauseIcon = document.getElementById('pauseIcon');
   
var btn = document.getElementById('btn');
      btn.onclick = function() {
            if (aud.paused) {
                aud.play();
      playIcon.style.display = 'none';
      pauseIcon.style.display = 'block';
papa.style.setProperty('--state', 'running');
               } else {
               aud.pause();
      playIcon.style.display = 'block';
      pauseIcon.style.display = 'none';
papa.style.setProperty('--state', 'paused');
}
   };

var start = document.querySelector('.start')
   var end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    }, 1000)
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, #fff555, #fff555, #fff555 ' + aud.currentTime / aud.duration * 100 + '%, #555 0)';});
                });
</script>

<script >
(function() {
/*lrc*/
let lrcStr = `
                天会荒 地会老
                对你的爱到永久
                就算失了忆也不把你忘记
                我的眼里都是你
                我的心里也是你
                失去你世界变得没意义
                把我的心揉碎
                看看里面装着谁
                是谁让我日夜想到难以入睡
                你是我今生的执着
                你是我余生的寄托
                除了你没人走进我心窝
               
                摘颗星 送给你
                愿你永远都美丽
                让月亮照亮微笑的你
                用星辰来祝福
                愿你余生没痛苦
                让大海带走你所有无助
                天会荒 地会老
                对你的爱到永久
                就算失了忆也不把你忘记
                我的眼里都是你
                我的心里也是你
                失去你世界变得没意义
                ......
                把我的心揉碎
                看看里面装着谁
                是谁让我日夜想到难以入睡
                你是我今生的执着
                你是我余生的寄托
                除了你没人走进我心窝
                摘颗星 送给你
                愿你永远都美丽
                让月亮照亮微笑的你
                用星辰来祝福
                愿你余生没痛苦
                让大海带走你所有无助
                天会荒 地会老
                对你的爱到永久
                就算失了忆也不把你忘记
                我的眼里都是你
                我的心里也是你
                失去你世界变得没意义
                摘颗星 送给你
                愿你永远都美丽
                让月亮照亮微笑的你
                用星辰来祝福
                愿你余生没痛苦
                让大海带走你所有无助
                天会荒 地会老
                对你的爱到永久
                就算失了忆也不把你忘记
                我的眼里都是你
                我的心里也是你
                失去你世界变得没意义
               
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
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;
};

/* lrc n*3 */
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 showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*mKey*/
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;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>

梦油 发表于 2025-7-18 14:51

欣赏佳作，问候亚伦。

清茶煮雪 发表于 2025-7-18 16:29

欣赏老师的精彩{:4_204:}

红影 发表于 2025-7-18 18:35

这个小播的进度条路径很奇妙，走过能把它都填满呢，好看{:4_187:}

红影 发表于 2025-7-18 18:36

歌词同步也很奇妙，并不是一句歌词里的多钟颜色，而是换句就换个颜色，这个不知怎么实现的{:4_199:}

红影 发表于 2025-7-18 18:39

逐字闪亮的标题字也漂亮。唯一感觉歌词放在人物的脖子那里，这位置有点难受{:4_173:}
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-7-18 22:19

漂亮！谢谢亚伦老师经典分享{:4_190:}

查看完整版本: 我的眼里都是你