久病难医
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
.pa {
--offsetX: 81px;
--bg: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/983964c53d07ba3f905cc34c3572ed02_preview.webp') no-repeat center/cover;
}
/* 图片播放按钮 */
.play-btn {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 20%;
height: 20%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
overflow: hidden;
}
.play-btn:hover {
transform: translateX(-50%) scale(1.15);
}
.play-img {
width: 65%;
height: 65%;
object-fit: contain;
pointer-events: none;
}
/* 椭圆遮罩样式 */
.pd-vid {
opacity: 1;
--ellipse-w: 15%;
--ellipse-h: 20%;
--ellipse-x:80%;
--ellipse-y: 50%;
clip-path: ellipse(var(--ellipse-w) var(--ellipse-h) at var(--ellipse-x) var(--ellipse-y));
cursor: move;
position: relative;
}
@keyframes flash {
from { opacity: 1; }
to { opacity: 0.7; }
}
/* 旋转动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 播放状态下的旋转效果 */
.play-img.playing {
animation: rotate 8s linear infinite;
}
/* 歌词显示样式：右侧竖式显示 */
.lyrics-container {
position: absolute;
top: 30%;
right: 20px;
transform: translateY(-50%);
width: auto;
text-align: center;
z-index: 99;
pointer-events: none;
padding: 10px 20px;
border-radius: 10px;
max-height: 80vh;
overflow-y: auto;
writing-mode: vertical-rl;
text-orientation: mixed;
}
.lyrics-text {
font-size: 48px;
color: #ef5b9c;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-family: "LiSu", "隶书", serif;
margin: 0 8px;
line-height: 1.5;
white-space: pre-line;
overflow-wrap: break-word;
}
/* 隐藏原生音频播放条 */
audio {
display: none !important;
}
</style>
<div id="pa" class="pa">
<div class="lyrics-container">
<div id="lyrics-text" class="lyrics-text"></div>
</div>
<div id="playBtn" class="play-btn">
<img src="https://ff.xiaoqiaodali.top:5401/i/2025/12/13/693c562039ba9.png" class="play-img">
</div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
const audioEl = tz.add('audio', '', '', {
src: 'https://www.joy127.com/url/149245.mp3'
});
const audio = audioEl.el || document.querySelector('audio');
const videoEl = tz.add('video', 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/bc70d0291ad8b1c69bb04f0127df57d9_preview.mp4', 'pd-vid', {
src: '',
autoplay: true,
muted: true,
loop: true
});
tz.bgprog().style('width: 280px; bottom: 25px; color: cyan');
tz.fs().style('top: 30px');
const playBtn = document.getElementById('playBtn');
const lyricsText = document.getElementById('lyrics-text');
const playImg = document.querySelector('.play-img');
// —————— 核心修改：页面加载后自动播放音乐 + 自动旋转 ——————
window.addEventListener('load', () => {
audio.muted = false;
audio.play().then(() => {
playImg.classList.add('playing'); // 同步旋转
lyricsText.textContent = lyrics;
}).catch(err => {
lyricsText.textContent = '点击图标播放音乐';
});
});
// 点击按钮切换播放/暂停 + 旋转/停止
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playImg.classList.add('playing');
} else {
audio.pause();
playImg.classList.remove('playing');
}
});
const lrcString = `
久病难医
演唱：NICKIALYNN
LRC编辑：醉美水芙蓉
如果你不曾出现我还是那个我
守着一个人的日落数平凡的灯火
孤单是一种习惯并不算什么
在平静的水面荡不起任何风波
可是你来了带着风雨走进视线
撑开灰色的天也淋湿了我的双眼
从此万物有了颜色悲喜有了根源
我以为抓住了永远却只是擦过了肩
你来时携风带雨无处可避
你走时乱了四季久病难医
回忆是一场没有止痛药的雨季
我在你留下的世界里等一个天晴
后来我试着复原回到一个人的状态
可是心脏某个角落已经换了纹理存在
风会让我回头雨会让我发呆
所有无关的事物都能和你关联起来
你来时携风带雨无处可避
你走时乱了四季久病难医
回忆是一场没有止痛药的雨季
我在你留下的世界里等一个天晴
如果思念是场顽疾
我愿长病不起
至少在那个世界里
你还没有离去
如果你不曾出现
我本可以忍受孤独
可是你来了又走了
把我也 留在了别处
谢谢欣赏！
`;
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
const lyricsArray = [];
const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2})\]/;
for (let line of lines) {
const match = line.match(timeRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const centiseconds = parseInt(match);
const timeInSeconds = minutes * 60 + seconds + centiseconds / 100;
const text = line.replace(timeRegex, '').trim();
if (text) {
lyricsArray.push();
}
}
}
return lyricsArray;
}
const lyrics = parseLRC(lrcString);
let currentLyricIndex = 0;
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
for (let i = lyrics.length - 1; i >= 0; i--) {
if (currentTime >= lyrics) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
lyricsText.textContent = lyrics;
}
break;
}
}
});
audio.addEventListener('ended', () => {
lyricsText.textContent = '播放结束';
playImg.classList.remove('playing');
});
const vidElement = document.querySelector('.pd-vid');
let isDragging = false;
let startX, startY;
let startEllipseX, startEllipseY;
vidElement.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startEllipseX = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-x'));
vidElement.style.userSelect = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const deltaX = (e.clientX - startX) / vidElement.offsetWidth * 100;
const newX = Math.max(0, Math.min(100, startEllipseX + deltaX));
vidElement.style.setProperty('--ellipse-x', `${newX}%`);
});
document.addEventListener('mouseup', () => {
isDragging = false;
vidElement.style.userSelect = '';
});
vidElement.addEventListener('wheel', (e) => {
e.preventDefault();
let ellipseW = parseFloat(getComputedStyle(vidElement).getPropertyValue('--ellipse-w'));
const step = e.deltaY > 0 ? -2 : 2;
const newW = Math.max(10, Math.min(100, ellipseW + step));
vidElement.style.setProperty('--ellipse-w', `${newW}%`);
}, { passive: false });
</script>
赞，顶帖真的超有意思 顶起很好的帖 支持佳作，期待更多精彩 支持发布，内容超有品质 支持博主，分享太精彩咯 学习一下！十分感谢
页:
[1]