活个明白
本帖最后由 杨帆 于 2025-12-21 10:43 编辑 <br /><br /><style>@import url('https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css');
#tz { position: relative; margin: 30px auto;left: calc(50% - 81px); transform: translateX(-50%); width: 1280px; height: 780px; overflow: hidden; z-index: 1; display: grid; place-items: center; user-drag: none; user-select: none; --state: running; }
#aniImg { width: 30%; height: 65%; position: absolute; top: 15%; left: 35%; animation-duration: 2s; overflow: hidden; border-radius: 24px; z-index: 99; -webkit-mask-image: radial-gradient(black 50%, transparent 75%); -webkit-mask-size: cover; }
#rittai { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; opacity: 1; }
#btnFs { position: absolute; left: calc(100% - 125px); top: 20px; padding: 6px 12px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; z-index: 10; font: normal 1.3em 楷体; text-shadow: 0 0 3px #000; }
#btnFs:hover {background: #218838;font-style: italic; scale:1.05;translate: -1px 1px; }
#player { position: absolute; width: 100px; height: 100px; top: 20px; left: 20px; animation: rot 6s linear infinite var(--state); cursor: pointer; opacity: 0; z-index: 18; pointer-events: auto; }
#tz:hover #player { opacity: 1; scale: 1.1; }
@keyframes rot { to { transform: rotate(1turn); } }
#lrc { position: absolute; padding: 0; font: normal 2.8em 华文隶书; color: skyblue; text-shadow: 0 0 3px #000; opacity: 1; letter-spacing: 4px; white-space: pre; z-index: 8; -webkit-background-clip: text; filter: drop-shadow(#FFFFFF 2px 0 0) drop-shadow(#FFFFFF 0 2px 0) drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0); width: 100%; height: 70px; text-align: center; top: 50px; left: 0; border: 0; }
.char { display: inline-block; padding: 2px 2px; opacity: 0; transform: translate(var(--x), var(--y)); animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state); }
@keyframes fadeIn { to { transform: translate(0, 0); opacity: 1; } }
@keyframes flash { to { filter: hue-rotate(360deg) brightness(60%); } }
.progress-container { position: absolute; bottom: 40px; left: 20%; width: 60%; z-index: 18; background: rgba(255,255,255,0.5); height: 6px; border-radius: 3px; cursor: pointer; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(-45deg, red, yellow, green, yellow, yellow); border-radius: 3px; transition: width 0.1s linear; position: relative; }
.progress-bar::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(233,69,96,0.8); opacity: 0; transition: opacity 0.2s; }
.progress-container:hover .progress-bar::after { opacity: 1; }
.time-display { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; color: Azure; }
</style>
<div id="tz">
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
<div class="time-display">
<span id="currentTime">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<img id="rittai" src="https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif" alt="">
<span id="btnFs">全屏欣赏</span>
<img id="player" alt="播放/暂停按钮" src="https://xlaj.cn/upfile/202411/16/ann.png">
<audio id="aud" src="https://www.joy127.com/url/139826.mp3" autoplay loop></audio>
<img id="aniImg" class="animate__animated animate__fadeIn" src="https://s3.bmp.ovh/imgs/2025/12/18/1e5f0527356ae5ea.png" alt="">
<div id="lrc">活个明白</div>
</div>
<script>
const aud = document.getElementById('aud');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const player = document.getElementById('player');
const tz = document.getElementById('tz');
const btnFs = document.getElementById('btnFs');
const imgEl = document.getElementById('rittai');
const aniImg = document.getElementById('aniImg');
const lrc = document.getElementById('lrc');
let isDragging = false;
let carouselTimer = null;
let carouselInterval = null;
let curkey = 0;
let isSeeking = false;
function formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
function updateProgress() {
if (aud.paused || isNaN(aud.duration)) return;
const currentTimeVal = aud.currentTime;
const durationVal = aud.duration;
const progressPercent = (currentTimeVal / durationVal) * 100;
progressBar.style.width = `${progressPercent}%`;
currentTimeEl.textContent = formatTime(currentTimeVal);
durationEl.textContent = formatTime(durationVal);
if (!aud.paused) {
requestAnimationFrame(updateProgress);
}
}
function togglePlayback() {
if (aud.paused) {
aud.play().then(() => {
updateProgress();
}).catch(err => {
console.error('播放失败:', err);
});
} else {
aud.pause();
}
mState();
}
function handleProgressClick(e) {
const rect = progressContainer.getBoundingClientRect();
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
aud.currentTime = percent * aud.duration;
calcKey();
}
progressContainer.addEventListener('click', handleProgressClick);
progressContainer.addEventListener('mousedown', (e) => {
isDragging = true;
handleProgressClick(e);
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
handleProgressClick(e);
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
function mState() {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = aud.paused ? '播放' : '暂停';
aud.paused ? stopCarousel() : startCarousel();
}
const bgImages = ["https://pic.imgdb.cn/item/674d8258d0e0a243d4dbf8b5.gif","https://pic.imgdb.cn/item/674d81d5d0e0a243d4dbf77e.gif","https://pic.imgdb.cn/item/674d81f8d0e0a243d4dbf7e1.gif","https://pic.imgdb.cn/item/674d8215d0e0a243d4dbf830.gif","https://pic.imgdb.cn/item/674d822ed0e0a243d4dbf862.gif","https://pic.imgdb.cn/item/674d8244d0e0a243d4dbf891.gif"];
const bgInterval = 5000;
let currentBgIndex = 1;
const preloadBgImages = bgImages.map(url => {
const img = new Image();
img.src = url;
return img;
});
function slideBg() {
imgEl.src = preloadBgImages.src;
currentBgIndex = (currentBgIndex + 1) % preloadBgImages.length;
}
function startCarousel() {
if (carouselTimer) clearInterval(carouselTimer);
carouselTimer = setInterval(slideBg, bgInterval);
}
function stopCarousel() {
if (carouselTimer) {
clearInterval(carouselTimer);
carouselTimer = null;
}
}
const aniImages = ["https://s3.bmp.ovh/imgs/2025/12/18/1e5f0527356ae5ea.png","https://s3.bmp.ovh/imgs/2025/12/18/a3d9214b2529266a.png","https://s3.bmp.ovh/imgs/2025/12/18/97e9adbf742f0cf1.png","https://s3.bmp.ovh/imgs/2025/12/18/c5806f5ae8545359.png","https://s3.bmp.ovh/imgs/2025/12/18/54ddd37a98ff4845.png"];
const animationClasses = ["animate__bounce","animate__flash","animate__pulse","animate__rubberBand","animate__shakeX","animate__shakeY","animate__headShake","animate__swing","animate__tada","animate__wobble","animate__backInDown","animate__backInLeft","animate__backInRight","animate__backInUp","animate__bounceIn","animate__bounceInDown","animate__fadeIn","animate__fadeInDown","animate__fadeInLeft","animate__fadeInRight","animate__fadeInUp","animate__zoomIn","animate__zoomInDown","animate__zoomInLeft","animate__zoomInRight","animate__zoomInUp","animate__zoomOut","animate__zoomOutDown","animate__zoomOutLeft","animate__zoomOutRight","animate__zoomOutUp","animate__slideInDown","animate__slideInLeft","animate__slideInRight","animate__slideInUp","animate__slideOutDown","animate__slideOutLeft","animate__slideOutRight","animate__slideOutUp"];
let aniImgIdx = 0;
function nextAniImage() {
aniImgIdx = (aniImgIdx + 1) % aniImages.length;
aniImg.src = aniImages;
const randomAni = animationClasses;
aniImg.className = `animate__animated ${randomAni}`;
}
const lrcText = `
词Lyrics by：陆光星
曲Composed by：陆光星
编曲Music Arranged by：包晓牧
混音师Mixing Engineer：颜琳昊
统筹Quality control：陈泓旭
企划Song Plan by：张阳
营销策划Plan by：木子
出品人Publisher：张家旺
OP/SP：响乐文化@徐州X 看见文娱
你说这是你的那是你的
争来抢去最后能带走几样呢
秦始皇筑长城夸口万代基业
如今墙砖还在不见当年的龙椅
历代帝王都说江山是朕的
到头不过是史书里的几行字迹
别再纠结那些不属于你的东西
人生苦短何必让烦恼困住自己
金山银山不如心安
健康的身体才是最真的伴
人生就那么几十年一晃就过完
眼一闭腿一蹬全都化作云烟
今天就是最年轻的一天
过一天少一天快乐是关键
把心结系成蝴蝶结笑容挂脸边
别让那些结节占据你的心间
你老公是别人家的儿子
你儿子将来是别人家的丈夫
养女儿悉心照料百般呵护
最后来了个女婿连花带盆端走
奋斗大半辈子买了套房子
楼顶是别人的地板地板是别人的楼顶
东西南北四面墙也是邻居的
你敢动一动邻居可不答应
金山银山不如心安
健康的身体才是最真的伴
人生就那么几十年一晃就过完
眼一闭腿一蹬全都化作云烟
今天就是最年轻的一天
过一天少一天快乐是关键
把心结系成蝴蝶结笑容挂脸边
别让那些结节占据你的心间
阎王要你三更死不会留你到五更
日子一天比一天少我们一天比一天老
别再为琐事愁眉苦脸
活在当下才是最重要
金山银山不如心安
健康的身体才是最真的伴
人生就那么几十年一晃就过完
眼一闭腿一蹬全都化作云烟
今天就是最年轻的一天
过一天少一天快乐是关键
把心结系成蝴蝶结笑容挂脸边
别让那些结节占据你的心间
`;
function parseLyrics(text) {
const lrcAr = [];
const ar = text.trim().split('\n').sort();
const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
const match = item.match(reg);
if (match) {
const time = parseInt(match) * 60 + parseInt(match) + parseInt(match) / 1000;
const lyric = match.trim();
lrcAr.push();
}
});
return lrcAr.length > 0 ? lrcAr : [];
}
const parsedLyrics = parseLyrics(lrcText);
function calcKey() {
isSeeking = true;
for (let j = 0; j < parsedLyrics.length; j++) {
if (aud.currentTime <= parsedLyrics) {
curkey = Math.max(0, j - 1);
break;
}
}
curkey = Math.max(0, Math.min(curkey, parsedLyrics.length - 1));
const timeGap = (parsedLyrics?. || 0) - parsedLyrics;
showLrc(parsedLyrics, lrc, timeGap);
setTimeout(() => isSeeking = false, timeGap * 1000);
}
function showLrc(str, targetElm, time) {
if (isSeeking || !str) return;
targetElm.innerHTML = '';
const chars = str.split('');
const fragment = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.textContent = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? -150 : 150);
const y = Math.random() * (Math.random() > 0.5 ? -150 : 150);
const delay = Math.random() * 0.5;
span.style.cssText = `
color: hsl(${Math.floor(Math.random() * 360)}, 100%, 50%);
--x: ${x}px;
--y: ${y}px;
--delay: ${delay}s;
`;
fragment.appendChild(span);
});
targetElm.appendChild(fragment);
curkey++;
}
player.addEventListener('click', togglePlayback);
aud.addEventListener('canplay', () => {
mState();
updateProgress();
durationEl.textContent = formatTime(aud.duration);
});
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
aud.addEventListener('loadedmetadata', () => {
durationEl.textContent = formatTime(aud.duration);
});
aud.addEventListener('ended', () => {
progressBar.style.width = '0%';
currentTimeEl.textContent = '0:00';
curkey = 0;
aud.play();
updateProgress();
});
aud.addEventListener('seeked', calcKey);
aud.addEventListener('timeupdate', () => {
if (curkey >= parsedLyrics.length - 1) return;
if (aud.currentTime >= parsedLyrics) {
const timeGap = (parsedLyrics?. || 0) - parsedLyrics;
showLrc(parsedLyrics, lrc, timeGap);
}
});
aud.addEventListener('play', () => {
if (carouselInterval) clearInterval(carouselInterval);
aniImg.style.animationPlayState = 'running';
carouselInterval = setInterval(nextAniImage, 3000);
});
aud.addEventListener('pause', () => {
if (carouselInterval) {
clearInterval(carouselInterval);
carouselInterval = null;
}
aniImg.style.animationPlayState = 'paused';
});
let fs = true;let fsTimer;
btnFs.onclick = () => {fs ? (btnFs.innerText = '退出全屏',tz.requestFullscreen()) : (btnFs.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
tz.addEventListener('mousemove', () => {clearTimeout(fsTimer);btnFs.style.opacity = '1';fsTimer = setTimeout(() => {btnFs.style.opacity = '0'; }, 3000); });
</script> 先占沙发{:4_172:}
这个作品清新大气，一打开就觉得清爽惬意！边听歌边回帖，欣赏学习，很喜欢，谢杨帆分享！！晚上好~~{:4_204:}{:4_190:}
这歌词太实在了。制作漂亮，场景开阔，还是是变化的背景呢。
欣赏杨帆好帖{:4_199:} 霜染枫丹 发表于 2025-12-18 22:10
这个作品清新大气，一打开就觉得清爽惬意！边听歌边回帖，欣赏学习，很喜欢，谢杨帆分享！！晚上好~~{:4_20 ...
问好枫丹，谢谢鼓励{:4_204:} 杨帆这个帖图片用了不少，但你图片转换的不够自如流畅，建议你不是gif格式就用jpg后缀，最好无损压缩一下再用，这样图片转换会流畅多了 欣赏杨帆的精彩制作{:4_199:} 红影 发表于 2025-12-18 23:17
这歌词太实在了。制作漂亮，场景开阔，还是是变化的背景呢。
欣赏杨帆好帖
问好影子，刚听到的一首歌，歌声优美，旋律动听，歌词炸裂，分享一下{:4_204:} 小辣椒 发表于 2025-12-18 23:23
杨帆这个帖图片用了不少，但你图片转换的不够自如流畅，建议你不是gif格式就用jpg后缀，最好无损压缩一下再 ...
好，谢谢小辣椒的好建议{:4_187:} 制作精美，歌曲好动。欣赏问好！{:4_187:} 梦江南 发表于 2025-12-19 11:36
制作精美，歌曲好动。欣赏问好！
问好江南，谢谢鼓励，祝福开心天天{:4_204:} 这个帖子很新颖，歌曲也很大气，有哲理，欣赏杨帆带来的作品{:4_187:} 小九 发表于 2025-12-19 19:17
这个帖子很新颖，歌曲也很大气，有哲理，欣赏杨帆带来的作品
谢谢小九鼓励~《活个明白》这首歌，蕴含着深刻的人生哲理，让人感悟颇多{:4_172:}
页:
[1]