论坛 › 欢乐水吧 › 老帖翻新《你有没有真的爱过我》

亚伦影音工作室 发表于 2026-7-8 19:26

老帖翻新《你有没有真的爱过我》

本帖最后由 亚伦影音工作室 于 2026-7-8 19:26 编辑 <br /><br /><div id="papa">
<div id="旋转木马">
<img src="https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png" />
<img src="https://pic1.imgdb.cn/item/6a2df0d2f684928e3d6cbc85.png" />
<img src="https://pic1.imgdb.cn/item/6a471bb40e2237bfad5f9b41.png" />
<img src="https://pic1.imgdb.cn/item/6a438f26514f59159c64efe4.png" />
<img src="https://pic1.imgdb.cn/item/6a3ca16752bf8ed03f85efbf.png" />
<img src="https://pic1.imgdb.cn/item/6a2e0509f684928e3d6ce52f.png" />
<img src="https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png" />
<img src="https://pic1.imgdb.cn/item/6a2df0caf684928e3d6cbc84.png" />
</div>
<div id="lrc" data-lrc="你有没有真的爱过我">你有没有真的爱过我</div>
   <div id="lrcc" data-lrc="">亚伦影音工作室出品</div>
<audio id="aud"autoplay="autoplay" loop="loop" src="https://www.joy127.com/url/153694.mp3" type="audio/mp3" /></audio>
<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">正在播放 0%</div>
<span id="fullscreen">全屏观赏</span>
    </div>


<style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px 0 20px calc(50% - 670px); background:#000 url(https://pic1.imgdb.cn/item/6718e20fd29ded1a8ce01101.jpg)no-repeat center / cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running;font-family:"Long Cang","ZCOOL KuaiLe","KaiTi","Ma Shan Zheng","STKaiti","SimHei",cursive,serif;}
#旋转木马{
                left:42%;
                  top:32%;/*让父元素居中*/
                width: 340px;
                height: 214px;
                transform-style: preserve-3d;
                animation: animate 60s linear infinite var(--state);
                position: absolute;
            }
            @keyframes animate   { 0% {transform:rotateX(20deg) rotateZ(-30deg) rotateX(360deg);
                }
                25% {
                  transform:rotateX(20deg) rotateZ(-30deg) rotateX(0deg);
                }
50% {
                  transform:rotateX(20deg) rotateZ(-30deg) rotateX(-360deg);
                }
75% {
                  transform:rotateX(20deg) rotateZ(-30deg) rotateX(0deg);
                }
100% {
                  transform:rotateX(20deg) rotateZ(-30deg) rotateX(360deg);
                }

            }



#旋转木马 img{   width:340px;
                height: 214px;
                position: absolute;
                left:0px;
                  top:0px;
                border:2px solid #ffffff;filter:contrast(130%)brightness(100%);
            }
            #旋转木马 img:nth-child(1){
                transform: rotateX(0deg) translateZ(262px);
            }
            #旋转木马 img:nth-child(2){
                transform: rotateX(45deg) translateZ(262px);
            }
            #旋转木马 img:nth-child(3){
                transform: rotateX(90deg) translatez(262px);
            }
            #旋转木马 img:nth-child(4){
                transform: rotateX(135deg) translatez(262px);
            }
            #旋转木马 img:nth-child(5){
                transform: rotateX(180deg) translatez(262px);
            }
            #旋转木马 img:nth-child(6){
                transform: rotateX(225deg) translatez(262px);
            }
            #旋转木马 img:nth-child(7){
                transform: rotateX(270deg) translatez(262px);
            }
            #旋转木马 img:nth-child(8){
                transform: rotateX(315deg) translatez(262px);
            }
         
      #lrc{left:5%;top: 10%;}#lrcc {left:10%;top: 20%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;letter-spacing: 10px;font:600 2.6em "Long Cang";color: #000;white-space: pre;writing-mode: vertical-lr;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0;filter:hue-rotate(0deg) }to { height: 100%;filter:hue-rotate(360deg)contrast(180%)brightness(200%); } }
      @keyframes cover2 { from { height: 0;filter:hue-rotate(0deg)}to { height: 100%;filter:hue-rotate(360deg)contrast(180%)brightness(200%);} }   
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:85%;color:#FFf;font: 600 2emLong Cang; opacity: 1; cursor: pointer; z-index: 10}
      
#bnt{left:80%;top: 87%;width: 150px;height: 50px;position: absolute; cursor: pointer;}
#ptxt{width:100%;height:6px;font:600 20px/0px "隶书";color: #fff;line-height:0px;bottom: 60px;left:50px;position: absolute;}
</style>
    <span id="lrcStr" style="visibility: hidden;">
你有没有真的爱过我
演唱：寂寞阿图
作词：廖伟志
作曲：廖伟志
制作人：欧华成
艺人统筹：小帅
出品 亚伦影音
你有没有真的爱过我
为何问你你总是不说
热烈相拥过
又不再交错
感情只剩模糊的轮廓
你有没有真的爱过我
哪怕一个坚定的承诺
从无话不说
到无话可说
故事结束任眼泪滑落
你有没有真的爱过我
你的回应是一直沉默
只剩下落寞
我有什么错
短暂柔情似流星划落
你有没有真的爱过我
我是你诗的哪个段落
落款第几页
第几次临摹
还是匆匆一瞥就略过
你有没有真的爱过我
我可曾是你情感寄托
今夜雾蒙蒙
无情又冷漠
似梦似醒憧憬被打破
你有没有真的爱过我
酒杯清浅我没有把握
回忆上了锁
我望月独酌
还不死心承受着折磨
你有没有真的爱过我
为何问你你总是不说
热烈相拥过
又不再交错
感情只剩模糊的轮廓
你有没有真的爱过我
哪怕一个坚定的承诺
从无话不说
到无话可说
故事结束任眼泪滑落
谢谢欣赏！
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.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;
                }
      }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png") : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png");

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-7-8 22:11

漂亮的转环效果，很伤感的歌曲，好听。变色歌词也很有特色。
欣赏亚伦老师好帖{:4_187:}

杨帆 发表于 2026-7-9 22:56

好听好看，欣赏亚伦老师精彩制作{:4_190:}

老谟深虑 发表于 2026-7-10 08:50

欣赏老师精美音画，点赞！

查看完整版本: 老帖翻新《你有没有真的爱过我》