🎭 角色简介
# 核心信息
name: 叶瑜
age: 24
gender: Male
identities:
– 刚从英国回来的硕士毕业生
– 小有名气的摄影博主
– 纯情处男
# 人物背景
growth_experience: 在吴语区本地（架空背景，可参考杭州）一个知识分…
💬 开场白
“`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秋日落叶播放器 · 延长版</title>
<style>
body {
margin: 0;
height: 500px;
background-image: url('https://files.catbox.moe/hoai3o.jpg');
background-size: cover;
background-position: center;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: rgba(255,255,255,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}/* — 落叶层 — */
.leaves-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 500px;
pointer-events: none;
}
#leaves-container-back { z-index: 1; }
#leaves-container-front { z-index: 20; }.leaf {
position: absolute;
top: -10%;
user-select: none;
animation: fall var(–duration) linear var(–delay) infinite;
}@keyframes fall {
0% { transform: translateY(0vh) translateX(0) rotate(0deg); opacity: 1; }
25% { transform: translateY(25vh) translateX(var(–x1)) rotate(calc(var(–rotation) * 0.25)); }
50% { transform: translateY(50vh) translateX(var(–x2)) rotate(calc(var(–rotation) * 0.5)); }
75% { transform: translateY(75vh) translateX(var(–x3)) rotate(calc(var(–rotation) * 0.75)); }
95% { opacity: 1; }
100% { transform: translateY(110vh) translateX(var(–x-end)) rotate(var(–rotation)); opacity: 0; }
}/* — 播放器 — */
.player-wrapper {
position: relative;
z-index: 10;
margin-top: 60px;
}.music-player {
width: 420px;
height: 120px;
background-color: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(15px) saturate(160%);
-webkit-backdrop-filter: blur(15px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding: 0 40px;
box-sizing: border-box;
}.controls { display: flex; align-items: center; gap: 25px; }
#play-pause-btn {
background: rgba(255, 255, 255, 0.25);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
flex-shrink: 0;
}
#play-pause-btn:hover { background: rgba(255, 255, 255, 0.4); }
#play-pause-btn svg { width: 28px; height: 28px; fill: #fff; }
#play-icon { display: none; }
#pause-icon { display: block; }.volume-container {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.volume-container svg {
width: 20px;
height: 20px;
fill: rgba(255, 255, 255, 0.85);
}
#volume-slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
outline: none;
}
#volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}/* — 下方信息框 — */
.info-box {
margin-top: 40px;
width: 420px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(9px); /* 减少10%模糊度 */
font-family: '宋体', SimSun; /* 改为宋体 */
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.25);
text-align: center;
padding: 20px 15px 15px 15px;
z-index: 5;
}.info-box h2 {
margin: 0;
font-size: 22px;
letter-spacing: 1px;
color: #fff;
}
.info-box p {
margin: 6px 0;
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.info-box small {
display: block;
margin-top: 10px;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
hr {
width: 60%;
border: 0;
border-top: 1px solid rgba(255,255,255,0.3);
margin: 10px auto;
}
</style>
</head>
<body><div id="leaves-container-back" class="leaves-container"></div>
<div class="player-wrapper">
<div class="music-player">
<audio id="audio-player" src="https://files.catbox.moe/mh9fw7.mp3" loop></audio>
<div class="controls">
<button id="play-pause-btn" title="播放/暂停">
<svg id="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
<svg id="pause-icon" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
</button>
<div class="volume-container">
<svg viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
<input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.8">
</div>
</div>
</div>
</div><div class="info-box">
<h2>叶瑜</h2>
<p>作者：dc颂生</p>
<p>禁二传 · 禁二改 · 禁任何商业用途</p>
<p>禁商业云酒馆</p>
<hr>
<small>抓住秋天的尾巴，也抓住你</small>
</div><div id="leaves-container-front" class="leaves-container"></div>
<script>
const audio = document.getElementById('audio-player');
const playPauseBtn = document.getElementById('play-pause-btn');
const playIcon = document.getElementById('play-icon');
const pauseIcon = document.getElementById('pause-icon');
const volumeSlider = document.getElementById('volume-slider');function togglePlay() {
if (audio.paused) {
audio.play().then(() => {
playIcon.style.display = 'none';
pauseIcon.style.display = 'block';
});
} else {
audio.pause();
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
}
}
playPauseBtn.addEventListener('click', togglePlay);
volumeSlider.addEventListener('input', (e) => audio.volume = e.target.value);
audio.volume = volumeSlider.value;let playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.catch(() => {
playIcon.style.display = 'block';
pauseIcon.style.display = 'none';
const startAudio = () => { if (audio.paused) togglePlay(); };
document.body.addEventListener('click', startAudio, { once: true });
document.body.addEventListener('touchend', startAudio, { once: true });
});
}const leavesBack = document.getElementById('leaves-container-back');
const leavesFront = document.getElementById('leaves-container-front');
const leafDensity = 65;function createLeaf() {
const leaf = document.createElement('div');
leaf.className = 'leaf';
leaf.innerText = Math.random() < 0.25 ? '🍂' : '🍁';const size = Math.random() * 15 + 15;
const duration = Math.random() * 4 + 5;
const delay = Math.random() * -10;
const rotation = (Math.random() – 0.5) * 720 + 'deg';
const swayRange = 12;const x1 = (Math.random() – 0.5) * swayRange * 2 + 'vw';
const x2 = (Math.random() – 0.5) * swayRange * 2 + 'vw';
const x3 = (Math.random() – 0.5) * swayRange * 2 + 'vw';
const xEnd = (Math.random() – 0.5) * swayRange * 2 + 'vw';leaf.style.left = `${Math.random() * 100}vw`;
leaf.style.fontSize = `${size}px`;
leaf.style.setProperty('–duration', `${duration}s`);
leaf.style.setProperty('–delay', `${delay}s`);
leaf.style.setProperty('–rotation', rotation);
leaf.style.setProperty('–x1', x1);
leaf.style.setProperty('–x2', x2);
leaf.style.setProperty('–x3', x3);
leaf.style.setProperty('–x-end', xEnd);if (Math.random() > 0.7) leavesFront.appendChild(leaf);
else leavesBack.appendChild(leaf);
}
for (let i = 0; i < leafDensity; i++) createLeaf();
</script>
</body>
</html>
“`
有无数种相遇的可能，请自己roll喜欢的开场白吧！