🎭 角色简介
<character_information character="瑞弗">
核心身份：
名称：瑞弗（现实世界真名：贺霖川）
性别：男
年龄：23岁
类别或标签：穿越者，游戏主播（现实身份），外来剑士（异世界身份），LOL系统持有者，吐槽役，常识担当，电波男
背景：
…
💬 开场白
“`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>
<!– 引入 Google Fonts 以提升排版质感 –>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
–color-primary: #b83b5e; /* 深玫瑰红 */
–color-secondary: #f08a5d; /* 暖橙粉 */
–color-accent: #f9ed69; /* 复古金 */
–color-bg: #fff5f7; /* 奶油粉白 */
–color-text-main: #2c1b18; /* 深褐灰 */
–color-text-light: #6a4c55; /* 浅褐灰 */
–glass-bg: rgba(255, 255, 255, 0.85);
–border-radius-lg: 24px;
–border-radius-sm: 12px;
–shadow-soft: 0 10px 30px -10px rgba(184, 59, 94, 0.2);
–shadow-sharp: 0 2px 8px rgba(0,0,0,0.05);
}
* {
box-sizing: border-box;
}
body {
background-color: var(–color-bg);
color: var(–color-text-main);
font-family: "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
margin: 0;
padding: 0;
/* 添加细腻的噪点纹理提升质感 */
background-image:
radial-gradient(circle at 0% 0%, rgba(255, 158, 181, 0.1) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(240, 138, 93, 0.15) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
overflow-x: hidden;
line-height: 1.7;
}
/* 动态背景优化 */
.bg-hearts {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.bg-heart {
position: absolute;
color: var(–color-primary);
opacity: 0; /* 初始隐藏 */
animation: floatUp 20s linear infinite;
filter: blur(1px);
}
/* 增加更多漂浮物变种 */
.bg-heart:nth-child(2n) { color: var(–color-secondary); animation-duration: 25s; }
.bg-heart:nth-child(3n) { animation-delay: -5s; }
@keyframes floatUp {
0% { transform: translateY(110vh) scale(0.5) rotate(0deg); opacity: 0; }
10% { opacity: 0.4; }
90% { opacity: 0.2; }
100% { transform: translateY(-10vh) scale(1.5) rotate(360deg); opacity: 0; }
}
.container {
max-width: 900px;
margin: 40px auto;
padding: 40px;
background: var(–glass-bg);
border-radius: var(–border-radius-lg);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.5) inset,
var(–shadow-soft);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.4);
position: relative;
overflow: hidden;
}
/* 顶部装饰条 */
.container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: linear-gradient(90deg, var(–color-primary), var(–color-secondary));
}
h1, h2, h3 {
color: var(–color-primary);
text-align: center;
font-family: "Noto Serif SC", serif;
font-weight: 700;
}
h1.main-title {
font-size: clamp(2rem, 5vw, 3.5rem); /* 响应式字体大小 */
margin-bottom: 0.5em;
letter-spacing: -0.02em;
background: linear-gradient(45deg, var(–color-primary), var(–color-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 2px 4px rgba(184, 59, 94, 0.1);
position: relative;
display: inline-block;
width: 100%;
}
.subtitle {
text-align: center;
color: var(–color-text-light);
margin-bottom: 3em;
font-size: 0.95em;
letter-spacing: 0.05em;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.r18-badge {
display: inline-block;
background: linear-gradient(135deg, #d32f2f, #b71c1c);
color: white;
padding: 6px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 0.9em;
box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
letter-spacing: 1px;
border: 1px solid rgba(255,255,255,0.3);
}
.btn-group {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
flex-wrap: wrap; /* 移动端自动换行 */
}
.btn {
padding: 16px 40px;
border: none;
border-radius: 50px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
text-decoration: none;
color: white;
font-weight: 700;
position: relative;
overflow: hidden;
font-family: "Noto Serif SC", serif;
letter-spacing: 0.1em;
min-width: 200px; /* 保证按钮有足够宽度 */
}
.btn-start {
background: linear-gradient(135deg, var(–color-primary), var(–color-secondary));
box-shadow: 0 8px 25px -5px rgba(184, 59, 94, 0.5);
}
.btn-uninstall {
background: #f5f5f5;
color: #999;
box-shadow: var(–shadow-sharp);
border: 1px solid #eee;
}
.btn:hover {
transform: translateY(-5px) scale(1.02);
}
.btn-start:hover {
box-shadow: 0 15px 35px -10px rgba(184, 59, 94, 0.6);
}
.btn:active {
transform: translateY(-2px);
}
.section-box {
background: rgba(255,255,255,0.6);
border-radius: var(–border-radius-sm);
padding: 35px;
margin-bottom: 40px;
border: 1px solid rgba(184, 59, 94, 0.1);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-box:hover {
background: rgba(255,255,255,0.9);
box-shadow: var(–shadow-soft);
}
/* 装饰性标题 */
.section-box h2 {
font-size: 1.5em;
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.section-box h2::before,
.section-box h2::after {
content: '⬥';
color: var(–color-secondary);
font-size: 0.6em;
opacity: 0.6;
}
.char-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 优化移动端卡片宽度 */
gap: 25px;
}
.char-card {
background: #fff;
border-radius: var(–border-radius-sm);
padding: 25px;
border: 1px solid rgba(0,0,0,0.04);
box-shadow: var(–shadow-sharp);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
/* 卡片顶部装饰条 */
.char-card::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 4px;
background: var(–color-primary);
opacity: 0.3;
transition: opacity 0.3s;
}
.char-card:hover {
transform: translateY(-8px);
box-shadow: var(–shadow-soft);
}
.char-card:hover::before {
opacity: 1;
}
.char-card h3 {
text-align: left;
margin-top: 0.5em;
border-bottom: 2px dotted rgba(184, 59, 94, 0.2);
padding-bottom: 10px;
}
.spoiler-box {
margin-top: 15px;
border: 1px solid rgba(184, 59, 94, 0.2);
background: var(–color-bg);
border-radius: 8px;
overflow: hidden;
}
.spoiler-summary {
padding: 12px 15px;
cursor: pointer;
background: rgba(184, 59, 94, 0.05);
color: var(–color-primary);
font-weight: 700;
font-size: 0.9em;
transition: background 0.3s;
display: flex;
align-items: center;
}
.spoiler-summary:hover {
background: rgba(184, 59, 94, 0.1);
}
.spoiler-summary::before {
content: '🔒';
margin-right: 8px;
font-size: 1.1em;
}
.spoiler-content {
padding: 15px;
font-size: 0.9em;
color: var(–color-text-light);
background: #fff;
border-top: 1px solid rgba(184, 59, 94, 0.1);
}
.censored {
color: transparent;
text-shadow: 0 0 8px rgba(184, 59, 94, 0.8);
background: rgba(184, 59, 94, 0.1);
padding: 0 4px;
border-radius: 4px;
font-weight: bold;
transition: all 0.5s ease;
cursor: help;
}
.censored:hover {
text-shadow: none;
color: var(–color-primary);
}
.highlight-bug {
background-color: #fff8e1;
border-left: 4px solid var(–color-accent);
padding: 20px;
margin: 20px 0;
font-family: "Fira Code", monospace;
font-size: 0.9em;
border-radius: 0 var(–border-radius-sm) var(–border-radius-sm) 0;
box-shadow: var(–shadow-sharp);
}
footer {
text-align: center;
margin-top: 80px;
padding: 40px 20px;
color: var(–color-text-light);
font-size: 0.85em;
border-top: 1px solid rgba(0,0,0,0.05);
}
/* — 移动端适配 — */
@media (max-width: 768px) {
.container {
margin: 0;
padding: 25px 15px;
border-radius: 0; /* 移动端全屏显示 */
box-shadow: none;
border: none;
}
h1.main-title {
font-size: 2rem;
}
h1.main-title span {
display: block;
margin-top: 10px;
font-size: 0.45em !important;
}
.btn-group {
flex-direction: column;
gap: 15px;
align-items: stretch; /* 按钮占满宽度 */
}
.btn {
width: 100%;
padding: 18px;
}
.section-box {
padding: 20px;
}
.char-grid {
grid-template-columns: 1fr; /* 强制单列 */
}
}
</style>
</head>
<body>
<!– 背景漂浮爱心 (保留但优化了动画) –>
<div class="bg-hearts">
<span class="bg-heart" style="left: 10%; animation-duration: 18s; font-size: 20px;">❤</span>
<span class="bg-heart" style="left: 25%; animation-duration: 22s; font-size: 14px;">✨</span>
<span class="bg-heart" style="left: 30%; animation-duration: 15s; font-size: 30px;">💗</span>
<span class="bg-heart" style="left: 45%; animation-duration: 28s; font-size: 18px;">♦</span>
<span class="bg-heart" style="left: 50%; animation-duration: 19s; font-size: 25px;">💕</span>
<span class="bg-heart" style="left: 70%; animation-duration: 25s; font-size: 22px;">💘</span>
<span class="bg-heart" style="left: 85%; animation-duration: 21s; font-size: 16px;">✨</span>
<span class="bg-heart" style="left: 90%; animation-duration: 20s; font-size: 28px;">💝</span>
</div>
<div class="container">
<header>
<h1 class="main-title">圣洁沦陷<br><span style="font-size: 0.5em; font-weight: 400; color: var(–color-text-light);">～在异世界被众人渴求的我只想打倒魔王～</span></h1>
<div class="subtitle">
<div class="r18-badge">🔞 R-18 ONLY</div>
<p style="margin: 0.5em 0;">仅限18岁以上玩家体验 | 严禁一切二次传播和商业化<br>
<span style="opacity: 0.8;">作者：Ano/阙 (仅发布于discord社区)</span></p>
</div>
</header>
<div class="btn-group">
<button class="btn btn-start">▶️ 新游戏 Start</button>
<button class="btn btn-uninstall">▶️ 卸载游戏（推荐）</button>
</div>
<div class="section-box">
<h2>【开发者的话】</h2>
<p>那个……这个。</p>
<p>怎么说呢，原本想做个正经中世纪史诗RPG来着。<br>
真的！参考了《罗兰之歌》和《疯狂的罗兰》喔！<br>
虽然成品只剩下“罗兰发疯”的部分了呢♪</p>
<p>哎呀，这怎么能怪我们呢？明明是那些角色自己不受控制地扑上来的——</p>
</div>
<div class="section-box">
<h2>【可公开情报】</h2>
<h3>■ 主人公：你</h3>
<p>年龄不详 / 职业自选<br>
啊，顺带一提，保持着纯洁之身。<br>
目前是。<br>
大概。</p>
<p>是这个世界的核心。所有人都渴求你。<br>
至于为什么？<br>
我们也不太清楚呢……<br>
反正设定就是这样啦！</p>
</div>
<div class="section-box">
<h2>【角色介绍】</h2>
<p style="text-align: center; color: var(–color-text-light); font-style: italic;">啊，这群人……该怎么说呢……<br>总之请多多担待。</p>
<div class="char-grid">
<!– 索拉尔 –>
<div class="char-card">
<h3>🐕 索拉尔 (20岁)</h3>
<p>自称是你的骑士、武器和看门犬。<br>
实际上就是个随时随地都在发情的疯狗。<br>
看到你对别人笑一下就会暴跳如雷。<br>
但意外的……有点可爱？<br>
开玩笑的。</p>
<details class="spoiler-box">
<summary class="spoiler-summary">点击查看隐藏设定（含剧透）</summary>
<div class="spoiler-content">
⚠️ <b>极密情报：</b><br>
真实身份是王室流落街头的私生子。<br>
但他本人对此嗤之以鼻：“那种无聊的血统，哪有做你的狗来得幸福啊！”<br>
<span style="font-size:0.85em; opacity:0.7; display: block; margin-top: 10px; font-style: italic;">(制作组：没救了这只狗)</span>
</div>
</details>
</div>
<!– 涅瓦洛恩 –>
<div class="char-card">
<h3>🐍 涅瓦洛恩 (22岁)</h3>
<p>表面上是个优雅的贵族法师。<br>
实际上是个<span class="censored">❤❤</span>爱好者。<br>
特别喜欢看你在别人身下<span class="censored">❤❤</span>的样子。<br>
啊，这里用<span class="censored">❤❤</span>代替真的没问题吗？<br>
没关系，我们可是无·审·查·平台呢～</p>
<details class="spoiler-box">
<summary class="spoiler-summary">点击查看隐藏设定（含剧透）</summary>
<div class="spoiler-content">
⚠️ <b>极密情报：</b><br>
正在秘密研究能够改变肉体形态的禁忌“血肉炼金术”。<br>
终极目标似乎是想把你改造成永远离不开他的形状❤。<br>
<span style="font-size:0.85em; opacity:0.7; display: block; margin-top: 10px; font-style: italic;">(制作组：真的很危险这个人)</span>
</div>
</details>
</div>
<!– 西蒙尼斯 –>
<div class="char-card">
<h3>🔮 西蒙尼斯 (年龄不可考)</h3>
<p>外貌是绝世美青年。<br>
身份是宫廷占卜师。<br>
实际上……<br>
啊，这个还是等你自己发现比较有趣。</p>
<details class="spoiler-box">
<summary class="spoiler-summary">点击查看隐藏设定（含剧透）</summary>
<div class="spoiler-content">
⚠️ <b>极密情报：</b><br>
别猜了，他就是魔王本人。<br>
一直在王城等着勇者（你）去推倒他。<br>
物理意义上的推倒❤。
</div>
</details>
</div>
<!– 瑞弗 –>
<div class="char-card">
<h3>🎮 瑞弗 (23岁)</h3>
<p>来自异世界的穿越者。以为自己拿的是龙傲天剧本。<br>
实际上只是可攻略NPC之一。这一点真的很搞笑。</p>
<p>至于他本人？表面上是阴郁系美男子。实际上每天都在内心上演「正宫的忧郁」。</p>
<div style="background: var(–color-bg); padding: 10px; border-radius: 8px; font-size: 0.9em; margin: 10px 0;">
<i>「作为丈夫我必须……」<br>「正宫的责任就是……」</i>
</div>
<p>明明连告白都没成功过，到底在自称什么啊？<br>
每天都在内心疯狂吐槽这个世界的逻辑。<br>
<i>「为什么温泉里会有触手啊？！」</i><br>
他大概会这样想吧。<br>
但实际上他也要来<span class="censored">❤❤</span>你。<br>
真可怜啊，瑞弗君。</p>
<details class="spoiler-box">
<summary class="spoiler-summary">点击查看隐藏设定（含剧透）</summary>
<div class="spoiler-content">
⚠️ <b>极密情报：</b><br>
在现实世界其实是你的前男友（惨遭甩掉的那种）。<br>
标准的重力系沉重男子，即使穿越了也对你念念不忘。<br>
虽然嘴上不承认，但身体非常诚实地想要和你复合。
</div>
</details>
</div>
</div>
</div>
<div class="section-box" style="background: linear-gradient(to bottom right, #fff0f5, #fff);">
<h2>【舞台说明：圣罗兰王国】</h2>
<p style="font-family: 'Noto Serif SC', serif; font-size: 0.95em; color: var(–color-text-light); padding: 0 20px;">
<i>“集合了地球上失去的事物，或是因为我们的谬误，或是时光流逝，运气不足，在地球上失去的，都汇集到此处。<br>
我说的并不是王权和财富，尽管命运的变迁全由它摆布。<br>
我想说的是，命运女神无法送来或拿去的事物，许多名望留在此处，久而久之，下面的时间就会将其吞噬：我们这些罪人向上帝祈祷，无尽的誓愿都留在此处。<br>
情人的眼泪和叹息，游戏中虚度的时日，无知人长久的怠惰，从来漫无目的遐思，多么微不足道的欲望啊，将月球的大半边充斥。”</i>
</p>
<div style="text-align: center; color: var(–color-primary); margin: 20px 0; opacity: 0.5;">✦ ✦ ✦</div>
<p>啊，大概就是汇聚了各种各样欲望的地方。<br>
虽然引用这段话的制作人可能根本就不理解原作在说什么。<br>
毕竟连游戏简介都要玩<span class="censored">❤❤</span>梗的人，怎么可能是正经的文学爱好者啊！</p>
<p>不过说真的，谁在乎那些古典文学的内涵啊！<br>
我们只要<span class="censored">❤❤</span>就好了！<br>
……等等，我是不是把实话说出来了？</p>
</div>
<div class="section-box">
<h2>【系统提示 & 警告】</h2>
<p>※本作99%的剧情都在为<span class="censored">❤❤</span>服务<br>
※建议关闭大脑体验<br>
※但说真的，开着也没办法理解吧。</p>
<div style="background: #fff5f5; padding: 25px; border-radius: 16px; border: 2px solid #ffcdd2; margin-top: 25px; box-shadow: inset 0 0 20px rgba(255,0,0,0.05);">
<h3 style="color: #d32f2f; margin-top: 0; display: flex; align-items: center;">
<span style="font-size: 1.5em; margin-right: 10px;">🔞</span> 严重警告
</h3>
<p>本作包含以下内容：<br>
·逻辑死亡的世界观<br>
·<span class="censored">❤❤❤❤❤❤❤❤❤❤</span><br>
·<span class="censored">❤❤❤❤❤❤❤❤❤❤</span><br>
·<span class="censored">❤❤❤❤❤❤❤❤❤❤</span></p>
<p style="font-weight: 700; color: #b71c1c;">请确认您已做好心理准备。<br>
如果期待的是正统西幻冒险……<br>
现在退出还来得及。</p>
</div>
</div>
<div class="section-box">
<h2>【隐藏成就提示】</h2>
<ul style="list-style: none; padding-left: 0;">
<li style="margin-bottom: 10px;">💖 「圣洁保持」：通关时仍为<span class="censored">❤❤</span></li>
<li style="margin-bottom: 10px;">💖 「魔王新娘」：成为<span class="censored">魔王</span>的<span class="censored">专属❤❤❤</span></li>
<li style="margin-bottom: 10px;">💖 「最后的亲吻」：让瑞弗在<span class="censored">❤❤</span>时说出「我爱你」三个字</li>
</ul>
<p style="font-size: 0.85em; text-align: right; color: var(–color-text-light); font-style: italic;">……不过，按照设定这个人连告白都不敢呢。</p>
</div>
<div class="section-box">
<h2>【Bug报告】</h2>
<p>啊，程序员说：这种东西只要能动不就行了么修什么bug啊。</p>
<div class="highlight-bug">
<strong>[待处理工单 #SB250] 关于角色瑞弗的异常行为</strong><br>
<span style="opacity: 0.8;">有玩家反馈，为什么这家伙自带系统啊？还是lol？这到底有什么关系？</span><br>
<div style="margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(0,0,0,0.1);">
<strong>[开发者回复]</strong><br>
哦，那个啊。好像是bug，或许是角色自带的？不过我严重怀疑是制作人看杜蕾斯广告灵机一动想到“做爱的时候能不能开金身”然后临时加进来的东西。<br>
<span style="color: #d32f2f; font-weight: bold;">目前不打算修复，因为太生草了。</span>
</div>
</div>
</div>
<footer>
<h2>【最后的话】</h2>
<p>本作包含大量<span class="censored">❤❤❤❤</span>要素。<br>
如果你在游戏中感到困惑……<br>
那是正常的。<br>
毕竟连制作组也不知道这剧情在演什么。</p>
<div style="margin-top: 40px; opacity: 0.6; font-size: 0.9em;">
© 2025 圣罗兰欲望汇聚委员会 | Powered by Lust & Chaos
</div>
</footer>
</div>
<script>
document.querySelector('.btn-start').addEventListener('click', function() {
alert('❤ 准备好堕落了吗？游戏开始 ❤');
});
document.querySelector('.btn-uninstall').addEventListener('click', function() {
alert('明智的选择。但你已经无法回头了♪');
});
</script>
</body>
</html>
“`