自己发光
<style>#papa {margin: 0px 0px;
width: 1400px;
height: 720px;
left: -200px;
border: 0px solid gray;
background:radial-gradient(ellipse farthest-corner at center center, transparent 38%,#000 90%),url(https://bbs.cnzv.cc/up/upload/pic/12/20251022-4063a22361467665c8aadbd5c7b3f9d4.jpg) 0px 0px/100% 100%;,linear-gradient(135deg, #e56420, #c22525, #3d9c31, #000078);
position: relative;
--state: running;
}
#player {position:absolute;top: 10%;
left: 10%;
width: 300px;
height: 300px;
display: grid;
place-items: center;
animation: rot 8s linear infinite var(--state);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
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);
}
.lyrics{margin: 0;z-index: 20;
top: 89%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px; /* 调整高度，只容纳当前歌词 */
text-align: center;
position: absolute;
}
.lyric-line{
width: 100%;
position: relative;
height: 60px;
overflow: visible;
font: 300 40px '华文隶书', sans-serif;
line-height: 60px;
text-align: left;
white-space: nowrap; /* 禁止换行 */
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
}
.lyric-mask {
position: absolute;
top: 0;
left: 0;
width: 0;
overflow: hidden;
color: #8B4513;
height: 100%;
white-space: nowrap;
}
.lyric-original {
color: #ag0000;
white-space: nowrap;
}
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
color: #00ff00;
font-family: 'Microsoft YaHei', sans-serif;
text-align: center;
}
#wz{text-align: center;
position: absolute;
top: 0;z-index: 10;
left: 0;
width: 100%;
height: 100%;
margin-top: 50px;
}
#start-button {z-index: 1000;
padding: 8px 25px;
position: absolute;
background: linear-gradient(135deg, rgba(0,255,0,0.3), rgba(0,100,0,0.5));
color: #fff;
border: 2px solid #00ff00;
border-radius: 30px;
font-size: 20px;
cursor: pointer; margin-left: -90px;
margin-top: 420px;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}
#start-button:hover {
background: linear-gradient(135deg, rgba(0,255,0,0.5), rgba(0,100,0,0.7));
box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
}
#versionbtn{border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;border: 2px solid #00ff00;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}
</style>
<div id="papa">
<div class="lyrics" >
<div class="lyric-line">
<div class="lyric-mask"></div>
<div class="lyric-original"></div>
</div>
</div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="start-screen">
<div id="wz">
<h1 style="font-size: 36px;">自己发光</h1></br>
<p style="font-size: 18px; ">演唱：空想之喵</p></br>
<p style="font-size: 18px; ">作词：无名</p></br>
<p style="font-size: 18px;">制作：醉美水芙蓉</p>
</div>
<button id="start-button">点击开始播放</button>
</div>
<span id="versionbtn">关闭音画</span>
</div>
<audio id="audio" src="https://www.joy127.com/url/136472.mp3" loop ></audio>
<script>
// 歌词解析ksc歌词或lrc歌词
const lrc = `
自己发光
LRC编辑：醉美水芙蓉
有很多的道理
受伤后才能清醒
有很多的感情 失去后才懂去珍惜
学会自我愈合的能力
藏一片海在心里
幸福自己会慢慢的靠近
淡泊名利自在不已
我自己发光 不去祈求上苍
不需谁的肯定 我可以孤芳自赏
我自己发光 不许取悦观众
做自己的英雄 把眼泪洒在风中
在我们一生里
成长是很痛的刺
在意别人看法
最后会把自己累死
学会自我和解的能力
不争但看浮云起
让时光沉淀所有的执迷
像溪水绕过弯逝去
我自己发光 不屑你的眼光
谁说万众瞩目 才是所谓的成功
我自己发光 无需谁的认同
做自己的月亮 在黑夜里独自汹涌
谢谢欣赏！
`;
const audio = document.getElementById('audio');
const lyrics = parseLyrics(lrc);
const lyricMask = document.querySelector('.lyric-mask');
const lyricOriginal = document.querySelector('.lyric-original');
let currentIndex = -1;
let currentLyric = null;
// 解析歌词（支持两种格式）
function parseLyrics(lrcText) {
const lyrics = [];
if (lrcText.includes('karaoke.add')) {
const lineRegex = /karaoke\.add\('([^']+)', '([^']+)', '([^']+)', '([^']+)'\);/g;
let match;
while ((match = lineRegex.exec(lrcText)) !== null) {
const startTime = timeToMs(match);
const endTime = timeToMs(match);
const text = match.replace(/\[|\]/g, '').trim();
const durations = match.split(',').map(Number);
if (text) {
lyrics.push({startTime, endTime, text, durations});
}
}
}
else if (lrcText.includes('[')) {
const lines = lrcText.split('\n').filter(line => line.trim());
lines.forEach((line, index) => {
const timeMatch = line.match(/\[(\d+:\d+\.\d+)\]/);
if (timeMatch) {
const timeStr = timeMatch;
const text = line.replace(/\[.*?\]/, '').trim();
if (text) {
const startTime = timeToMs(timeStr);
const nextLine = lines;
const nextTimeMatch = nextLine ? nextLine.match(/\[(\d+:\d+\.\d+)\]/) : null;
const endTime = nextTimeMatch ? timeToMs(nextTimeMatch) : startTime + 5000;
lyrics.push({
startTime,
endTime,
text,
durations: calculateCharDurations(text, startTime, endTime)
});
}
}
});
}
return lyrics;
}
function calculateCharDurations(text, startTime, endTime) {
const totalDuration = endTime - startTime;
const charCount = text.length;
const baseDur = Math.floor(totalDuration / charCount);
const durations = new Array(charCount).fill(baseDur);
const remainder = totalDuration % charCount;
for (let i = 0; i < remainder; i++) {
durations++;
}
return durations;
}
function timeToMs(timeStr) {
const parts = timeStr.split(':');
const minutes = parseInt(parts, 10);
const secondsAndMs = parts.split('.');
const seconds = parseInt(secondsAndMs, 10);
const ms = parseInt(secondsAndMs || 0, 10);
return minutes * 60 * 1000 + seconds * 1000 + ms;
}
function getCurrentLyricIndex(lyrics, currentTimeMs) {
for (let i = 0; i < lyrics.length; i++) {
if (currentTimeMs >= lyrics.startTime && currentTimeMs <= lyrics.endTime) {
return i;
}
}
return -1;
}
function updateLyricDisplay(index) {
if (index < 0 || index >= lyrics.length) return;
currentIndex = index;
currentLyric = lyrics;
lyricOriginal.textContent = currentLyric.text;
lyricMask.textContent = currentLyric.text;
lyricMask.style.width = '0%';
}
function updateLyricMask(currentTimeMs) {
if (!currentLyric) return;
const lyricStartTime = currentLyric.startTime;
const elapsed = currentTimeMs - lyricStartTime;
const totalDuration = currentLyric.durations.reduce((sum, d) => sum + d, 0);
let charIndex = 0;
let accumulatedTime = 0;
for (let i = 0; i < currentLyric.durations.length; i++) {
accumulatedTime += currentLyric.durations;
if (elapsed <= accumulatedTime) {
charIndex = i + 1;
break;
}
}
if (elapsed >= totalDuration) {
charIndex = currentLyric.text.length;
}
charIndex = Math.min(charIndex, currentLyric.text.length);
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontSize = '50px';
tempSpan.style.fontWeight = '800';
document.body.appendChild(tempSpan);
const visibleText = currentLyric.text.substring(0, charIndex);
tempSpan.textContent = visibleText;
const width = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
lyricMask.style.width = `${width}px`;
}
// 监听更新歌词
audio.addEventListener('timeupdate', () => {
const currentTimeMs = audio.currentTime * 1000;
const index = getCurrentLyricIndex(lyrics, currentTimeMs);
if (index !== currentIndex) {
updateLyricDisplay(index);
}
updateLyricMask(currentTimeMs);
});
updateLyricDisplay(0);
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
// 启动按钮点击事件
startButton.addEventListener('click', function() {
startScreen.style.display = 'none';
player.style.autoplay = '1';audio.play();
});
versionbtn.addEventListener('click', function() {startScreen.style.display = 'block'; audio.pause();});
player.onclick = () => audio.paused ? (audio.play(),player.style.top= '0',player.style.left = '0',player.style.transform = '',player.style.animationPlayState = 'running') :( audio.pause(),player.style.top= '20%' ,player.style.left= '72%',player.style.transform = 'scale(0.5)',player.style.animationPlayState = 'paused');
mState = () => papa.style.setProperty('--state',audio.paused ? 'paused' : 'running');
audio.onplaying = audio.onpause = () => mState();
</script> 颇有新意，视听盛宴，谢谢醉美管理员精彩分享 klxf 发表于 2025-10-23 18:26
颇有新意，视听盛宴，谢谢醉美管理员精彩分享
谢谢友友支持！
页:
[1]