论坛 › 动画音画 › 宁菲儿-梨花悠悠香

亚伦影音工作室 发表于 2025-11-4 14:27

宁菲儿-梨花悠悠香

本帖最后由 亚伦影音工作室 于 2025-11-4 17:37 编辑 <br /><br /><style>
#papa{position: relative;
            width: 1286px;
            height: 720px;
            margin-left: -300px;
            margin-top: 10px;
            overflow: hidden;z-index:12345;
            background:url(https://pic1.imgdb.cn/item/68625f9658cb8da5c87f755d.jpg)no-repeat center/cover;
      }
#pBlk {background: url(https://pic1.imgdb.cn/item/6805ade358cb8da5c8ba9e03.webp)no-repeat center/cover;
        width:100%;
        height:100%;
        position:relative;
        margin:auto;
        top:0%;

}
#pBlk div {
        background-size:1286px 720px;
background-repeat: no-repeat center/cover;
        float:left;
}
      .lyrics-container {font:400 2em 华文隶书;
            width: 340px;
            height: 400px;
            overflow: hidden;
            position:absolute;
            top: 35%;
            left: 2%;
          filter:drop-shadow(#000 1px 2px 1px);
            padding: 20px;
            box-sizing: border-box;
            z-index: 3;
      }
      
      .lyrics-wrapper {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: row-reverse;
            height: calc(100% - 40px);
            transition: transform 0.5s ease;
      }
      
      .lyrics-column {
            writing-mode: vertical-rl;
            text-orientation: upright;
            line-height: 1.2;
            margin-left: 8px;
            height: 100%;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(280px)translateX(-250px)rotate(100deg)scale(1.2);
            transition: opacity 1s, transform 1s;
            color: #00ff00 !important;
      }
      
      .lyrics-column.active {
            opacity: 1;transform:scale(1);
            transform: translate(0);
      }
      
      .lyrics-column .line {
            margin-bottom: 15px;
      }
      
      .lyrics-column .line.active {
            color: #fff000 !important;
      }

      
      #currentTime{font:normal 20px 华文隶书;
position: absolute;
            left: 20px;
            top: 20px;
      color: #ffffff ;z-index: 40;
      }
#player {
        position: absolute;z-index: 40;
        left:85%;
        bottom: 50px;
        width: 150px;
        height: 150px;
         opacity: 1;
        transition: .4s;
display: grid;
        place-items: center;
        --sp1: 0; --sp2: 1;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        cursor: pointer;
        transition: .4s;
}
#player::before {width: 150px;height: 150px;background:url(https://pic.imgdb.cn/item/65f0d8669f345e8d03ff5c34.png)no-repeat center/cover;
        opacity: var(--sp1);}
#player::after {width: 150px;height: 150px;background:url(https://pic.imgdb.cn/item/65f0d8299f345e8d03ff0b31.gif)no-repeat center/cover;
        opacity: var(--sp2);}
    </style>

   <divid="papa">
<div id='pBlk'></div>
<div id="currentTime">00:00</div>
    <div class="lyrics-container">
      <div class="lyrics-wrapper" id="lyricsWrapper"></div>
</div>
<div id="player" title="暂停/播放" ></div>
    </div>
   
    <audio id="audio" src="https://s2.cldisk.com/sv-w7/audio/bc/9f/43/3ddd15f3f0f2dec94b693ca7688c9c05/audio.mp3"autoplay loop></audio>
   
<script>
       document.addEventListener('DOMContentLoaded', function() {

    const currentTimeDisplay = document.getElementById('currentTime');

    const lyricsWrapper = document.getElementById('lyricsWrapper');
    const lyricsContainer = document.querySelector('.lyrics-container');

   
    // LRC歌词数据
    const lrc = `宁菲儿-梨花悠悠香
亚伦影音
深院倩影暗自殇
斜阳透纱窗
梨花满地黄昏尽
叫人寸断肠
花开花落花无情
红尘之爱梦一场
一阵清风把花扬
花落花飞花凋零
皆是为情伤
人生世事皆无常
红颜难久长
相思白首共沧桑
叫人泪成双
落花有意流水无情
一片花瓣一段伤
浮生若梦笑痴狂
且把泪妆换红妆
梨花悠悠香
落花有意流水无情
一片花瓣一段伤
浮生若梦笑痴狂
且把泪妆换红妆
梨花悠悠香

`;
   
    // 解析LRC歌词
    function parseLRC(lrcText) {
      const lines = lrcText.split('\n');
      const result = [];
      
      for (const line of lines) {
            const timeMatch = line.match(/^\[(\d+):(\d+)\.(\d+)\](.*)/);
            if (timeMatch) {
                const minutes = parseInt(timeMatch);
                const seconds = parseInt(timeMatch);
                const hundredths = parseInt(timeMatch);
                const text = timeMatch.trim();
               
                const time = minutes * 60 + seconds + hundredths / 100;
                result.push({ time, text });
            }
      }
      
      return result;
    }
   
    const lyrics = parseLRC(lrc);
    let currentLyricIndex = 0;
   
    // 创建新歌词列
    function createNewLyricsColumn(text) {
      const column = document.createElement('div');
      column.className = 'lyrics-column';
      
      const line = document.createElement('div');
      line.className = 'line';
      line.textContent = text;
      column.appendChild(line);
      
      lyricsWrapper.insertBefore(column, lyricsWrapper.firstChild);
      
      // 激活列动画
      setTimeout(() => {
            column.classList.add('active');
      }, 100);
      
      // 激活行高亮
      setTimeout(() => {
            line.classList.add('active');
      }, 500);
      
      return column;
    }
   
    // 计算容器能容纳多少列
    function calculateMaxColumns() {
      const containerWidth = lyricsContainer.clientWidth - 40;
      const columnWidth = 30;
      return Math.floor(containerWidth / columnWidth);
    }
   
    let maxColumns = calculateMaxColumns();
   

    window.addEventListener('resize', function() {
      maxColumns = calculateMaxColumns();
    });
   
    // 显示歌词
    function displayLyric(text) {
      // 创建新列
      const newColumn = createNewLyricsColumn(text);
      
      // 如果列数超过最大值，移除最左边的列
      if (lyricsWrapper.children.length > maxColumns) {
            const lastColumn = lyricsWrapper.lastChild;
            lastColumn.style.opacity = '0';
            lastColumn.style.transform = 'translateX(20px)';
            
            // 动画结束后移除
            setTimeout(() => {
                lyricsWrapper.removeChild(lastColumn);
            }, 500);
      }
    }
   
    // 重置歌词显示
    function resetLyrics() {
      lyricsWrapper.innerHTML = '';
      currentLyricIndex = 0;
    }
               
    // 更新进度条和时间显示（使用负数递减模式）
    audio.addEventListener('timeupdate', function() {
      const currentTime = audio.currentTime;
      const duration = audio.duration || 1;
      // 更新进度条(已隐藏）
      
   const remainingTime = duration - currentTime;
      currentTimeDisplay.textContent = `-${formatTime(remainingTime)}`;
      
      
      while (currentLyricIndex < lyrics.length && currentTime >= lyrics.time) {
            displayLyric(lyrics.text);
            currentLyricIndex++;
      }
    });
   
    // 音频开始播放时重置歌词
    audio.addEventListener('play', function() {
      if (audio.currentTime === 0) {
            resetLyrics();
      }
    });
   
    // 格式化时间显示
    function formatTime(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }
   
});
   
player.addEventListener('click', () => audio.paused ? audio.play() : audio.pause());
let mState = () => audio.paused ? (player.style.setProperty('--sp1','1'), player.style.setProperty('--sp2','0')) : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'));
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());

</script>
<script>
      var pics = [
"https://pic1.imgdb.cn/item/66933654d9c307b7e920b911.png",
"https://pic1.imgdb.cn/item/66936b4cd9c307b7e9613d20.png",
"https://pic1.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg",
"https://pic1.imgdb.cn/item/6808726458cb8da5c8c46fb9.jpg",
"https://pic1.imgdb.cn/item/67715fc5d0e0a243d4ec3384.png",
"https://pic1.imgdb.cn/item/67453531d0e0a243d4d0ccd4.jpg",
"https://pic1.imgdb.cn/item/6741e211d29ded1a8c23a407.webp",
"https://pic1.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg",
"https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp",
"https://pic1.imgdb.cn/item/65db15639f345e8d03a78720.jpg",
"https://pic1.imgdb.cn/item/67162491d29ded1a8c210f14.jpg",
"https://pic1.imgdb.cn/item/6713a87cd29ded1a8ccbc781.jpg"
];
      let bw = pBlk.clientWidth / 15, bh = pBlk.clientHeight / 15;
      let picIdx = 0;          
      for (var i = 0; i < 15; i++) {
      for (var j = 0; j < 15; j++) {
          var oDiv = document.createElement('div');
          oDiv.style.backgroundImage = `url(${pics})`;
          //oDiv.style.backgroundRepeat = `no-repeat`;
          oDiv.style.backgroundPosition = -j * bw + 'px ' + (-i * bh) + 'px';
          oDiv.style.width = bw + 'px';
          oDiv.style.height = bh + 'px';
          oDiv.style.transition = (1 + Math.random()) + 's';
          //oDiv.style.float = 'left';
          pBlk.appendChild(oDiv);
      }
      };
      var allDiv = pBlk.querySelectorAll('div');
      var t = null
          let chgPic = () => {
      let index = allDiv.length - 1;
      picIdx++; picIdx %= pics.length;
      t = setInterval(function() {if(!audio.paused){
          if (index == -1) {
            clearInterval(t);
            allDiv.forEach(aDiv => {
            aDiv.style.opacity = 1;
            aDiv.style.transform = 'translate(0px,0px)'
            });
            return;
          }
          allDiv.style.backgroundImage = `url(${pics})`;
          allDiv.style.transform = 'translate(0px,200px)';
          allDiv.style.opacity = 0;
          index--;}
      }, 10);
                setTimeout(chgPic, 10000);
      }
      chgPic();          

</script>

杨帆 发表于 2025-11-4 17:41

制作精致，画面清新，效果惊艳，恭贺亚伦老师再创新作{:4_176:}

樵歌 发表于 2025-11-4 19:50

画好看歌好听，制作精彩！

小辣椒 发表于 2025-11-4 21:53

亚纶这个歌词我很喜欢的，很奇怪，上次我做了一个，居然发了帖歌词没有出来了，没有成功。就没有发了

小辣椒 发表于 2025-11-4 21:57

看了你的发帖知道我什么原因了，换首音乐再发，前面那首音乐已经用了

红影 发表于 2025-11-5 13:20

漂亮的图片轮播效果，给亚伦老师点赞。{:4_199:}
这个歌词同步的方式也很奇妙，新的一句是从下面转上来的呢。

老谟深虑 发表于 2025-11-6 19:24

         欣赏老师的新作，学习了！

查看完整版本: 宁菲儿-梨花悠悠香