醉美水芙蓉 发表于 2025-11-23 16:47:32

微光

<meta charset="UTF-8">
<style>
#papa{position: relative;
            width: 1286px;
            height: 726px;
            margin-left:   -150px;
            margin-top: 10px;
            overflow: hidden;z-index:12345;
            background:linear-gradient(45deg, #e56420, #c22525, #3d9c31, #000078);
      }
       zxx-slide {display: block;

   width: 100%; height:105%;
    position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
    position: absolute;bottom: 0px;background:linear-gradient(45deg, #e56420, #c22525, #3d9c31, #000078);
   display: none;
}
.zxx-slide-a.in {
    z-index: 1;
}
.zxx-slide-img { position: absolute;
height:100%;width: 100%;z-index: -1;
   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: 60px 60px;
    mask: radial-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
    mask-size: 60px 60px;
    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:10%;cursor: pointer;width:100px;height: 100px;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"><img class="zxx-slide-img" src="https://bbs.cnzv.cc/up/upload/pic/12/20251123-53745b20ad63d1ebc00dd1ba1e3a7d43.jpg"></p>
<p class="zxx-slide-a"><img class="zxx-slide-img" src="https://bbs.cnzv.cc/up/upload/pic/12/20251123-53745b20ad63d1ebc00dd1ba1e3a7d43.jpg"></p>

    </div>
   </zxx-slide>
   <img id="mdiv"src="https://bbs.cnzv.cc/up/upload/pic/12/20250920-27a103a283bff2ccdb31044e1ef87fdb.gif">
<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://www.joy127.com/url/138380.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';

</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);
        });
        container.addEventListener('mouseout', function () {
                clearTimeout(timerSlide);
                funSlide();
        });
       
        var eleSlides = [].slice.call(container.querySelectorAll('p'));
       
        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');
                        }
                }});
               
               
                timerSlide = setTimeout(function () {
                        indexSlide++;
                        if (indexSlide == eleSlides.length) {
                                indexSlide = 0;
                        }
                        funSlide();
                }, 3000);
        }
       
        indexSlide++;

        setTimeout(funSlide, 1500);
});

</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 发表于 2025-11-24 12:08:27

好听好看，谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2025-11-24 21:29:18

klxf 发表于 2025-11-24 12:08
好听好看，谢谢醉美管理员精彩分享

谢谢友友光临！

菜鸟 发表于 7 天前

支持博主，分享太精彩咯

rencaizhengce 发表于 4 天前

感谢分享，充满生活情趣

juminsheng 发表于 昨天 13:23

感谢分享，带来新的灵感
页: [1]
查看完整版本: 微光