论坛 › 欢乐水吧 › 喜迎中国年【欢迎填词】

亚伦影音工作室 发表于 2026-2-15 11:46

喜迎中国年【欢迎填词】

本帖最后由 亚伦影音工作室 于 2026-2-15 17:58 编辑 <br /><br /><style>
: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;}
.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://pic1.imgdb.cn/item/69913933958d3f0ea4867843.webp') no-repeat center/cover;font-family: '楷体', Arial, sans-serif;--state: running;}
.player-title {position: absolute;top: 8%;left: 10%;text-align: center;font-size: 25pt;filter: drop-shadow(1px 2px 1px #080808);color: #fff888;line-height: 100%;font-family: "华文新魏", cursive;z-index: 2;}
#papa{
width: 100%; height: 100%;
    background: url("https://pic1.imgdb.cn/item/69914ddd00a52e056d20532f.jpg")no-repeat;
position: absolute;
    top: 0px;
    left: 0px;z-index: -1;
animation: c 6s linear infinite, rotd 2s linear infinite ;
background-size: cover;
}
@keyframes c {
   30%{transform: scale(1);opacity: 1;
    }
0%{transform: scale(4);opacity: 0;
    }
   
}
.lyric-container {position: absolute;left:5%;top: 150px;z-index: 12;height: 650px;width: 40px;font-family: 'MaShanZheng-Regular', Arial, sans-serif;font-size: 2em;}
.lyric-display {overflow: hidden;position: absolute;padding: 0 0px;animation: rotd 1s linear infinite ;white-space: pre;writing-mode: vertical-lr;}
.lyric-char {height: 100%;display: inline-block;opacity: 0;animation: charAppear 0.5s forwards;margin:0px;text-shadow: 1px 2px 1px rgba(0, 0, 0, 1);}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}
@keyframes rotd {to {filter: hue-rotate(360deg);}}
#starfish-player {position: absolute;top: 30%;right: 72%;width: 220px;height: 220px;z-index: 100;transform-style: preserve-3d;cursor: pointer;margin: 1rem auto;}

.starfish-3d {position: absolute;width: 100%;height: 100%;cursor: pointer;display: grid;place-items: center;}
#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);
}
.playing .starfish-3d {animation: rot3d 8s linear infinite, swimColor 5s linear infinite, twinkle 1s ease-in-out infinite;}
.paused .starfish-3d {animation: none;}

.starfish-3d::after {content: '';position: absolute;width: 100%;height: 100%;animation: twinkle 3s ease-in-out infinite alternate;}
@keyframes twinkle {0%, 100% {opacity: .5;}50% {opacity: 1;}}
@keyframes rot3d {to {transform:rotateZ(360deg);}}
@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, 107, 107, 0.9)) hue-rotate(30deg);}}
.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.2em;font-weight: 500;background: linear-gradient(90deg, #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);left: 25%;top: 15%;transform: translateX(-50%);padding: 6px 12px;border-radius: 20px;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0);}
.status-display:hover {transform: translateX(-50%) scale(1.05);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);}
@keyframes rainbow {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

#fullscreen {position: absolute;top: 30px;right: 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;}

.chooseBtn { opacity: 0;z-index:31;}
      .g-container{top:-160px; left:0px;z-index: -1;
display: inline-block;   vertical-align: middle;
perspective: 4px;mix-blend-mode: lighten;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}

.g-container{
display: inline-block;
vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}


.g-group{
position: absolute;
/*   perspective: 4px; */
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 12s infinite linear var(--state);
animation-fill-mode: forwards;
}

.item {
position: absolute;
width: 100%;
height: 100%;
background:url(https://pic.imgdb.cn/item/67680391d0e0a243d4e80f3a.png),url(https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png);
background-size: cover;

opacity: 1;
animation: fade 12s infinite linear var(--state);
animation-delay: 0;
}

.g-group:nth-child(2) .item {
animation-delay: -6s;
}

.item-right {
transform: rotateY(90deg) translateZ(500px);
}

.item-left {
transform: rotateY(-90deg) translateZ(500px);
}

.item-top {
transform: rotateX(90deg) translateZ(500px);
}

.item-bottom {
transform: rotateX(-90deg) translateZ(500px);
}

.item-middle {
transform: rotateX(180deg) translateZ(1000px);
}

@keyframes move {
0%{
    transform: translateZ(-500px) rotate(0deg);
}
100%{
    transform: translateZ(500px) rotate(0deg);
}
}

@keyframes fade {
0%{
    opacity: 0;
}
25%,
60%{
    opacity: 1;
}
100%{
    opacity: 0;
}
}

@keyframes hueRotate {
0% {
    filter: hue-rotate(0);
}
100% {
    filter: hue-rotate(360deg);
}
}

</style>
<div class="pa" id="pa">
<input type="checkbox"   class="chooseBtn" />
<div class="g-container">
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>
      <div class="item item-middle"></div>   
</div>
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>   
</div>
</div>
<div class="player-title"> 喜迎中国年【欢迎填词】</div>
<div id="papa"></div>
<div class="status-display" id="statusDisplay">播放中: -2:20</div>
<div id="starfish-player" class="paused">
<div class="starfish-3d">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>
<div id="sparkles-container" class="starfish-sparkles"></div>
</div>
<div class="lyric-container">
<div id="lyricDisplay" class="lyricDisplay"></div>
</div>
<audio id="audioPlayer" src="https://s2.ananas.chaoxing.com/sv-w7/audio/82/1b/05/60a785d07d03923f3878724a4a330a9c/audio.mp3" loop autoplay playsinline></audio>
<span id="fullscreen">全屏欣赏</span>
<div>

</div>
</div>
<script>
const pa = document.getElementById('pa');
const fullscreenBtn = document.getElementById('fullscreen');
const audioPlayer = document.getElementById('audioPlayer');

const starfishPlayer = document.getElementById('starfish-player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');
const sparklesContainer = document.getElementById('sparkles-container');


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 = `
喜迎中国年（对唱版）
【欢迎填词】

`;
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();
})
.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 ? '退出全屏' : '全屏欣赏';
});

let mState = () => audioPlayer.paused ? (papa.style.animationPlayState = 'paused',lyricDisplay.style.animationPlayState = 'paused') : (papa.style.animationPlayState = 'running',lyricDisplay.style.animationPlayState = 'running');

audioPlayer.addEventListener('play', () => mState());
audioPlayer.addEventListener('pause', () => mState());

</script>

亚伦影音工作室 发表于 2026-2-15 11:49

图片没有处理显示是鼠年！

杨帆 发表于 2026-2-15 11:55

精彩吉祥喜庆，祝福亚伦老师新春快乐，马年大吉{:4_176:}

梦油 发表于 2026-2-15 14:14

隔了这么多天又看到了亚伦朋友的杰作真高兴。祝亚伦朋友身体健康。保重！

查看完整版本: 喜迎中国年【欢迎填词】