论坛 › 欢乐水吧 › 一生只爱你一人

亚伦影音工作室 发表于 2025-10-7 20:43

一生只爱你一人

本帖最后由 亚伦影音工作室 于 2025-10-9 05:21 编辑 <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;
      }

.vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover;
pointer-events: none;
opacity: 0;
animation: round 100s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
15% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}

      .lyrics-container {font:400 2.4em 华文隶书;
            width: 500px;
            height: 400px;
            overflow: hidden;
            position:absolute;
            top: 15%;
            left: 30%;
          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);
            transition: opacity 1s, transform 1s;
            color: #00aa00 !important;
      }
      
      .lyrics-column.active {
            opacity: 1;
            transform: translate(0);
      }
      
      .lyrics-column .line {
            margin-bottom: 15px;
      }
      
      .lyrics-column .line.active {
            color: #fff !important;
      }
      #currentTime{font:normal 20px 华文隶书;
position: absolute;
            left: 20px;
            top: 20px;
      color: #ffffff ;z-index: 40;
      }
#player {
        position: absolute;z-index: 40;
        left:15px;
        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="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/38/V-683870-A46701AA.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/33/V-633383-30DC563A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/39/V-683930-F83FB939.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/60/82/V-zip-20230301_DV_236-A4FE233A.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/38/V-643838-12FDD7EF.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/34/V-683439-1EC32204.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/66/90/V-669013-5BB29249.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/67/76/V-677685-0A5CEF2F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/68/34/V-683499-BC2609DE.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/00/00/68/69/51miz_V686945_NWMKWjmE7.mov" loop muted autoplay=""></video>

<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://upfile.mp3.wf/view.php/22ace5ab209ec7ec723f7957da164767.mp3"autoplay ></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')}`;
    }
   
});
    </script>

<script>
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());


(function() {var image = document.getElementById("testImg");
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => audio.paused ? (vid.pause(),image.classList.add('stop') ): (vid.play(),image.classList.remove('stop')) );
      };
audio.onplaying = audio.onpause = () => mState();
})();


</script>

小辣椒 发表于 2025-10-7 20:46

亚纶这个效果特别棒{:4_178:}

看见那个谁的，发现亚纶的漂亮多了

小辣椒 发表于 2025-10-7 20:50

昨天几个朋友在一起聊这个竖歌词的出来，发现亚纶的设计更加完美

小辣椒 发表于 2025-10-7 20:53

感谢亚纶精彩分享，小辣椒没有时间玩，先收藏代码

红影 发表于 2025-10-7 21:57

非常温暖柔情的画面，这个制作好美。
欣赏亚伦老师好帖{:4_199:}

寒冬残荷 发表于 2025-10-8 15:26

精美的制作！欣赏，点赞！学习！

老谟深虑 发表于 2025-10-8 18:29

         欣赏老师新作，收藏学习。晚上好！

杨帆 发表于 2025-10-8 23:30

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

查看完整版本: 一生只爱你一人