醉美水芙蓉 发表于 2026-3-16 22:39:44

来生别再相遇

<meta charset="utf-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #fff887;--color-2: #fc89e5;--color-3: #fd27d2;--color-4: #9cf9fc;--color-5: #0dd7de;--color-6: #fbcb6d;--color-7: #fb8739;--color-8: #fa5f57;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1260px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;background: #000 url(https://pic.3gbizhi.com/uploadmark/20200820/d115907ac26c0e30c1cc0c2379865e25.webp) no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
      .intro {margin: 0px0px;z-index:1;
      width: 100%;
      height:100%;
      position: absolute;
background: url(https://bbs.cnzv.cc/up/upload/pic/12/20260316-ff1fe7aabceee7844217b83b8935d14f.jpg), linear-gradient(45deg, #e56420, #c555aa, #3d9c31, #37bbde);
background-size: cover;
background-blend-mode: hard-light;
animation: hue-rotate 2s linear infinite;
}
@keyframes hue-rotate {
from {
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}

.lyric-container {position: absolute;left: 50%;bottom: 3%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 160px;width: 80%;text-align: center;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
.lyric-display {height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;animation:rotd 0.5s linear infinite}
.lyric-char {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin: 0 2px;font-size: 3em; }
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
#player{position:absolute;top: 42%;z-index: 99;
            left: 83%;
width: 200px;
height: 200px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 25%;top: 15%;color:#000}

#fullscreen{border-radius: 4px;position: absolute;
color:#000;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 18px;
border: none;
cursor: pointer;top: 5px;left: 3%;
}
</style>
<div id="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div class='intro'></div>
<divid="statusDisplay">播放中: -2:20 </div>

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>

<div class="lyric-container">
<div id="lyricDisplay" class="lyric-display"></div>
</div>
<audio id="aud" src="https://www.joy127.com/url/146271.mp3" loop autoplay ></audio>
</div>
<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random() * 100;
const y = Math.random() * 100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random() * 2}s`;
sparkle.style.setProperty('--tx', `${(Math.random() - 0.5) * 80}px`);
sparkle.style.setProperty('--ty', `${(Math.random() - 0.5) * 80}px`);
sparklesContainer.appendChild(sparkle);
setTimeout(() => {
if (sparkle && !sparkle.classList.contains('hidden')) {
sparkle.remove();
}
}, 3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();

window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();
togglePlayPause();
});
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)', 'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyric-char';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
const lrcText = `来生别再相遇
LRC编辑：醉美水芙蓉
本以为爱上你
往后的余生不再分离
可现实不如意
你为何后来变了心
耗尽所有爱意
只能把甜蜜锁进回忆
流着泪想着你
怀念着过去幸福点滴
来生不会轻易再付出真心
今生已是悲伤的结局
明明我们爱过却各奔东西
最后只剩被伤的心
是你一直不珍惜
真心碎一地痛彻心底
来生别再相遇
不愿再经历后会无期
本以为爱上你
往后的余生不再分离
可现实不如意
你为何后来变了心
耗尽所有爱意
只能把甜蜜锁进回忆
流着泪想着你
怀念着过去幸福点滴
来生不会轻易再付出真心
今生已是悲伤的结局
明明我们爱过却各奔东西
最后只剩被伤的心
是你一直不珍惜
真心碎一地痛彻心底
来生别再相遇
不愿再经历后会无期
来生不会轻易再付出真心
今生已是悲伤的结局
明明我们爱过却各奔东西
最后只剩被伤的心
是你一直不珍惜
真心碎一地痛彻心底
来生别再相遇
不愿再经历后会无期
谢谢欣赏！

`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');

starfishPlayer.classList.add('paused');

statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});

audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };
const intro= document.querySelector('.intro');
let mState = () => aud.paused ? (player.style.animationPlayState = 'paused',intro.style.animationPlayState = 'paused',lyricDisplay.style.animationPlayState = 'paused' ) : (player.style.animationPlayState = 'running',intro.style.animationPlayState = 'running',lyricDisplay.style.animationPlayState = 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

klxf 发表于 2026-3-17 16:26:56

视听盛宴，谢谢分享

醉美水芙蓉 发表于 2026-3-17 21:52:06

klxf 发表于 2026-3-17 16:26
视听盛宴，谢谢分享

谢谢友友支持！

蓝叶 发表于 2026-3-20 08:36:12

感谢分享，带来满满惊喜

suiyueruge 发表于 2026-3-21 21:23:20

支持佳作，期待佳作频出

lanseyuanwei 发表于 2026-3-24 14:52:19

支持发布，内容超有亮点啦

deguidao 发表于 7 天前

很棒的分享，必须点赞

xianyina 发表于 5 天前

支持分享，内容超级棒呢

aqady 发表于 3 天前

感谢分享，引发无限遐想

dengfangmian 发表于 14 小时前

感谢分享，增长不少见识
页: [1]
查看完整版本: 来生别再相遇