光为你亮 （套用学习黑黑银河轨道 播放器效果）
<meta charset="UTF-8">
<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa {
top:70px;--offsetX: 81px;
color: lightblue;
perspective: 1000px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
will-change: background-image;
}
.pa.bg-dynamic {
background-image: url('https://xlaj.cn/upfile/2025/11/29/9.gif');
}
.pa.bg-static {
background-image: url('https://wj.zp68.com/lxx/yunhua/2026/08/13/9.jpg');
}
.son { position: absolute; inset: 0; transform-style: preserve-3d; }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px;left: 20px; }
#lyrics-container {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
text-align: center;
z-index: 10;
pointer-events: none;
}
#current-lyric {
font-size: 32px;
font-weight: bold;
letter-spacing: 6px;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 0%, transparent 0%);
mask-image: linear-gradient(to right, #000 0%, #000 0%, transparent 0%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: none;
}
.mpic { width: 80px; height: 80px; offset-path: ellipse(30% 20% at 50% 30%); cursor: pointer; filter: drop-shadow(2px 2px 30px white); animation: offset-distance 15s linear var(--delay) infinite var(--state), move 50s linear infinite alternate var(--state); --delay: 0s; }
.mpic:nth-of-type(2) { --delay: -3s; }
.mpic:nth-of-type(3) { --delay: -6s; }
.mpic:nth-of-type(4) { --delay: -9s; }
.mpic:nth-of-type(5) { --delay: -12s; }
@keyframes move {
from { transform: translateZ(-3000px); }
to { transform: translateZ(0); }
}
</style>
<div id="pa" class="pa bg-dynamic">
<video class="pd-vid" src=" " autoplay loop muted playsinline></video>
<div id="lyrics-container">
<div id="current-lyric">光为你亮</div>
</div>
<div class="son">
<img class="mpic" src="https://wj.zp68.com/lxx/yunhua/2026/08/13/pp.png" alt="" />
<img class="mpic" src="https://wj.zp68.com/lxx/yunhua/2026/08/13/pp.png" alt="" />
<img class="mpic" src="https://wj.zp68.com/lxx/yunhua/2026/08/13/pp.png" alt="" />
<img class="mpic" src="https://wj.zp68.com/lxx/yunhua/2026/08/13/pp.png" alt="" />
<img class="mpic" src="https://wj.zp68.com/lxx/yunhua/2026/08/13/pp.png" alt="" />
</div>
</div>
<script>
var lrcText = `
光为你亮 -- 致敬孙颖莎
原创作者：西安杰曦
灯光掠过球拍的锋芒
汗水滴落在追梦路上
每一次挥拍都带着倔强
你眼里的光从未熄灭半分亮
输赢不过是沿途风光
我们在乎的是你模样
不必把遗憾扛在肩膀上
健康快乐才是心底最深的向往
莎莎呀我们永远在身旁
无关成败只为你鼓掌
你那不服输的模样多滚烫
致敬短暂蛰伏是为了更高飞翔
致敬为国拼搏的世界冠军孙颖莎
偶尔的风雨打湿翅膀
歇一歇再飞也无妨
积蓄的力量终会破土生长
下一次登场必定绽放更耀眼的光
莎莎呀我们永远在身旁
无关成败只为你鼓掌
你那不服输的模样多滚烫
短暂蛰伏是为了更高飞翔
感谢西安杰曦分享
愿风为你导航光为你亮
往后每段旅程都顺畅明亮
我们的爱永远为你滚烫
谢谢欣赏
`;
var LRC_OFFSET = 3.05;
var staticImg = new Image();
staticImg.src = 'https://wj.zp68.com/lxx/yunhua/2026/08/13/9.jpg';
var dynamicImg = new Image();
dynamicImg.src = 'https://xlaj.cn/upfile/2025/11/29/9.gif';
function parseLrc(text) {
var lines = text.trim().split('\n');
var result = [];
var timeRe = /\[(\d+):(\d+)\.(\d+)\]/;
lines.forEach(function(line) {
var m = line.match(timeRe);
if (m) {
var t = +m*60 + +m + +m/100;
var txt = line.replace(timeRe, '').trim();
if (txt) result.push({ time: t, text: txt });
}
});
for (var i = 0; i < result.length; i++) {
result.end = (i + 1 < result.length) ? result.time + 5.0 : result.time + 4;
}
return result;
}
var lrcData = parseLrc(lrcText);
var lyricEl = document.getElementById('current-lyric');
var currentLine = -1;
var rafId = null;
var audioEl = null;
var isPlaying = false;
var isFrozen = false;
var paEl = document.getElementById('pa');
var videoEl = document.querySelector('.pd-vid');
var mpicEls = document.querySelectorAll('.mpic');
function setMask(percent) {
var p = Math.max(0, Math.min(100, percent));
var grad = `linear-gradient(to right, #000 0%, #000 ${p}%, transparent ${p}%)`;
lyricEl.style.webkitMaskImage = grad;
lyricEl.style.maskImage = grad;
}
function renderLine(idx) {
if (idx === currentLine) return;
currentLine = idx;
var line = lrcData;
if (!line) return;
lyricEl.textContent = line.text;
setMask(0);
}
function freezeAll() {
isFrozen = true;
paEl.classList.remove('bg-dynamic');
paEl.classList.add('bg-static');
if (audioEl && !audioEl.paused) audioEl.pause();
mpicEls.forEach(img => img.style.animationPlayState = 'paused');
if (videoEl) {
videoEl.pause();
videoEl.style.opacity = '0';
}
if (rafId) {
cancelAnimationFrame(rafId);
rafId = null;
}
}
function unfreezeAll() {
isFrozen = false;
paEl.classList.remove('bg-static');
paEl.classList.add('bg-dynamic');
mpicEls.forEach(img => img.style.animationPlayState = 'running');
if (videoEl) {
videoEl.play();
videoEl.style.opacity = '1';
}
if (!rafId) rafId = requestAnimationFrame(tick);
if (audioEl && audioEl.paused) audioEl.play().catch(()=>{});
}
function tick() {
if (audioEl && !isFrozen) {
var t = audioEl.currentTime + LRC_OFFSET;
if (isPlaying) {
var idx = 0;
for (var i = 0; i < lrcData.length; i++) {
if (t >= lrcData.time + 2.0) idx = i;
}
renderLine(idx);
var line = lrcData;
if (line) {
var dur = Math.max(line.end - line.time, 0.01);
var p = ((t - line.time) / dur) * 100;
setMask(p);
}
}
}
rafId = requestAnimationFrame(tick);
}
function loadJs(url, callback) {
var s = document.createElement('script');
s.charset = 'utf-8';
s.src = url;
s.onload = function() { callback && callback(); };
document.head.appendChild(s);
}
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v1', function() {
var pics = document.querySelectorAll('.mpic');
var aud = new AudPlayer({
pa: '.pa',
urls: [['https://xlaj.cn/upfile/2025/11/29/01.mp3', '光为你亮']],
btns: [].slice.call(pics),
});
function bind(el) {
audioEl = el;
el.addEventListener('play', () => isPlaying = true);
el.addEventListener('pause', () => { if (!isFrozen) isPlaying = false; });
el.addEventListener('ended', () => {
isPlaying = false;
lyricEl.textContent = '谢谢欣赏';
setMask(100);
});
if (!rafId) rafId = requestAnimationFrame(tick);
}
if (aud && aud.aud) {
bind(aud.aud);
} else {
var tryCount = 0;
var timer = setInterval(function() {
var el = document.querySelector('.pa audio');
if (el) { clearInterval(timer); bind(el); }
if (++tryCount > 100) clearInterval(timer);
}, 100);
}
});
document.body.addEventListener('click', function() {
if (!audioEl) return;
isFrozen ? unfreezeAll() : freezeAll();
});
</script> @马黑黑
黑黑看见你这些小圆球，立马想到了乒乓球，想到乒乓球就想到这个图图，立马套用玩一次，小辣椒把乒乓球的放大时间修改了，速度快了许多{:4_189:}
这个以前做的是动图，小辣椒加了一键停止背景动图，加了歌词
感谢黑黑源码分享{:4_187:} 很有创意，制作精彩。 玫瑰 发表于 2026-8-14 21:18
很有创意，制作精彩。
问好玫瑰，谢谢欣赏{:4_171:} 设计新颖，效果靓丽，谢谢小辣椒精彩分享{:4_187:} 小辣椒 发表于 2026-8-14 21:20
问好玫瑰，谢谢欣赏
他是以前效果吗？ 好有动感。 来欣赏小辣椒的精品佳作，辛苦了，祝你健康快乐 建议吧那5歌球拿开，有点不符合逻辑 小辣椒 发表于 2026-8-14 21:14
@马黑黑
黑黑看见你这些小圆球，立马想到了乒乓球，想到乒乓球就想到这个图图，立马套用玩一次，小辣椒 ...
你这是多种代码混合在一起使用了。其中的这一段：
document.body.addEventListener('click', function() {
if (!audioEl) return;
isFrozen ? unfreezeAll() : freezeAll();
});
点击页面的body区域会联动 控制音视频 谢谢辣椒老师精彩分享。 好创意！这是对乒乓球爱好才会想出这种效果来。{:4_187:} 动感十足，欣赏点赞！{:4_204:} 喜欢
杨帆 发表于 2026-8-14 21:25
设计新颖，效果靓丽，谢谢小辣椒精彩分享
问好杨帆，谢谢欣赏{:4_187:} 玫瑰 发表于 2026-8-14 21:25
他是以前效果吗？
是的，现成的动图加了黑黑老师的新的效果完成一个作业。
光为你亮 歌曲原创：西安杰曦
https://www.huachaowang.com/forum.php?mod=viewthread&tid=88457&fromuid=4275
(出处: 花潮论坛)
偶然~ 发表于 2026-8-14 21:33
来欣赏小辣椒的精品佳作，辛苦了，祝你健康快乐
谢谢偶然的支持 偶然~ 发表于 2026-8-14 21:34
建议吧那5歌球拿开，有点不符合逻辑
哈哈~~~小辣椒偷懒用了以前的动图，就是为加上黑黑老师的五个小球的新教程，这个是作业 小辣椒 发表于 2026-8-17 22:39
谢谢偶然的支持
提醒牛郎织女：视频通话解相思，何苦年年等鹊桥？祝小辣椒网络永不卡！