💬 开场白
“`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BEAST: Whisker's Wish</title>
<style>
/* 导入字体 */
@import url("https://fontsapi.zeoseven.com/701/main/result.css");
@import url("https://fontsapi.zeoseven.com/364/main/result.css");
@import url("https://fontsapi.zeoseven.com/492/main/result.css");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background: linear-gradient(135deg, #ffeef8 0%, #ffe0f0 25%, #f8d4e6 50%, #e8c4f0 75%, #d4b5ff 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-x: hidden;
}/* 背景装饰 */
body::before {
content: '';
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 182, 237, 0.3) 0%, transparent 70%);
animation: float 20s ease-in-out infinite;
z-index: -1;
}@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(30px, -30px) rotate(180deg); }
}/* 主标题样式 */
.main-title {
font-family: "NaikaiFont", serif;
font-weight: normal;
font-size: 3.5em;
text-align: center;
background: linear-gradient(45deg, #ff6b9d, #c44569, #ff8cc8, #da5a9f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 2px 2px 4px rgba(199, 125, 170, 0.3);
margin: 30px 0 40px 0;
animation: shimmer 3s ease-in-out infinite;
position: relative;
}/* 分割线 */
.main-title::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 182, 237, 0.5) 50%, transparent 100%);
}@keyframes shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}/* 头像容器 */
.avatar-container {
position: relative;
margin-bottom: 40px;
}/* 头像样式 */
.avatar {
width: 300px;
height: 420px;
border-radius: 30px;
object-fit: cover;
box-shadow: 0 10px 30px rgba(255, 105, 180, 0.4);
border: 5px solid rgba(255, 255, 255, 0.8);
transition: transform 0.3s ease;
}.avatar:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 105, 180, 0.5);
}/* 副标题 */
.subtitle {
font-family: "寒蝉无机体 Wide", sans-serif;
font-weight: normal;
font-size: 2.5em;
color: #d63384;
text-align: center;
margin-bottom: 30px;
letter-spacing: 5px;
text-shadow: 2px 2px 4px rgba(214, 51, 132, 0.2);
}/* 引语容器 */
.quote-container {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
padding: 40px 40px 35px 40px;
border-radius: 20px;
max-width: 700px;
margin: 0 auto 40px;
box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
border: 1px solid rgba(255, 182, 237, 0.5);
}/* 引语文本 */
.quote {
font-family: "PING FANG CHANG AN", sans-serif;
font-weight: normal;
font-size: 1.1em;
line-height: 1.8;
color: #a8396f;
text-align: justify;
}.quote strong {
display: block;
margin-bottom: 15px;
}/* 落款样式 */
.quote-signature {
font-family: "PING FANG CHANG AN", sans-serif;
font-weight: normal;
text-align: right;
margin-top: 25px;
color: #8e2d61;
font-size: 1em;
position: relative;
}/* 模糊文字效果 */
.blurred-text {
position: relative;
display: inline-block;
color: #4a1a35;
filter: blur(2px);
letter-spacing: 2px;
}.blurred-text::after {
content: '';
position: absolute;
top: -5px;
left: -8px;
right: -8px;
bottom: -5px;
background: radial-gradient(ellipse at center,
rgba(74, 26, 53, 0.8) 0%,
rgba(74, 26, 53, 0.6) 40%,
rgba(74, 26, 53, 0.3) 70%,
transparent 100%);
filter: blur(3px);
z-index: 1;
}.signature-note {
font-size: 0.9em;
color: #b86a9a;
margin-left: 5px;
font-style: italic;
}/* 滑动提示样式 */
.swipe-hint {
font-family: "寒蝉无机体 Wide", sans-serif;
font-weight: normal;
font-size: 1.2em;
color: #d63384;
text-align: center;
margin-top: 30px;
letter-spacing: 3px;
opacity: 0.8;
animation: pulse 2s ease-in-out infinite;
position: relative;
}.swipe-hint::after {
content: '→';
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
animation: slide-right 1.5s ease-in-out infinite;
}@keyframes pulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}@keyframes slide-right {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(10px); }
}/* 星星装饰效果 */
.sparkle {
position: fixed;
pointer-events: none;
animation: sparkle 3s linear infinite;
}@keyframes sparkle {
0% {
opacity: 0;
transform: translateY(0) scale(0);
}
50% {
opacity: 1;
transform: translateY(-20px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-40px) scale(0);
}
}
</style>
</head>
<body>
<h1 class="main-title">BEAST:Whisker's Wish</h1><div class="avatar-container">
<img src="https://d58w.com/edith/i/2025/08/12/12cum.jpg" alt="角色头像" class="avatar">
</div><h2 class="subtitle">猫语心愿</h2>
<div class="quote-container">
<div class="quote">
<strong>我亲爱的<user>，当你读到这封信时，我大概已经去了一个很远的地方。请原谅我的不辞而别。</strong>
<strong>现在，我将我此生最珍贵的宝物——"猫语心愿"咖啡馆，连同其中我最心爱的"收藏品"们，一并赠予你。请务必将那里当作你真正的"家"，并将他们视作你唯一的"家人"。</strong>
<strong>他们是如此美丽、温柔而又脆弱的生物，需要一个像你一样温暖的人类来"照顾"。请用你全部的爱去拥抱他们、喂养他们、满足他们……直到你成为他们密不可分的一部分。</strong>
<strong>记住，永远，永远不要试图离开……</strong>
</div>
<div class="quote-signature">
——最爱你的舅舅：<span class="blurred-text">▮▮▮</span><span class="signature-note">（被深色的污渍遮盖，模糊不清）</span>
</div>
</div><div class="swipe-hint">右划查看可攻略角色</div>
<script>
// 创建星星装饰效果
function createSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
sparkle.innerHTML = '💘';
sparkle.style.left = Math.random() * 100 + '%';
sparkle.style.top = Math.random() * 100 + '%';
sparkle.style.fontSize = Math.random() * 20 + 10 + 'px';
document.body.appendChild(sparkle);setTimeout(() => {
sparkle.remove();
}, 3000);
}// 每隔一段时间创建新的星星
setInterval(createSparkle, 1500);
</script>
</body>
</html>
“`