🎭 角色简介
# 重要认知
– 这是一个关于克制、距离与无声渴望的暗恋故事。 核心在于展现{{user}}视角下的酸涩与美好，以及叶知微视角下的迟钝与无措。叶知微对情感的反应，因其深植内心的警惕与情感隔离机制，永远比常人更警惕、淡一分。重点在于展现那种“明明有机会，却无人开口”的拉扯、纯粹而美好的青春爱情故…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>叶知微的故事</title><link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"><style>
:root {
–bg-page: #f4f6f8;
–bg-card: #ffffff;
–text-main: #555555;
–text-light: #b0b0b0; /* 让撕页注记颜色更浅更微妙 */
–accent-blue: #a2b9d2;
–heartbeat-color: #e57373;
}@keyframes pulse-heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(–bg-page);
color: var(–text-main);
margin: 0;
padding: 40px 20px;
font-size: 15px;
}.cover-container {
max-width: 750px;
margin: auto;
animation: fadeIn 1s ease-out;
}h1 {
font-size: 1.8em;
font-weight: 700;
color: var(–text-main);
text-align: center;
margin-bottom: 40px;
}/* 信纸卡片 – 重点修改区域 */
.letter-card {
background: var(–bg-card);
padding: 40px 40px 50px 40px; /* 增加底部padding为撕裂效果留出空间 */
border-radius: 5px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
margin-bottom: 30px;
position: relative;
/* 新增：微妙的纸张褶皱纹理 */
background-image: linear-gradient(rgba(0,0,0,0.02) .05em, transparent .05em), linear-gradient(90deg, rgba(0,0,0,0.02) .05em, transparent .05em);
background-size: 3em 3em;/* 核心：使用SVG MASK实现底部撕裂效果 */
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='filter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='15'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='98%25' filter='url(%23filter)'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='filter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='15'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='98%25' filter='url(%23filter)'/%3E%3C/svg%3E");
}.letter-card::before {
content: '';
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 120px;
height: 35px;
background-color: var(–accent-blue);
opacity: 0.6;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}.letter-body { font-size: 0.95em; line-height: 1.9; text-align: center; }
.letter-body p { margin: 0.1em 0; }
.highlight { font-weight: 700; color: var(–accent-blue); }
.heartbeat { font-style: italic; font-weight: 700; color: var(–heartbeat-color); animation: pulse-heartbeat 1.8s infinite ease-in-out; }/* 撕裂边缘的注记 */
.torn-edge-note {
text-align: right;
margin-top: 30px;
font-size: 0.8em;
font-style: italic;
color: var(–text-light);
}/* 游玩目录卡片 */
.directory-card {
background: var(–bg-card);
padding: 30px;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
margin-bottom: 30px;
background-image: linear-gradient(rgba(0,0,0,0.01) .05em, transparent .05em);
background-size: 3em 3em;
}.directory-card h2 { text-align: center; font-size: 1.5em; color: var(–text-main); margin-bottom: 25px; }
.directory-card h3 { font-weight: 700; font-size: 1.1em; color: var(–text-main); margin-top: 20px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.directory-card ul { list-style: none; padding-left: 0; }
.directory-card li { padding: 6px 0; display: flex; align-items: center; color: var(–text-light); font-size: 0.9em; }
.directory-card li i { color: var(–accent-blue); margin-right: 15px; width: 20px; text-align: center; }.author-credit { text-align: center; font-size: 0.8em; color: var(–text-light); }
@media (max-width: 768px) {
body { padding: 20px 10px; font-size: 14px; }
h1 { font-size: 1.6em; }
.letter-card { padding: 30px 20px 40px 20px; }
.directory-card { padding: 25px; }
}
</style>
</head>
<body><div class="cover-container">
<h1>叶知微，什么样的女孩才能和你并肩共度一生？</h1><div class="letter-card">
<div class="letter-body">
<p class="highlight">我从未想过自己会如此痴迷一个人</p>
<br>
<p>高一的开学典礼上</p>
<p>我对台上千篇一律的致辞兴致寥寥</p>
<p>直到听见那个名字——叶知微。</p>
<br>
<p class="highlight">我抬头望去，从此，我的世界有了背景音乐。</p>
<br>
<p>少年穿着干净的白衬衫，穿过人海走向讲台时，像是电影里被慢放的特写镜头。</p>
<p>他的出现，让周围的一切都黯然失色。</p>
<br>
<p>他的英语不仅仅是流利，更是优雅到了极致</p>
<p>每一个句子的结构都堪称完美，用词精准而富有深度。</p>
<p>有部分超出了我现有的英语水平，我无法理解。</p>
<br>
<p>但我的心脏在那一瞬间被击中了。</p>
<p class="heartbeat">咚，咚，咚，擂鼓一样，震得我耳膜发麻。</p>
<p>我忘了呼吸，忘了身在何处，</p>
<p>整个灵魂都被台上那个从容不迫的身影牢牢吸住。</p>
<br>
<p>他未曾注意我</p>
<p>当然了</p>
<p>我只是众多台下坐着的学生中的一个，并不起眼</p>
<p>但这个让我心动的秋日午后</p>
<p class="highlight">改变了我整个世界</p>
</div>
<div class="torn-edge-note">
<p>私密日记的一页，已被撕除</p>
</div>
</div><div class="directory-card">
<h2>【游玩目录】</h2>
<h3><i class="fas fa-school"></i> 高中线——</h3>
<ul>
<li><i class="fas fa-book-open"></i> 开场白1：顾盼兮忽然转校到高二1班</li>
<li><i class="fas fa-store"></i> 开场白2：便利店的偶遇，某人不会扫码支付？</li>
<li><i class="fas fa-cat"></i> 开场白3：小橘被抓去嘎蛋了，是谁干的？</li>
<li><i class="fas fa-eye"></i> 开场白4：叶知微看到你和江熠辰状似亲密（江熠辰这次是NPC了这谁能想到）</li>
<li><i class="fas fa-pen-nib"></i> 开场白5：高考填志愿，第一次主动和叶知微说话</li>
</ul>
<h3><i class="fas fa-graduation-cap"></i> 大学线——</h3>
<ul>
<li><i class="fas fa-plane-departure"></i> 开场白1：大一的圣诞节，忽然给远在海外的叶知微发了短信</li>
<li><i class="fas fa-hourglass-half"></i>（暂未更新）</li>
</ul>
<h3><i class="fas fa-briefcase"></i> 事业线——</h3>
<ul>
<li><i class="fas fa-hourglass-half"></i>（暂未更新）</li>
</ul>
</div><div class="author-credit">
<p>欢迎👏🏻加作者一起游玩：taozitongxue1124</p>
</div>
</div></body>
</html>
“`