醉美水芙蓉 发表于 2026-5-8 18:23:55

就让岁月开成一朵花（深情版）

<meta charset="utf-8">
<style>
#papa{position: relative;
            width: 1186px;
            height: 640px;
            margin-left:-200px;
            margin-top: 0px;
            overflow: hidden;z-index:12345;
            background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2dabe37d35f3f21c585f573d7faa83a_preview.webp)no-repeat center/cover;
      }
zxx-slide {display: block;
width: 100%; height:100%;
    position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
    position: absolute;bottom: 0px;
   display: none;
}
.zxx-slide-a.in {
    z-index: 1;
}
.zxx-slide-img { width: 100%;
height:100%;object-fit: cover; pointer-events: none;
   display: block;}

.zxx-slide-index-x {
    position: absolute;
    left: 0px; right: 0; bottom: 0px;
    text-align: center;
    font-size: 0;
    z-index: 1;
}

@keyframes seed {
    0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
    -webkit-mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    -webkit-mask-size: 50px 50px;
    mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 50px 50px;
    animation: seed 1s;
}
.lyrics{margin: 0;z-index: 20;
            top: 89%;
            left: 50%;
    transform: translate(-50%, -50%);
            height: 100px; /* 调整高度，只容纳当前歌词 */
                 text-align: center;
             position: absolute;
      }
            .lyric-line{
            width: 100%;
            position: relative;
            height: 60px;
            overflow: visible;
   font: 300 50px '华文隶书', sans-serif;
            line-height: 60px;
         text-align: left;
            white-space: nowrap; /* 禁止换行 */
            
            filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
      }

      .lyric-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            overflow: hidden;
      color: #8B4513;
            height: 100%;
            white-space: nowrap;
      }

      .lyric-original {
             color: #ag0000;
            white-space: nowrap;
            
      }

#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
</style>
<divid="papa">
   <zxx-slide>
    <div class="zxx-slide-x">
      <p class="zxx-slide-a">
      
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/faacb5a448fd92f91ed930b8fa16f25b_preview.mp4" loop muted autoplay=""></video>
      </p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2dabe37d35f3f21c585f573d7faa83a_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
       <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4177c647558d2739e6b6d06f4cf7771c_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
       <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6c098757b3f1cf3d52dbac7ea87ee056_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a6fc28f10c6c4e661d72f4c1169c2583_preview.mp4" loop muted autoplay=""></video></p>
      <p class="zxx-slide-a">
         <video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b65fec1889f678ce9fc2e6280e7909c2_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/afdf16c7d4e8878a278c85c93cb1d4f8_preview.mp4" loop muted autoplay=""></video></p>
<p class="zxx-slide-a">
<video class="zxx-slide-img" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5a3e8c2eb81c6cf2bcd62dd32fe28edd_preview.mp4" loop muted autoplay=""></video></p>

    </div>
   </zxx-slide>
   <img id="mdiv"src="https://pic1.imgdb.cn/item/690c41ba3203f7be00db7fed.png">
<div class="lyrics" >
            <div class="lyric-line">
                  <div class="lyric-mask"></div>
                  <div class="lyric-original"></div>
                </div>
            </div>

</div>
<audio id="audio" src="https://mpimg.cn/view.php/79480c7cd90238b176576ebef4623412.mp3"loopautoplay ></audio>
<script>
mdiv.onclick = () => audio.paused ? audio.play(): audio.pause();
audio.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
audio.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

mdiv.style.animationPlayState = audio.paused ? 'paused' : 'running';

(function() {
      const vids = document.querySelectorAll('.zxx-slide-img');
      var mState = () => {
         vids.forEach(vid => audio.paused ? vid.pause(): vid.play() );
      };
audio.onplaying = audio.onpause = () => mState();
})();

</script>

<script>
var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
        var timerSlide = null;
        var indexSlide = 0;
        container.addEventListener('mouseover', function () {
                clearTimeout(timerSlide);funSlide();
        });
        container.addEventListener('mouseout', function () {
                clearTimeout(timerSlide);
                funSlide();
        });
       
        var eleSlides = [].slice.call(container.querySelectorAll('p'));
        var eleButtons = [].slice.call(container.querySelectorAll('button'));
        var funSlide = function() {
                eleSlides.forEach(function (slide, index) {        if(!audio.paused){               
                        if (indexSlide == index) {
                                slide.classList.add('in');
                                slide.style.display = 'block';
                        } else if (slide.classList.contains('in')) {
                                slide.classList.remove('in');
                        }}
                });
                eleButtons.forEach(function (button, index) {
                        button.classList.remove('active');
                        if (indexSlide == index) {
                                button.classList.add('active');
                        }
                });
               
                timerSlide = setTimeout(function () {
                        indexSlide++;
                        if (indexSlide == eleSlides.length) {
                                indexSlide = 0;
                        }
                        funSlide();
                }, 10000);
        }
       
        indexSlide++;

        setTimeout(funSlide, 48);
});

</script>

<script>
      // 歌词解析ksc歌词或lrc歌词
      const lrc = `就让岁月开成一朵花（深情版）
词曲：祝你发
演唱：福音姐
LRC编辑：醉美水芙蓉
放慢脚步 听一听耳边的风
半生光阴 轻的就像一场梦
不争不求 也不问人海匆匆
只想贪恋 此刻眼底的晴空
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
推开门窗 迎一抹夕阳的红
就让喧嚣 都留在烟雨之中
几分淡泊 换来一路的从容
烟火人间 且行且望且随风
就让岁月开成一朵花
人生啊又何处不芳华
任凭光阴流转
年轮又添笔画
爱在时光中轻轻发芽
就让岁月开成一朵花
等一场春风温柔抵达
带着知足上路
带着晚霞回家
爱在时光中轻轻发芽
爱在时光中轻轻发芽
谢谢欣赏！
`;
const audio = document.getElementById('audio');
      const lyrics = parseLyrics(lrc);
      const lyricMask = document.querySelector('.lyric-mask');
      const lyricOriginal = document.querySelector('.lyric-original');
      
      let currentIndex = -1;
      let currentLyric = null;
      
      // 解析歌词（支持两种格式）
      function parseLyrics(lrcText) {
            const lyrics = [];
            if (lrcText.includes('karaoke.add')) {
                const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
                let match;
                while ((match = lineRegex.exec(lrcText)) !== null) {
                  const startTime = timeToMs(match);
                  const endTime = timeToMs(match);
                  const text = match.replace(/\[|\]/g, '').trim();
                  const durations = match.split(',').map(Number);
                  if (text) {
                        lyrics.push({startTime, endTime, text, durations});
                  }
                }
            }
            else if (lrcText.includes('[')) {
                const lines = lrcText.split('\n').filter(line => line.trim());
                lines.forEach((line, index) => {
                  const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
                  if (timeMatch) {
                        const timeStr = timeMatch;
                        const text = line.replace(/\[.*?\]/, '').trim();
                        if (text) {
                            const startTime = timeToMs(timeStr);
                            const nextLine = lines;
                            const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
                            const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
                            lyrics.push({
                              startTime,
                              endTime,
                              text,
                              durations: calculateCharDurations(text, startTime, endTime)
                            });
                        }
                  }
                });
            }
            return lyrics;
      }
      function calculateCharDurations(text, startTime, endTime) {
            const totalDuration = endTime - startTime;
            const charCount = text.length;
            const baseDur = Math.floor(totalDuration / charCount);
            const durations = new Array(charCount).fill(baseDur);
            const remainder = totalDuration % charCount;
            for (let i = 0; i < remainder; i++) {
                durations++;
            }
            return durations;
      }
      function timeToMs(timeStr) {
            const parts = timeStr.split(':');
            const minutes = parseInt(parts, 10);
            const secondsAndMs = parts.split('.');
            const seconds = parseInt(secondsAndMs, 10);
            const ms = parseInt(secondsAndMs || 0, 10);
            return minutes * 60 * 1000 + seconds * 1000 + ms;
      }
      function getCurrentLyricIndex(lyrics, currentTimeMs) {
            for (let i = 0; i < lyrics.length; i++) {
                if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
                  return i;
                }
            }
            return -1;
      }
      function updateLyricDisplay(index) {
            if (index < 0 || index >= lyrics.length) return;
            currentIndex = index;
            currentLyric = lyrics;
            lyricOriginal.textContent = currentLyric.text;
            lyricMask.textContent = currentLyric.text;
            lyricMask.style.width = '0%';
      }
      function updateLyricMask(currentTimeMs) {
            if (!currentLyric) return;
            const lyricStartTime = currentLyric.startTime;
            const elapsed = currentTimeMs - lyricStartTime;
            const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
            let charIndex = 0;
            let accumulatedTime = 0;
            
            for (let i = 0; i < currentLyric.durations.length; i++) {
                accumulatedTime += currentLyric.durations;
                if (elapsed <= accumulatedTime) {
                  charIndex = i + 1;
                  break;
                }
            }
            
            if (elapsed >= totalDuration) {
                charIndex = currentLyric.text.length;
            }
            
            charIndex = Math.min(charIndex, currentLyric.text.length);
            
            const tempSpan = document.createElement('span');
            tempSpan.style.visibility = 'hidden';
            tempSpan.style.position = 'absolute';
            tempSpan.style.fontSize = '50px';
            tempSpan.style.fontWeight = '800';
            document.body.appendChild(tempSpan);
            
            const visibleText = currentLyric.text.substring(0, charIndex);
            tempSpan.textContent = visibleText;
            const width = tempSpan.offsetWidth;
            document.body.removeChild(tempSpan);
            
            lyricMask.style.width = `${width}px`;
      }
      
      // 监听更新歌词
      audio.addEventListener('timeupdate', () => {
            const currentTimeMs = audio.currentTime * 1000;
            const index = getCurrentLyricIndex(lyrics, currentTimeMs);
            
            if (index !== currentIndex) {
                updateLyricDisplay(index);
            }
            
            updateLyricMask(currentTimeMs);
      });
      updateLyricDisplay(0);


</script>

klxf 发表于 2026-5-8 20:18:38

漂亮~谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2026-5-8 20:59:25

klxf 发表于 2026-5-8 20:18
漂亮~谢谢醉美管理员精彩分享

问好友友晚上好！谢谢光临！
页: [1]
查看完整版本: 就让岁月开成一朵花（深情版）