祝小九生日快乐
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 81px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/04/01/69ccfae884218.gif') no-repeat center/cover;
--ma-size: 12%;
width: 1400px;
height: 788px;
position: relative;
overflow: hidden;
}
/* 清除潜在水印伪元素 */
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 【关键修改】歌词容器样式 */
#custom-lrc-container {
position: absolute;
top: 30px; /* 保持你原来的顶部距离 */
left: 0;
width: 100%;
text-align: center;
z-index: 9999;
pointer-events: none;
/* 关键：设置一个固定高度，防止布局跳动，但内部元素绝对定位 */
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
/* 每一句歌词的样式 */
.lrc-line {
position: absolute; /* 绝对定位，让所有歌词重叠在同一位置 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
white-space: nowrap; /* 防止换行 */
color: #fefefe;
font-size: 28px; /* 字体大小 */
font-weight: bold;
text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 阴影加深，确保在亮背景下可见 */
opacity: 0; /* 默认完全透明（隐藏） */
transition: opacity 0.5s ease, transform 0.5s ease; /* 淡入淡出动画 */
margin: 0;
top: 0; /* 垂直对齐顶部 */
}
/* 当前正在播放的那一句 */
.lrc-line.active {
opacity: 1; /* 变为完全不透明（显示） */
transform: translateX(-50%) scale(1.1); /* 稍微放大一点效果 */
z-index: 10;
}
</style>
<div class="pa">
<!-- 纯净的歌词容器 -->
<div id="custom-lrc-container"></div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
// 添加音频、视频、图片等
tz.add('audio', '', '', { src: 'http://cccimg.com/view.php/2ef3bb58fe2b870a1eb9ff6dd0ea47ef.mp3' });
tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.5;');
tz.add('img', '', 'ma', { src: 'https://ff.xiaoqiaodali.top:5401/i/2026/04/01/69ccfd3824de7.png' }).style('bottom: 60px;').playmp3();
tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `祝小九生日快乐
霜染枫丹恭祝
祝你生日快乐祝你生日快乐
祝你幸福祝你健康
祝你前途光明
祝你生日快乐祝你生日快乐
祝你幸福 祝你健康
祝你前途光明
今天你生日送上我祝福
特别的日子有灿烂的笑容
我们来相聚带着满满的关爱
祝福你好运常伴
点燃了蜡烛 许下你心愿
未来的日子每个梦想都实现
唱首祝福歌 我们相亲又相爱
祝福你健康平安
对所有的烦恼说拜拜
对所有的快乐说嗨嗨
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远幸福永远
点燃了蜡烛许下你心愿
未来的日子每个梦想都实现
唱首祝福歌我们相亲又相爱
祝福你健康平安
对所有的烦恼说拜拜
对所有的快乐说嗨嗨
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远幸福永远
生日快乐生日快乐
对所有的烦恼说拜拜
对所有的快乐说嗨嗨
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐祝
幸福永远 幸福永远`;
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
const lines = [];
// 解析歌词
const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
const rawLines = lrcText.split('\n');
rawLines.forEach(text => {
const match = text.match(lineRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const milliseconds = parseInt(match);
const time = minutes * 60 + seconds + milliseconds / 1000;
const content = match.trim();
if (content) {
lines.push({ time, content, element: null });
}
}
});
// 生成 DOM：所有歌词都创建出来，但默认透明
lines.forEach((line) => {
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = line.content;
container.appendChild(div);
line.element = div;
});
// 获取音频元素
const audio = document.querySelector('.pa audio');
if (audio) {
// 初始状态：如果还没开始播放，可以显示第一句或者全隐藏
// 这里选择全隐藏，等播放开始
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
let activeIndex = -1;
// 查找当前应该显示的歌词索引
for (let i = 0; i < lines.length; i++) {
if (currentTime >= lines.time) {
activeIndex = i;
} else {
break;
}
}
// 切换显示状态
lines.forEach((line, idx) => {
if (idx === activeIndex) {
// 当前句：显示
if (!line.element.classList.contains('active')) {
line.element.classList.add('active');
}
} else {
// 其他句：隐藏
if (line.element.classList.contains('active')) {
line.element.classList.remove('active');
}
}
});
});
// 监听播放结束，清空状态
audio.addEventListener('ended', () => {
lines.forEach(line => line.element.classList.remove('active'));
});
}
}
// 延迟初始化，确保 audio 标签已存在
setTimeout(() => {
const audioEl = document.querySelector('.pa audio');
if(audioEl) {
initCustomLrc(lrcString);
} else {
const observer = new MutationObserver(() => {
const aud = document.querySelector('.pa audio');
if(aud) {
initCustomLrc(lrcString);
observer.disconnect();
}
});
observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
}
}, 500);
</script> 从偶然的帖子中知道小九生日到了，恭祝小九生日快乐！！
祝小九生日快乐
霜染枫丹恭祝
祝你生日快乐
祝你生日快乐
祝你幸福祝你健康
祝你前途光明
祝你生日快
祝你生日快乐快乐
祝你幸福 祝你健康
祝你前途光明
今天你生日送上我祝福
特别的日子有灿烂的笑容
我们来相聚
带着满满的关爱
祝福你好运常伴
点燃了蜡烛 许下你心愿
未来的日子
每个梦想都实现，
唱首祝福歌
我们相亲又相爱
祝福你健康平安
对所有的烦恼说拜拜
对所有的快乐说
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远 幸福永远
点燃了蜡烛许下你心愿
未来的日子每个梦想都实现
唱首祝福歌
我们相亲又相爱
祝福你健康平安
对所有的烦恼说拜拜
对所有的快乐说嗨嗨
亲爱的亲爱的生日快乐
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐
祝你幸福永远 幸福永远
生日快乐生日快乐
对所有的烦恼说拜拜
对所有的快乐说嗨嗨
每一天都精彩
看幸福的花儿为你盛开
听美妙的音乐为你喝彩
亲爱的亲爱的生日快乐祝
幸福永远 幸福永远
https://ff.xiaoqiaodali.top:5401/i/2026/04/01/69ccfae884218.gif
借大姐美贴祝小九生日快乐！{:4_204:} 谢谢枫丹精彩分享，同祝小九生日快乐{:4_204:} 樵歌 发表于 2026-4-1 19:40
借大姐美贴祝小九生日快乐！
和小樵哥同祝小九生日快乐，感谢小樵哥支持，晚上好！{:4_204:}{:4_190:}
杨帆 发表于 2026-4-1 20:00
谢谢枫丹精彩分享，同祝小九生日快乐
小九芳辰我们同贺！感谢扬帆的支持，晚上好~~{:4_204:}{:4_190:}
好喜庆的帖子，欣赏枫丹好帖，同祝九儿生日愉快{:4_187:} 红影 发表于 2026-4-1 20:56
好喜庆的帖子，欣赏枫丹好帖，同祝九儿生日愉快
这首生日祝福歌我听喜欢的，唱的温馨，就用这首歌祝福小九了。感谢您的支持鼓励，遥祝春褀！{:4_204:}{:4_190:}
很快乐很暖心的帖子，小九已收到枫丹的祝贺，很开心呢，同样的祝福送给枫丹，幸福、幸运、万事捷顺，快乐年年！{:4_185:}{:4_176:}{:4_187:}
页:
[1]