首页 › 音画作品 › 恋曲1990

亚伦影音工作室 发表于 2026-6-11 18:06

恋曲1990

本帖最后由 亚伦影音工作室 于 2026-6-11 18:14 编辑 <br /><br /><style>
      #papa{margin: 10px -180px;
        width: 1186px;
        height: 640px;
        background:url('https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}

      #wallpaper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: background-image 0s ease-in-out ; /* 基础转场效果 */
      }

      /* 定义不同的转场效果 */
      .fade {
            animation: fade 2s forwards ;
      }

      @keyframes fade {
         0% {opacity: 1;clip-path:inset(50% 50% 50% 50%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadea {
            animation: fadea 2s forwards ;
      }

      @keyframes fadea {
         0% {opacity: 1;clip-path:inset(0% 100% 0% 100%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadeb {
            animation: fadeb 2s forwards ;
      }

      @keyframes fadeb {
         0% {opacity: 1;clip-path:inset(100% 0% 100% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
   .faded {
            animation: faded 2s forwards ;
      }

      @keyframes faded {
         0% {opacity: 1;clip-path:inset(0% 0% 100% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
   .fadec {
            animation: fadec 2s forwards ;
      }

      @keyframes fadec {
         0% {opacity: 1;clip-path:inset(100% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadee {
            animation: fadee 2s forwards ;
      }

      @keyframes fadee {
         0% {opacity: 1;clip-path:inset(0% 0% 0% 100%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}

.fadef {
            animation: fadef 2s forwards ;
      }

      @keyframes fadef {
         0% {opacity: 1;clip-path:inset(0% 100% 0% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadeg {
            animation: fadeg 2s forwards ;
      }

      @keyframes fadeg {
         0% {opacity: 1;clip-path:inset(100% 100% 0% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadeh {
            animation: fadeh 2s forwards ;
      }

      @keyframes fadeh {
         0% {opacity: 1;clip-path:inset(0% 0% 100% 100%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadej {
            animation: fadej 2s forwards ;
      }

      @keyframes fadej {
         0% {opacity: 1;clip-path:inset(0% 100% 100% 0%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fadem {
            animation: fadem 2s forwards ;
      }

      @keyframes fadem {
         0% {opacity: 1;clip-path:inset(100% 0% 0% 100%);transform:translate(0%,0%)scale(1);}
100% {opacity: 1;clip-path: inset(0% 0% 0% 0%);transform:translate(0%,0%)scale(1);}
}
.fades {
            animation: fades 3s forwards ;
      }

      @keyframes fades {
      0% {opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);}
50%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
100%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
}

.fadex {
            animation: fadex 3s forwards ;
      }

      @keyframes fadex {
       0% {opacity: 1;transform:scale(0.8)scale3d(0,0,-300) skew(0,70deg);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.fadeq {
            animation: fadeq 3s forwards ;
      }

      @keyframes fadeq {
       0% {opacity: 1; clip-path: ellipse(0% 00% at 50% 50%);}
30% {opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);}
60% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
100% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
}
.fadep {
            animation: fadep 3s forwards ;
      }

      @keyframes fadep {
       0% {opacity: 1;transform:scale(4);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.fadew {
            animation: fadew 3s forwards ;
      }

      @keyframes fadew {
       0% {opacity: 1;transform:scale(1);}
50% {opacity: 1;transform:scale(4);}
100% {opacity: 0;transform:scale(4)}
}
.fadeu {
            animation: fadeu 3s forwards ;
      }

      @keyframes fadeu {
       0% {opacity: 1;transform:scale(1);clip-path:polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%,50% 0%);}
50% {opacity: 1;clip-path:polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
100% {opacity: 1;clip-path:polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%)}
}
#lrc{left: 30%;top: 75%;}#lrcc {left: 95%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.6em 华文新魏;color: #222222;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 -1px 0);z-index: 15;}
#lrcc::before,#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);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
#xiaobo {z-index: 100;
      width: 350px;
      height: 220px;
      margin: 400px 10px;
      position: absolute;
      overflow: hidden;
      --state:paused;
      }
.hexahedron {width: 210px;
      height: 210px;
      margin: 0px 0px;
         position: relative; z-index: 1;
      background:#55682f;border-radius: 8px;mask: radial-gradient(circle at 100% 50%,transparent 42px,#red 0%);-webkit-mask: radial-gradient(circle at 100% 50%,transparent 42px,red 0%); }
#cp { position: relative; top: 0px; left: 0px;width: 200px; height: 200px;transition: 6s;animation:opentop 0.5s 1 1s ;}
#all {position: absolute;width:200px; height:200px;top: 5px; left: 110px;z-index: -1; transition: 0.25s; animation:tion3s linear 1.5s infinite}
@keyframes opentop { 0% {transform: translatex(-50px);} 100% { transform:rotateX(0px);}}
@keyframes tion { 0% {} 100% { transform:rotate(360deg) } }
#bnt{margin: 10px 0px ; width: 92px; height: 38px; position: absolute; cursor: pointer; z-index: 100;transition: all 1s; filter:invert(0%); }
#cndpt{position: absolute; width: 100%; height: 100%;opacity:1;border-radius: 10px;
   background: url(https://pic1.imgdb.cn/item/6a27e647edae85a6284fbffe.png)no-repeat 0 0px/cover;}
#enopg{ position: absolute;width: 100%; height: 100%; border-radius: 10px;
opacity:0;background: url(https://pic1.imgdb.cn/item/6a27e647edae85a6284fbfff.png)no-repeat 0 0px/cover;)
}
#dt{margin: 0px 0px ; width: 200px; height: 200px;position: absolute; z-index: 10;transition: all 1s; }
#cndt{position: absolute; width: 100%; height: 100%; border-radius: 0px;opacity:1;
   background: url(https://pic1.imgdb.cn/item/68e726e3c5157e1a885e7699.gif)no-repeat 0 0px/cover;}
#cnpg{ position: absolute;width: 100%; height: 100%; border-radius: 0px;opacity:0;
background: url(https://pic1.imgdb.cn/item/6a27996aedae85a6284defd4.png)no-repeat 0 0px/cover;)
}
    </style>
<div id="papa">
    <div id="wallpaper"></div>
<audio id="aud" src="https://kkmp3.com/upload/music/music_69edf2e7e4c0f.mp3" loop autoplay></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<div id="xiaobo">
<div class="hexahedron">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg"></div>
</div>
<div id="dt" >
<div id="cndt"></div>
<div id="cnpg"></div>
</div>
</div>
<div id="all">
<img src="https://pic1.imgdb.cn/item/69e5e442198dd6f8d6ac9407.png"id="cp" />
</div>
</div>
   
</div>
<script>
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
bnt.onclick = () => aud.paused ? (aud.play(),all.style.left = '110px',enopg.style.opacity= '0',cndpt.style.opacity = '1',
cndt.style.opacity= '1',cnpg.style.opacity= '0',all.style.animationPlayState = 'running',wallpaper.style.animationPlayState = 'running') : (aud.pause(),all.style.left = '30px',enopg.style.opacity = '1',cndpt.style.opacity = '0',cndt.style.opacity= '0',cnpg.style.opacity= '1',all.style.animationPlayState = 'paused',wallpaper.style.animationPlayState = 'paused');
</script>

    <script>
      const wallpaper = document.getElementById('wallpaper');
      const images = [
            'url(https://pic1.imgdb.cn/item/69f6c2facbb7e6da3529c275.png)',
            'url(https://pic1.imgdb.cn/item/69f6d37a98d7db9e97813ad7.png)',
            'url(https://pic1.imgdb.cn/item/69f6d4a598d7db9e97813aeb.png)',
'url(https://pic1.imgdb.cn/item/69f6d4ea98d7db9e97813aed.png)',
            'url(https://pic1.imgdb.cn/item/69fb1fd8ecff72ad899f54dc.png)',
            'url(https://pic1.imgdb.cn/item/69fb1fdeecff72ad899f54dd.png)',
'url(https://pic1.imgdb.cn/item/68537fb258cb8da5c85a91ce.jpg)',
            'url(https://pic1.imgdb.cn/item/684ea50c58cb8da5c84d5c72.jpg)',
            'url(https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp)'

            // 添加更多图片路径
      ];
      let currentIndex = 0;
      const effects = ['fadeu','fadew','fadep','fadeq','fadex','fades','fadem','fadej','fadeh','fadeg','fadef','fadee','faded','fadec','fadeb','fadea','fade']; // 转场效果列表

      function changeWallpaper() {
      currentIndex = (currentIndex + 1) % images.length;
            const effect = effects; // 随机选择一个转场效果
            wallpaper.classList.remove(...effects); // 移除所有可能的类名
            wallpaper.classList.add(effect); // 添加新的转场效果类名
            wallpaper.style.backgroundImage = images;
      }

      setInterval(changeWallpaper, 4000); // 每4秒切换一次壁纸
    </script>
<span id="lrcStr" style="visibility: hidden;">
恋曲1990
歌手：图钉姐Official
词/曲/原唱：罗大佑
乌溜溜的黑眼珠和你的笑脸
怎么也难忘记你容颜的转变
轻飘飘的旧时光就这么溜走
转头回去看看时已匆匆数年
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
LRC编辑：小辣椒
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
谢谢欣赏
</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');
      lrc.style.setProperty('--state', 'running');
    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');
      lrcc.style.setProperty('--state', 'running');
    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;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

亚伦影音工作室 发表于 2026-6-11 18:19

本帖最后由 亚伦影音工作室 于 2026-6-11 18:25 编辑

歌词音乐来自小辣椒空间https://www.mp3.wf/?4

liumang 发表于 2026-6-12 00:28

亚纶老师上传的免费空间打开速度慢，

liumang 发表于 2026-6-12 00:33

亚纶辛苦，这个帖的代码要这么多，

liumang 发表于 2026-6-12 00:33

感谢亚纶老师分享

liumang 发表于 2026-6-12 00:34

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-6-12 00:34

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-6-12 00:34

{:5_150:}{:5_150:}{:5_150:}

旋风 发表于 2026-6-17 10:40

{:5_150:}{:5_150:}{:5_150:}

查看完整版本: 恋曲1990