归心似箭
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>归心似箭</title>
</head>
<body>
<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;--starfish-light: #ffb800; --shell-dark: #d9c9a3;--color-1: #e62134; --color-2: #ff3855; --color-3: #ff5a00; --color-4: #ffd100; --color-5: #ffb800; --color-6: #f87171; --color-7: #e83a59; --color-8: #fbbf24; --starfish-body: #e62134;--starfish-accent: #ffd100; --starfish-light: #fbb5b8;}
.pa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1280px;height: 780px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 1;background: #000 url('https://638183.freep.cn/638183/t24/w6/hvjx.webp') no-repeat center/cover;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";--state: running;}
ruby{font-size:3em;letter-spacing:10px;color:red;white-space:pre-wrap;font-family:SimHei;user-select:none;}
rt{font-size:.6em;padding:2px 0;letter-spacing:1px;color:Gold;}
#content{position:absolute;display:grid;place-items:center;top:180px;left:55px;z-index:5;height:auto;line-height:1.2;}
.video-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
#bgVideo {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position:center;}
.lyric-container {position: absolute;left: 50%;top:5%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 120px;width: 80%;text-align: center;}
.lyric-display {height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;}
.lyric-char {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin: 0 2px;text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);font-size: 3em;font-weight: 800;}
@keyframes charAppear {to {opacity: 1;transform: translateY(0);}}
#starfish-player {position: absolute;top: 180px;right:80px;width: 150px;height: 150px;filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));perspective: 800px;z-index: 1;transform-style: preserve-3d;cursor: pointer;margin: 1rem auto;}
#starfish-player:hover {perspective: 300px;filter: drop-shadow(0 0 40px rgba(255, 107, 107, .8)) hue-rotate(330deg);}
.starfish-3d { position: absolute; width: 100%; height: 100%; cursor: pointer; filter: drop-shadow(0 0 60px rgba(255, 215, 0, 0.4)); transform: rotateX(45deg) rotateY(-15deg) rotateZ(0); background: radial-gradient(circle at center, var(--starfish-body) 0%, var(--starfish-accent) 80%, #ffd700 100%); clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.5),0 0 40px rgba(255, 107, 107, 0.5); }
.starfish-3d::before { content: ''; position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; background: radial-gradient(circle at center, transparent 30%, rgba(255, 215, 0, 0.4) 30%, rgba(212, 175, 55, 0.2) 70%, transparent 70%); clip-path: inherit; }
.starfish-3d::after { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, transparent 80%, rgba(255, 215, 0, 0.9) 80%, transparent 85%), radial-gradient(circle at 70% 20%, transparent 80%, rgba(255, 215, 0, 0.9) 80%, transparent 85%), radial-gradient(circle at 20% 70%, transparent 80%, rgba(255, 215, 0, 0.9) 80%, transparent 85%), radial-gradient(circle at 80% 80%, transparent 80%, rgba(255, 215, 0, 0.9) 80%, transparent 85%); animation: twinkle 4s ease-in-out infinite alternate; }
.starfish-3d:hover{animation-play-state:paused !important;}
@keyframes swimColor { 0%, 100% { filter: drop-shadow(0 0 40px rgba(255, 107, 107, 0.8)) hue-rotate(0deg); } 50% { filter: drop-shadow(0 0 60px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 40px rgba(255, 107, 107, 0.9)) hue-rotate(30deg); } }
@keyframes twinkle { 0%, 100% {opacity: .5;} 50% {opacity: 1;} }
.playing .starfish-3d {animation: rot3d 3s linear infinite, swimColor 5s linear infinite, twinkle 1s ease-in-out infinite;}
.paused .starfish-3d {animation: none;transform: rotateX(45deg) rotateY(-15deg) rotateZ(0);}
@keyframes rot3d {to {transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg);}}
.starfish-sparkles {position: absolute;width: 100%;height: 100%;pointer-events: none;opacity: 1;transition: opacity 0.8s ease-out;}
.starfish-sparkles.fade-out {opacity: 0 !important;}
.sparkle {position: absolute;width: 6px;height: 6px;background-color: white;border-radius: 50%;filter: blur(1px);animation: sparkleFloat 3s ease-in-out infinite;opacity: 0;transition: all 0.6s ease-out;}
.sparkle.hidden {opacity: 0 !important;transform: translate(var(--tx, 30px), var(--ty, -40px)) scale(0);animation-play-state: paused;}
@keyframes sparkleFloat {0% {transform: translate(0, 0) scale(0);opacity: 0;}20% {opacity: 1;transform: translate(10px, -10px) scale(1);}80% {opacity: 1;transform: translate(30px, -30px) scale(1.2);}100% {transform: translate(50px, -50px) scale(1.5);opacity: 0;}}
.status-display {position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;background: linear-gradient(60deg, #ff0000, #ff0000, #ff4500, #ffd700, #00ff7f, #1e90ff, #9370db, #ff69b4);background-size: 400% 400%;-webkit-background-clip: text;background-clip: text;color: transparent;animation: rainbow 8s ease infinite;text-shadow: 0 1px 2px rgba(0,0,0,0.2);right:60px;top: 160px;padding: 6px 12px;border-radius: 20px;background-color: rgba(0, 0, 0, 0);backdrop-filter: blur(5px);transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0);min-width: 180px;text-align: center;white-space: nowrap;}
.status-display:hover {transform:scale(1.05);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);background-color: rgba(0, 0, 0, 0.5);}
@keyframes rainbow {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
.animated-image {display: block;cursor: pointer;position: absolute;left:30px;top:40px;z-index: 1;width: 100px;height: 100px;opacity: 0.9;animation:sway .8s linear infinite alternate var(--state);}
.animated-image:hover { filter: brightness(2) hue-rotate(120deg);transform:.5s;scale:1.1;animation-play-state: paused!important;}
@keyframes sway{0%{transform:rotate(-8deg);}100%{transform:rotate(8deg);}}
#fullscreen {position: absolute;bottom:30px;left:30px;font: normal 1.5em 楷体;color: #fff;text-shadow: 0 0 3px #000;opacity: 1;cursor: pointer;user-select: none;z-index: 98;transition: opacity 0.5s ease;}
#fullscreen:hover {font-style: italic;}
</style>
<div class="pa" id="pa">
<div class="video-bg">
<video id="bgVideo" src="https://upfile.mp3.wf/view.php/6a20df0c58fe370a301209ad677183d1.mp4" autoplay loop muted playsinline></video><metaname="referrer" content="never">
</div>
<div id="content">归心似箭</div>
<div class="status-display" id="statusDisplay">播放中: -2:20</div>
<div id="starfish-player" class="paused">
<div class="starfish-3d"></div>
<div id="sparkles-container" class="starfish-sparkles"></div>
</div>
<img id="animated-gif" class="animated-image" src="https://s3.bmp.ovh/imgs/2025/12/18/1e5f0527356ae5ea.png" alt=''/>
<div class="lyric-container">
<div id="lyricDisplay" class="lyric-display"></div></div>
<audio id="audioPlayer" src="https://www.joy127.com/url/143793.mp3" loop autoplay playsinline></audio>
<span id="fullscreen">全屏欣赏</span>
</div>
<script type="module">
const pa = document.getElementById('pa');
const fullscreenBtn = document.getElementById('fullscreen');
const audioPlayer = document.getElementById('audioPlayer');
const bgVideo = document.getElementById('bgVideo');
const starfishPlayer = document.getElementById('starfish-player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
const sparklesContainer = document.getElementById('sparkles-container');
const animatedGif = document.getElementById('animated-gif');
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(() => {
bgVideo.play();
window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();
bgVideo.pause();
window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
});
audioPlayer.addEventListener('pause', () => {
animatedGif.classList.remove('active');
});
function handlePlayerClick(e) {
e.stopPropagation();
togglePlayPause();
pa.style.setProperty('--state', audioPlayer.paused ? 'paused' : 'running');
starfishPlayer.title = audioPlayer.paused ? '播放' : '暂停';
animatedGif.title = audioPlayer.paused ? '播放' : '暂停';
}
starfishPlayer.addEventListener('click', handlePlayerClick);
animatedGif.addEventListener('click', handlePlayerClick);
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)','var(--color-7)', 'var(--color-8)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyric-char';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = ' ';
} 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}`;
}
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('pa').addEventListener(type, e => e.preventDefault())
);
const lrcText = `
归心似箭 - 邱刚
城市的霓虹灯闪烁不停
街头的喧嚣声渐渐远行
行李箱滚轮一路哼鸣
像是奏响回家的序曲音
雪花飘落在我的肩膀
寒冷中思念愈发地滚烫
故乡的炊烟在心底飘荡
那是家的方向把我照亮
沿途的风景飞速掠过
耳机里播放熟悉的老歌
想起儿时伙伴相聚时刻
笑声在记忆里不停穿梭
回家过年了
有钱没钱都要回家
家中的爸妈盼我到达
那温暖港湾是我的牵挂
回家过年了
抛下所有疲惫和繁杂
团圆的喜悦把心融化
这是我一年最期待的呀
列车缓缓驶入小站旁
熟悉的站台有了模样
出站口张望人群熙攘
寻找那熟悉亲切脸庞
远远看见爸妈的身影
眼眶忍不住渐渐泛红
他们的笑容满是深情
岁月在脸上留下了痕
回家过年了
有钱没钱都要回家
家中的爸妈盼我到达
那温暖港湾是我的牵挂
回家过年了
抛下所有疲惫和繁杂
团圆的喜悦把心融化
这是我一年最期待的呀
一年的奔波有苦有甜
在外的日子有泪有汗
但此刻一切都已消散
只因为家是永远的岸
回家过年了
有钱没钱都要回家
家中的爸妈盼我到达
那温暖港湾是我的牵挂
回家过年了
抛下所有疲惫和繁杂
团圆的喜悦把心融化
这是我一年最期待的呀
`;
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();
});
bgVideo.addEventListener('loadedmetadata', () => {
bgVideo.muted = isMuted;
});
audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
bgVideo.addEventListener('error', (e) => {
console.error('视频错误:', e);
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {
bgVideo.play();
window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
.catch(error => {
console.log('自动播放被浏览器阻止，需要用户交互:', error);
statusDisplay.textContent = '请点击按钮开始播放';
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
window.isPlaying = false;
});
}
document.addEventListener('click', () => {
if (audioPlayer.paused) {
tryAutoPlay();
}
}, { once: true });
let isFullscreen = false;
fullscreenBtn.onclick = () => {
if (!isFullscreen) {
fullscreenBtn.innerText = '退出全屏';
if (pa.requestFullscreen) {
pa.requestFullscreen();
} else if (pa.webkitRequestFullscreen) {
pa.webkitRequestFullscreen();
} else if (pa.msRequestFullscreen) {
pa.msRequestFullscreen();
}
} else {
fullscreenBtn.innerText = '全屏欣赏';
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
isFullscreen = !isFullscreen;
};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreenBtn.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
isFullscreen = !!document.fullscreenElement;
fullscreenBtn.innerText = isFullscreen ? '退出全屏' : '全屏欣赏';
});
document.addEventListener('webkitfullscreenchange', () => {
isFullscreen = !!document.webkitFullscreenElement;
fullscreenBtn.innerText = isFullscreen ? '退出全屏' : '全屏欣赏';
});
import { html } from 'https://638183.freep.cn/638183/web/py/pypro.js';
const addPinyin = () => {
const contentElem = document.getElementById('content');
const originalText = contentElem.textContent.trim();
contentElem.innerHTML = html(originalText);
const rubyElems = contentElem.querySelectorAll('ruby');
const rtElems = contentElem.querySelectorAll('rt');
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', addPinyin);
} else {
addPinyin();
}
</script>
</body>
</html>
素材来自深秋红枫老师分享作品，在此表示感谢~
归心似箭正是年前人们的心态呢。
制作漂亮，欣赏扬帆好帖{:4_199:} 漂亮，欣赏燕学习。 很漂亮，有一点你的歌词字体电脑和手机欣赏都独特，请你说出秘诀！ 我乍没看到歌词呢。{:4_181:} 红影 发表于 2026-2-8 21:18
归心似箭正是年前人们的心态呢。
制作漂亮，欣赏扬帆好帖
问好影子，谢谢鼓励，祝马年大吉、安康幸福{:4_204:} 姚云裳 发表于 2026-2-8 21:20
漂亮，欣赏燕学习。
问好云裳，谢谢鼓励，祝马年大吉、安康幸福{:4_204:} 亚伦影音工作室 发表于 2026-2-9 08:15
很漂亮，有一点你的歌词字体电脑和手机欣赏都独特，请你说出秘诀！
谢谢亚伦老师鼓励，没秘诀呀，只是引入了马善正的书法字体{:4_171:} 樵歌 发表于 2026-2-9 08:21
我乍没看到歌词呢。
浏览器原因？我这儿显示正常呀，祝樵歌管理员马年大吉、幸福安康{:4_171:} 杨帆 发表于 2026-2-9 13:09
谢谢亚伦老师鼓励，没秘诀呀，只是引入了马善正的书法字体
但是我用了却没有这样的效果！ 亚伦影音工作室 发表于 2026-2-9 13:24
但是我用了却没有这样的效果！
老师在哪用了？没看到呀{:4_190:} 杨帆 发表于 2026-2-9 16:19
老师在哪用了？没看到呀
.lyric-container 亚伦影音工作室 发表于 2026-2-9 17:36
.lyric-container
也许是覆盖了？该贴是用在主容器.pa
页:
[1]