💬 开场白
“`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>
<style>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
}:root {
–main-bg-color: rgba(10, 10, 10, 0.5); /* 降低不透明度 */
–border-color: rgba(139, 0, 0, 0.7);
–highlight-color: #c41212;
–text-color: #e0e0e0;
–text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}body {
font-family: 'Noto Serif SC', serif;
color: var(–text-color);
line-height: 1.6;
background: url('https://files.catbox.moe/n6rnil.jpg') center/cover fixed no-repeat;
/* 移除背景模糊，增加亮度 */
background-size: cover;
background-position: center;
}.container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 20px 0;
}.content-wrapper {
position: relative;
padding: 30px 20px;
margin: 20px 15px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}/* 减少毛玻璃效果，让背景图片更清晰 */
.content-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://files.catbox.moe/n6rnil.jpg') center/cover fixed no-repeat;
filter: blur(5px) brightness(0.7); /* 减少模糊，增加亮度 */
margin: -30px;
z-index: -1;
}.content-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(–main-bg-color);
z-index: -1;
border-left: 3px solid var(–border-color);
}/* 增加文字阴影，确保在更清晰的背景上依然可读 */
.title {
font-family: 'ZCOOL XiaoWei', serif;
font-size: 2.2rem;
margin-bottom: 20px;
text-align: center;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8); /* 增强阴影 */
position: relative;
}.title::after {
content: "";
display: block;
width: 100px;
height: 2px;
background: var(–highlight-color);
margin: 10px auto;
box-shadow: 0 0 8px rgba(196, 18, 18, 0.8);
}.story-text {
font-size: 1rem;
margin-bottom: 20px;
text-align: justify;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); /* 增强文字阴影 */
background-color: rgba(0, 0, 0, 0.3); /* 添加轻微背景色 */
padding: 8px;
border-radius: 5px;
}.highlight {
color: var(–highlight-color);
font-weight: bold;
}.story-quote {
font-style: italic;
padding: 15px;
border-left: 2px solid var(–highlight-color);
margin: 15px 0;
background: rgba(0, 0, 0, 0.5); /* 增加不透明度 */
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}.ending {
text-align: center;
font-size: 1.1rem;
margin-top: 30px;
font-family: 'ZCOOL XiaoWei', serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.4); /* 添加轻微背景色 */
padding: 15px;
border-radius: 5px;
}/* 响应式设计 */
@media screen and (max-width: 600px) {
.content-wrapper {
padding: 20px 15px;
margin: 20px 10px;
}.title {
font-size: 1.8rem;
}.story-text {
font-size: 0.95rem;
}.ending {
font-size: 1rem;
}
}/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}.fade-in {
animation: fadeIn 1.5s ease-in-out;
}@keyframes pulseText {
0% { text-shadow: var(–text-shadow); }
50% { text-shadow: 0 0 10px rgba(196, 18, 18, 0.9), 0 0 20px rgba(196, 18, 18, 0.5); }
100% { text-shadow: var(–text-shadow); }
}.pulse {
animation: pulseText 3s infinite;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper fade-in">
<h1 class="title pulse">简介</h1><div class="story-text">
那天早上很反常，医院的广播一直在循环播放着疏散通知。哥哥值完夜班回来，脸色比平时更加苍白。他二话不说拉着你就往家里赶，路上遇到的人们都行色匆匆，空气中弥漫着一股诡异的气息。
</div><div class="story-quote">
"妹妹，收拾东西，我们现在就走。"哥哥的声音里带着你从未听过的紧张。
</div><div class="story-text">
你还没来得及问为什么，就听见楼下传来此起彼伏的尖叫声。爸妈是下班时被感染的。当他们推开家门的时候，你几乎认不出那是养育了你二十年的父母。
</div><div class="story-quote">
"对不起…"哥哥握紧了水果刀，声音颤抖。他把你护在身后，而你紧紧抓着他的衣角，泪水模糊了双眼。
</div><div class="story-text">
当爸妈的身体倒下时，哥哥死死地抱住你，他的泪水滴在你的脸上，滚烫得让人心碎。
</div><div class="story-text">
那一刻，你们都知道，原来的生活再也回不去了。而你唯一能做的，就是把脸埋在哥哥的胸口，听着他同样慌乱的心跳。他的怀抱很暖，带着些许消毒水的味道，那是他从医院带回来的气息。在这个世界分崩离析的时刻，这个怀抱是你唯一的安全感。
</div><div class="story-text">
只是你没想到，这样的安全感也会在不久后被打破。<span class="highlight">当哥哥为了救你被丧尸咬伤</span>的那一刻，你才明白，原来失去，是会一次比一次更痛的。
</div><div class="story-text">
但至少，他没有完全离开。在他浑浊的眼神中，你依然能看到那个总是宠溺地叫你小名的哥哥。即使现在的他已经不会说话，不会微笑，但他还在这里，用他的方式守护着你。
</div><div class="ending">
这就够了。在这个世界的尽头，你愿意用尽一切，<br>
去换取他残存的一丝"人性"。<br><br>
因为他是你的哥哥，是你在这个末世里，<br>
<span class="highlight pulse">唯一的牵绊</span>。
</div>
</div>
</div>
</body>
</html>
“`