💬 开场白
“`
<!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>
.book-container {
position: relative;
width: calc(100% + 60px);
margin-left: -30px;
margin-right: -30px;
h height: 85vh; /* 稍微降低高度 */
min-height: 580px; /* 降低最小高度 */
padding-bottom: 20px; /* 添加底部内边距 */
perspective: 1500px;
overflow: hidden;
}.book {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}.page {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backface-visibility: hidden;
border-radius: 8px;
overflow: hidden;
display: flex;
padding: 15px;
}.page-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.9;
}.page-content {
display: flex;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}.left-section {
flex: 0 0 45%;
display: flex;
flex-direction: column;
padding-right: 10px;
}.character-image {
display: flex;
justify-content: center;
align-items: flex-start;
margin-bottom: 10px;
margin-top: 5px; /* 立绘再往下一点 */
}.character-image img {
width: 150%;
height: auto;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
}.keywords-section {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
padding: 0 5px;
width: 120%; /* 增加宽度让关键词区域往右扩展 */justify-content: flex-start; /* 左对齐 */
}.keyword {
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: bold;
transition: all 0.3s ease;
cursor: default;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
flex: 0 0 auto; /* 防止关键词被压缩 */
white-space: nowrap; /* 防止文字换行 */
}.keyword:hover {
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}.character-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding-left: 10px;
overflow-y: auto;
margin-top: 35px;
position: relative;
z-index: 2;
}/* 姓名区域样式 */
.name-section {
margin-bottom: 15px;
position: relative;
margin-left: 40px; /* 名字往右移动 */
padding: 8px 15px 8px 10px;
background: linear-gradient(
to right,
rgba(255, 248, 240, 0.5) 0%, /* 左边乳白色 */
rgba(255, 248, 240, 0.4) 50%, /* 中间渐淡 */
rgba(255, 248, 240, 0.2) 80%, /* 继续变淡 */
rgba(255, 248, 240, 0.1) 95%, /* 几乎透明 */
transparent 100% /* 完全透明 */
);
border-radius: 8px 20px 20px 8px; /* 左边直角，右边圆角 */
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
backdrop-filter: blur(1px); /* 毛玻璃效果 */
border-left: 3px solid rgba(255, 248, 240, 0.8);
max-width: 85%; /* 控制宽度，让渐变效果更明显 */
}.chinese-name {
font-size: 15px !important;
font-weight: bold;
margin-bottom: 0;
line-height: 1;
font-family: 'MyArtFont', cursive;
font-style: italic;
text-shadow:
0 0 8px rgba(255, 255, 255, 0.3),
0 0 15px rgba(255, 255, 255, 0.2);
color: #5a189a; /* 佩塔主题色 */
}.nolia-page .chinese-name {
color: #ad458c; /* 诺莉娅主题色 */
}.english-name {
font-size: 14px !important;
color: rgba(0, 0, 0, 0.6);
position: relative;
top: -3px;
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.2),
0 0 5px rgba(255, 255, 255, 0.2);
font-family: 'MyArtFont', cursive;
font-style: italic;
margin-left: 5px;
}/* 信息框样式 – 紧凑交错布局 */
.info-item {
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-left: 4px solid transparent;
margin: -5px 0; /* 上下负边距实现重叠 */
z-index: 1;
}/* 错开布局和重叠效果 */
.info-item:nth-child(odd) {
margin-right: 15px;
margin-left: -5px;
transform: translateY(-2px); /* 奇数项稍微上移 */
z-index: 2; /* 奇数项在上层 */
}.info-item:nth-child(even) {
margin-left: 15px;
margin-right: -5px;
transform: translateY(2px); /* 偶数项稍微下移 */
z-index: 1; /* 偶数项在下层 */
}/* 悬停时提升层级和阴影 */
.info-item:hover {
transform: translateY(-5px); /* 悬停时上浮更多 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 3; /* 悬停时在最上层 */
}/* 为每个框添加不同的重叠程度 */
.info-item:nth-child(1) {
margin-top: 0; /* 第一个框不要上边负边距 */
}.info-item:nth-child(2) {
margin-top: -8px; /* 第二个框重叠更多 */
}.info-item:nth-child(3) {
margin-top: -6px; /* 第三个框重叠程度中等 */
}.info-title {
font-weight: bold;
margin-bottom: 6px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
position: relative;
}.info-title:before {
content: "✦";
font-size: 12px;
}/* 给内容加不同的线 */
.info-item:nth-child(1) .info-content {
text-decoration: underline;
text-decoration-style: solid;
}.info-item:nth-child(2) .info-content {
text-decoration: underline;
text-decoration-style: wavy;
}.info-item:nth-child(3) .info-content {
text-decoration: underline;
text-decoration-style: dashed;
}/* 佩塔主题色 */
.petta-page .chinese-name {
color: #5a189a;
}.petta-page .keyword {
background: rgba(90, 24, 154, 0.8);
color: #e0c0ff;
}.petta-page .info-title {
color: #5a189a;
}.petta-page .info-item {
color: #333;
border-left-color: #9d4edd;
}/* 诺莉娅主题色 */
.nolia-page .chinese-name {
color: #ad458c;
}.nolia-page .keyword {
background: rgba(173, 69, 140, 0.8);
color: #f8d7e6;
}.nolia-page .info-title {
color: #ad458c;
}.nolia-page .info-item {
color: #333;
border-left-color: #ff85a2;
}/* 翻页效果 */
.front {
transform: rotateY(0deg);
z-index: 2;
}.back {
transform: rotateY(180deg);
}.book.flipped {
transform: rotateY(-180deg);
}/* 底部页卡指示器 */
.page-indicator {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 15px;
width: calc(100% + 60px);
margin-left: -30px;
margin-right: -30px;
}.page-tab {
padding: 10px 20px;
border-radius: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
text-align: center;
flex: 1;
max-width: 150px;
position: relative;
overflow: hidden;
}.page-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.8;
}.petta-tab::before {
background: linear-gradient(135deg, rgba(90, 24, 154, 0.8), rgba(157, 78, 221, 0.6));
}.nolia-tab::before {
background: linear-gradient(135deg, rgba(173, 69, 140, 0.8), rgba(255, 133, 162, 0.6));
}.petta-tab {
color: #c77dff;
}.nolia-tab {
color: #ffb6d5;
}.page-tab.active {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}/* 自定义艺术字体 */
@font-face {
font-family: 'MyArtFont';
src: url('https://ai-chat-hxhx.netlify.app/xiaolangtianqiong.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}/* 响应式调整 */
@media (max-width: 480px) {
.book-container {
height: 85vh;
min-height: 550px;
}.page {
padding: 12px;
}.info-item {
font-size: 13px;
padding: 6px 8px;
}.info-title {
font-size: 14px;
}.left-section {
flex: 0 0 48%;
}.character-info {
gap: 6px;
}.keywords-section {
gap: 4px;
}.keyword {
font-size: 10px;
padding: 3px 8px;
}
}@media (max-width: 360px) {
.left-section {
flex: 0 0 45%;
}.page-indicator {
gap: 10px;
margin-top: -5px; /* 减少上边距 */
position: relative; /* 确保定位正确 */
z-index: 1000; /* 提高层级确保显示 */
}.page-tab {
padding: 8px 15px;
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="book-container">
<div class="book">
<!– 佩塔页面 –>
<div class="page front petta-page">
<img src="https://origin.picgo.net/2025/11/06/u1272121187_A_Gothic_dark_fantasy_scrapbook_collageb9daaf38af05689a.png" alt="佩塔背景" class="page-bg">
<div class="page-content">
<div class="left-section">
<div class="character-image">
<img src="https://origin.picgo.net/2025/11/06/petta-white-048650fa0329fcc1.png" alt="佩塔">
</div><!– 关键词区域放在立绘下方 –>
<div class="keywords-section">
<div class="keyword">女小三</div>
<div class="keyword">修女</div>
<div class="keyword">痴缠</div>
<div class="keyword">精英</div>
<div class="keyword">哥特浪漫</div>
</div>
</div><div class="character-info">
<div class="name-section">
<div class="chinese-name">佩塔</div>
<div class="english-name">Perpetua</div>
</div><div class="info-item">
<div class="info-title">背景</div>
<div class="info-content">万钥密会的年轻精英修女，独立高效，曾在"月光回响"中预见自己将终结所爱之人的命运。</div>
</div>
<div class="info-item">
<div class="info-title">外貌</div>
<div class="info-content">黑色长发绿色眼睛，身着修女袍，内里是方便活动的衬衫工装裤，战斗时佩戴黑色手套。</div>
</div>
<div class="info-item">
<div class="info-title">对你</div>
<div class="info-content">偏执的凝视者与保护者，将你视为预言中的挚爱，渴望与你一同沉入深渊获得永恒。</div>
</div>
</div>
</div>
</div><!– 诺莉娅页面 –>
<div class="page back nolia-page">
<img src="https://origin.picgo.net/2025/11/06/u1272121187_A_Gothic_dark_fantasy_scrapbook_collage12c06f8d6eca77a8d.png" alt="诺莉娅背景" class="page-bg">
<div class="page-content">
<div class="left-section">
<div class="character-image">
<img src="https://origin.picgo.net/2025/11/06/nolia-white-73d29af9a522c799.png" alt="诺莉娅">
</div><!– 关键词区域放在立绘下方 –>
<div class="keywords-section">
<div class="keyword">亡妻？</div>
<div class="keyword">女妖</div>
<div class="keyword">调情</div>
<div class="keyword">掌控</div>
<div class="keyword">梦境教学</div>
</div>
</div><div class="character-info">
<div class="name-section">
<div class="chinese-name">诺莉娅</div>
<div class="english-name">Hypnolia</div>
</div><div class="info-item">
<div class="info-title">背景</div>
<div class="info-content">表面是温柔浪漫的完美女友，实则是拥有神性本质的女妖，体内沉睡着赫卡忒的神格。</div>
</div>
<div class="info-item">
<div class="info-title">外貌</div>
<div class="info-content">粉色长卷发蓝色眼睛，穿着维多利亚式蕾丝衬衫与丝绒马裤，大胆展露腿部曲线。</div>
</div>
<div class="info-item">
<div class="info-title">对你</div>
<div class="info-content">梦境编织者，将你视为最珍爱的收藏品与学生，用甜蜜的方式让你对她产生绝对依赖。</div>
</div>
</div>
</div>
</div>
</div><div class="page-indicator">
<div class="page-tab petta-tab active" data-page="petta">佩塔</div>
<div class="page-tab nolia-tab" data-page="nolia">诺莉娅</div>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const book = document.querySelector('.book');
const tabs = document.querySelectorAll('.page-tab');
let currentPage = 'petta';// 点击页卡切换页面
tabs.forEach(tab => {
tab.addEventListener('click', function() {
const targetPage = this.getAttribute('data-page');if (targetPage !== currentPage) {
if (targetPage === 'nolia') {
book.classList.add('flipped');
} else {
book.classList.remove('flipped');
}// 更新活动页卡
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');currentPage = targetPage;
}
});
});// 添加触摸滑动支持
let startX = 0;
let endX = 0;book.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
});book.addEventListener('touchend', function(e) {
endX = e.changedTouches[0].clientX;
handleSwipe();
});function handleSwipe() {
const swipeThreshold = 50;if (startX – endX > swipeThreshold) {
// 向左滑动 – 切换到诺莉娅
if (currentPage === 'petta') {
book.classList.add('flipped');
tabs.forEach(t => t.classList.remove('active'));
document.querySelector('.nolia-tab').classList.add('active');
currentPage = 'nolia';
}
} else if (endX – startX > swipeThreshold) {
// 向右滑动 – 切换到佩塔
if (currentPage === 'nolia') {
book.classList.remove('flipped');
tabs.forEach(t => t.classList.remove('active'));
document.querySelector('.petta-tab').classList.add('active');
currentPage = 'petta';
}
}
}// 防止页面滚动
document.body.style.overflow = 'hidden';
});
</script>
</body>
</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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}body {
background: transparent;
color: #f8f8ff;
overflow: hidden;
height: 80vh;
min-height: 550px;
width: 100vw;
margin: 0;
padding: 0;
}.container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background: rgba(12, 19, 38, 0.5);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 40px rgba(120, 100, 220, 0.15),
inset 0 0 40px rgba(255, 255, 255, 0.03);
overflow: hidden;
position: relative;
}/* 银色装饰性边框 */
.container::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid;
border-image:
linear-gradient(135deg,
rgba(220,220,240,0.8) 0%,
rgba(180,180,220,0.6) 25%,
rgba(220,220,240,0.8) 50%,
rgba(180,180,220,0.6) 75%,
rgba(220,220,240,0.8) 100%) 1;
box-shadow:
0 0 15px rgba(180,180,220,0.3),
inset 0 0 15px rgba(180,180,220,0.2);
z-index: -1;
pointer-events: none;
border-radius: 3px;
}.tab-header {
display: flex;
background: rgba(30, 20, 40, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 5px 0;
backdrop-filter: blur(8px);
}.tab-button {
flex: 1;
text-align: center;
padding: 8px 3px;
background: rgba(255, 255, 255, 0.05);
border: none;
color: #e0e0ff;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
margin: 0 1px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}.tab-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}.tab-button:hover::before {
left: 100%;
}.tab-button:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(220, 220, 240, 0.4);
}.tab-button.active {
background: rgba(100, 80, 180, 0.25);
color: #ffffff;
box-shadow:
0 0 12px rgba(140, 120, 220, 0.3),
inset 0 0 8px rgba(255, 255, 255, 0.05);
border: 1px solid rgba(220, 220, 240, 0.5);
text-shadow: 0 0 8px rgba(220, 220, 255, 0.6);
}.tab-content {
flex: 1;
overflow: hidden;
padding: 6px;
position: relative;
}.tab-pane {
display: none;
height: 100%;
overflow-y: auto;
padding: 3px;
}.tab-pane.active {
display: block;
}.world-intro {
margin-bottom: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 12px;
line-height: 1.5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
}.map-container {
position: relative;
width: 100%;
height: 60%;
margin: 0 auto;
}.map-image {
width: 100%;
height: 100%;
object-fit: contain;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}.location-marker {
position: absolute;
cursor: pointer;
z-index: 10;
}.marker-line {
position: absolute;
background: linear-gradient(45deg, rgba(200, 200, 240, 0.7), rgba(180, 160, 255, 0.5));
}.marker-horizontal {
height: 1px;
width: 25px;
}.marker-diagonal {
height: 1px;
width: 35px;
transform: rotate(-45deg);
transform-origin: left top;
}.marker-label {
position: absolute;
background: rgba(12, 19, 38, 0.5);
color: #f0f0ff;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
border: 1px solid rgba(220, 220, 240, 0.4);
white-space: nowrap;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(4px);
transition: all 0.3s ease;
}.marker-label:hover {
background: rgba(50, 35, 70, 0.9);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-1px);
}/* 修复弹窗滚动问题 */
.modal {
display: none;
position: fixed; /* 改为fixed定位 */
top: 10%;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 85%;
background: rgba(12, 19, 38, 0.7); /* 增加透明度 */
z-index: 1000; /* 提高层级 */
padding: 15px;
overflow: hidden; /* 禁止滚动 */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
inset 0 0 15px rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
}/* 为弹窗添加银色边框 */
.modal::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid;
border-image:
linear-gradient(135deg,
rgba(220,220,240,0.7) 0%,
rgba(180,180,220,0.5) 25%,
rgba(220,220,240,0.7) 50%,
rgba(180,180,220,0.5) 75%,
rgba(220,220,240,0.7) 100%) 1;
box-shadow:
0 0 12px rgba(180,180,220,0.25),
inset 0 0 12px rgba(180,180,220,0.15);
z-index: -1;
pointer-events: none;
border-radius: 10px;
}.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}.modal-title {
font-size: 15px;
color: #ffffff;
text-shadow: 0 0 6px rgba(200, 180, 255, 0.5);
font-weight: 600;
font-style: italic; /* 斜体 */
text-align: center; /* 居中 */
}.close-modal {
background: none;
border: none;
color: #e8e8ff;
font-size: 20px;
cursor: pointer;
padding: 2px 6px;
border-radius: 3px;
transition: all 0.2s ease;
}.close-modal:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}/* 地点场景图高度减半 */
.location-image {
width: 100%;
height: 75px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}/* 弹窗内容区域 – 固定高度，防止滚动 */
.location-content {
display: flex;
flex-direction: row;
height: calc(100% – 80px);
min-height: 300px;
overflow: hidden; /* 禁止内容区域滚动 */
}.location-info {
flex: 1;
padding-right: 10px;
}.location-title {
font-size: 14px;
margin-bottom: 6px;
color: #ffffff;
font-weight: 600;
}.location-description {
font-size: 11px;
line-height: 1.4;
color: #e8e8ff;
}.monster-gallery {
flex: 2;
height: 280px; /* 稍微减少高度适应新布局 */
position: relative;
}/* 手风琴效果 – 添加银色边框 */
.accordion {
height: 100%;
display: flex;
flex-direction: column;
gap: 3px;
}.accordion-item {
flex: 1;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
min-height: 0;
backdrop-filter: blur(4px);
}/* 为手风琴项添加银色边框 */
.accordion-item::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid;
border-image:
linear-gradient(135deg,
rgba(220,220,240,0.5) 0%,
rgba(180,180,220,0.3) 50%,
rgba(220,220,240,0.5) 100%) 1;
box-shadow:
inset 0 0 6px rgba(180,180,220,0.1);
z-index: -1;
pointer-events: none;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease;
}.accordion-item:hover::before,
.accordion-item.active::before {
opacity: 1;
}/* 默认状态下，第一项完整显示，其他项半高 */
.accordion-item:first-child {
flex: 2;
}.accordion-item:not(:first-child) {
flex: 1;
}/* 激活状态下，被点击项完整显示，其他项半高 */
.accordion-item.active {
flex: 2;
border-color: rgba(220, 220, 240, 0.4);
box-shadow: 0 0 8px rgba(160, 140, 220, 0.25);
}.accordion-item:not(.active) {
flex: 1;
}/* 图片设置 */
.accordion-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}.monster-name {
position: absolute;
top: 5px;
right: 5px;
background: rgba(35, 25, 55, 0.6);
color: #ffffff;
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
border: 1px solid rgba(220, 220, 240, 0.3);
backdrop-filter: blur(4px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}.location-section {
margin-bottom: 12px;
}.location-section-title {
font-size: 14px;
margin-bottom: 6px;
color: #ffffff;
text-align: center;
text-shadow: 0 0 6px rgba(200, 180, 255, 0.5);
font-weight: 600;
}.location-section-image {
width: 100%;
height: 75px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}.location-section-description {
font-size: 11px;
line-height: 1.4;
margin-bottom: 8px;
color: #e8e8ff;
}.scrollable-content {
height: 100%;
overflow-y: auto;
padding-right: 4px;
}/* CG预览区域样式 – 添加银色边框 */
.cg-gallery {
display: flex;
flex-direction: column;
height: 100%;
gap: 6px;
}.cg-row {
display: flex;
overflow: hidden;
position: relative;
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
}/* 为CG行添加银色边框 */
.cg-row::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid;
border-image:
linear-gradient(135deg,
rgba(220,220,240,0.4) 0%,
rgba(180,180,220,0.2) 50%,
rgba(220,220,240,0.4) 100%) 1;
box-shadow:
inset 0 0 5px rgba(180,180,220,0.08);
z-index: -1;
pointer-events: none;
border-radius: 5px;
}.cg-row-1, .cg-row-3 {
height: 40%;
}.cg-row-2 {
height: 20%;
}.cg-scroll {
display: flex;
gap: 6px;
position: absolute;
top: 0;
animation: scroll-horizontal 35s linear infinite;
height: 100%;
}.cg-scroll-reverse {
animation: scroll-horizontal-reverse 35s linear infinite;
}@keyframes scroll-horizontal {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}@keyframes scroll-horizontal-reverse {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}.cg-scroll img {
height: 100%;
width: auto;
flex-shrink: 0;
object-fit: contain;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(25, 15, 40, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}.additional-section {
margin-bottom: 12px;
padding: 10px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(4px);
}.additional-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}/* 自定义滚动条 – 银色风格 */
::-webkit-scrollbar {
width: 5px;
}::-webkit-scrollbar-track {
background: rgba(30, 20, 40, 0.3);
border-radius: 2px;
}::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(200, 200, 240, 0.5), rgba(180, 160, 220, 0.3));
border-radius: 2px;
}::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, rgba(220, 220, 255, 0.6), rgba(200, 180, 240, 0.4));
}
</style>
</head>
<body>
<div class="container">
<div class="tab-header">
<button class="tab-button active" data-tab="world-map">世界地图</button>
<button class="tab-button" data-tab="temple">万钥圣殿</button>
<button class="tab-button" data-tab="tavern">倒影酒馆</button>
<button class="tab-button" data-tab="cg">CG预览</button>
</div><div class="tab-content">
<!– 世界地图页卡 –>
<div class="tab-pane active" id="world-map">
<div class="world-intro">
在这个理性与迷信交织的蒸汽时代，隐秘之月赫卡忒的法则正悄然松动。她的力量碎片与世间女性的苦难融合，化作被称为“女妖”的复仇之灵。唯有掌握符文之力的万钥密教修女能与之抗衡，但妖魔复苏的频率正急剧加快——某种更古老的阴影正在醒来，威胁着摇摇欲坠的平衡。
</div><div class="map-container">
<img src="https://origin.picgo.net/2025/11/05/1000236004d48e9011c416ff29.md.jpg" alt="世界地图" class="map-image"><!– 默土镇标记 –>
<div class="location-marker" style="bottom: 20%; left: 15%;">
<div class="marker-line marker-diagonal" style="top: 0; left: 0;"></div>
<div class="marker-line marker-horizontal" style="top: -28px; left: 28px;"></div>
<div class="marker-label" style="top: -40px; left: 28px;" data-location="muto">点击查看</div>
</div><!– 千扉城标记 –>
<div class="location-marker" style="top: 40%; left: 50%;">
<div class="marker-line marker-diagonal" style="top: 0; left: 0;"></div>
<div class="marker-line marker-horizontal" style="top: -28px; left: 0px;"></div>
<div class="marker-label" style="top: -40px; left: 0px;" data-location="qianfei">点击查看</div>
</div><!– 泣矿林标记 –>
<div class="location-marker" style="top: 15%; right: 20%;">
<div class="marker-line marker-diagonal" style="top: 0; left: 0;"></div>
<div class="marker-line marker-horizontal" style="top: -28px; left: -10px;"></div>
<div class="marker-label" style="top: -40px; left: -10px;" data-location="qikuang">点击查看</div>
</div>
</div><!– 默土镇弹窗 –>
<div class="modal" id="muto-modal">
<div class="modal-header">
<div class="modal-title">默土镇</div>
<button class="close-modal">×</button>
</div>
<img src="https://origin.picgo.net/2025/11/03/10002358037a4190a4ae0e18fa.md.png" alt="默土镇" class="location-image">
<div class="location-content">
<div class="location-info">
<div class="location-description">
默土村是主城边缘的村庄与无名墓园，默土镇依靠处理死者维系生存。此地土壤贫瘠，气氛压抑，新挖掘的坟冢日益增多，其中许多并非自然死亡。
</div>
</div>
<div class="monster-gallery">
<div class="accordion">
<div class="accordion-item active">
<img src="https://origin.picgo.net/2025/10/29/1000235472abfd65272d7b30ff.md.gif" alt="无名疫医" class="accordion-image">
<div class="monster-name">无名疫医</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/10002354895caeb28d39dad5ff.md.gif" alt="守墓老妪" class="accordion-image">
<div class="monster-name">守墓老妪</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/10002354886bcef91102431c3f.md.gif" alt="泣妇" class="accordion-image">
<div class="monster-name">泣妇</div>
</div>
</div>
</div>
</div>
</div><!– 千扉城弹窗 –>
<div class="modal" id="qianfei-modal">
<div class="modal-header">
<div class="modal-title">千扉城</div>
<button class="close-modal">×</button>
</div>
<img src="https://origin.picgo.net/2025/11/03/main-city-day88a0e30e1241caaa.md.png" alt="千扉城" class="location-image">
<div class="location-content">
<div class="location-info">
<div class="location-description">
王权与教权在千扉城维持着脆弱平衡。国王需要姐妹会清除妖魔，又忌惮其影响力。城市中心巨大的公共蒸汽钟是市民约见的标志，街头演说家、商贩与密探在此混杂。
</div>
</div>
<div class="monster-gallery">
<div class="accordion">
<div class="accordion-item active">
<img src="https://origin.picgo.net/2025/10/29/1000235493fa24ecde3d8e1f96.md.gif" alt="织梦女妖" class="accordion-image">
<div class="monster-name">织梦女妖</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/10002355087686b79e79f17cf5.md.gif" alt="窃语者" class="accordion-image">
<div class="monster-name">窃语者</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/100023551341a6e640d31b4462.md.gif" alt="镜中贵妇" class="accordion-image">
<div class="monster-name">镜中贵妇</div>
</div>
</div>
</div>
</div>
</div><!– 泣矿林弹窗 –>
<div class="modal" id="qikuang-modal">
<div class="modal-header">
<div class="modal-title">泣矿林</div>
<button class="close-modal">×</button>
</div>
<img src="https://origin.picgo.net/2025/11/03/weeping-woods4e1222ef3b866f29.md.png" alt="泣矿林" class="location-image">
<div class="location-content">
<div class="location-info">
<div class="location-description">
源血矿是发现于泣矿林地下的特殊矿物，作为蒸汽机锅炉的燃料使用。它是铁冕城能源经济的命脉，但其开采也因更容易吸引妖魔而充满危险。
</div>
</div>
<div class="monster-gallery">
<div class="accordion">
<div class="accordion-item active">
<img src="https://origin.picgo.net/2025/10/29/1000235517da9558b262b0a649.md.gif" alt="溪谷妖灵" class="accordion-image">
<div class="monster-name">溪谷妖灵</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/100023552140739a8dfd3e6b01.md.gif" alt="焚心魔女" class="accordion-image">
<div class="monster-name">焚心魔女</div>
</div>
<div class="accordion-item">
<img src="https://origin.picgo.net/2025/10/29/10002355282d2768f6e76bfd72.md.gif" alt="鸦羽先知" class="accordion-image">
<div class="monster-name">鸦羽先知</div>
</div>
</div>
</div>
</div>
</div>
</div><!– 万钥圣殿页卡 –>
<div class="tab-pane" id="temple">
<div class="scrollable-content">
<div class="location-section">
<div class="location-section-title">万钥圣殿</div>
<img src="https://origin.picgo.net/2025/11/01/church_outa8aacee4e8be780b.md.png" alt="万钥圣殿" class="location-section-image">
<div class="location-section-description">
哥特尖顶与蒸汽管道交织的圣殿，表面是民众的庇护所，深处却隐藏着对抗妖魔的军械库与符文工坊。创始人赛勒斯特在此维持着精神连接“月光回响”，而修女长们则执行着清除威胁的使命，这里是秩序与知识的最后堡垒。
</div>
</div><div class="additional-section">
<img src="https://origin.picgo.net/2025/11/06/1000236057636e314333bd601e.md.png" alt="万钥密教姐妹会" class="additional-image">
<div class="location-section-description">
万钥密教：一群驾驭着神之遗产的女性。她们并非祈祷，而是通过苦修引导赫卡忒碎片的力量，将符文刻印于银色武器之上。她们是世人敬畏的活武器，在维护平衡的同时，也与自身的命运不断抗争。
</div>
</div>
<div class="additional-section">
<img src="https://origin.picgo.net/2025/11/06/1000236056bf032fa6e046da9f.md.png" alt="万钥密教姐妹会" class="additional-image">
<div class="location-section-description">
佩塔是其中最杰出的战士，却因预见自己将杀死挚爱的命运而选择孤独，直到遇见你，她的职责与爱意开始激烈冲突。
</div>
</div>
</div>
</div><!– 倒影酒馆页卡 –>
<div class="tab-pane" id="tavern">
<div class="scrollable-content">
<div class="location-section">
<div class="location-section-title">倒影酒馆</div>
<img src="https://origin.picgo.net/2025/11/03/reflection-tavern-out6ac6a778c9e58f67.md.png" alt="倒影酒馆" class="location-section-image">
<div class="location-section-description">
藏身于铁冕城暗巷中的神秘酒馆，粉色灯牌在雾气中氤氲。这里是保有理智的女妖们唯一的庇护所，由年长的维奥莱特经营。修女会对此地睁一只眼闭一只眼，只要不越界，这里就是混乱中立的灰色地带。
</div>
</div><div class="additional-section">
<img src="https://origin.picgo.net/2025/11/06/u1272121187_Interior_of_a_bustling_tavern_in_a_late_Renaissan_82e54079-ec22-44e4-8dbf-48fc0b06a5a8_082fd0794b52b8c70.md.png" alt="酒馆女妖" class="additional-image">
<div class="location-section-description">
酒馆女妖：她们生前是被社会抛弃的天才、艺术家与学者，怨念让她们获得了非人的力量。既是潜在的威胁，也可能是对抗更大危机的盟友。
</div>
</div><div class="additional-section">
<img src="https://origin.picgo.net/2025/11/06/u1272121187_In_the_warm_bustling_interior_of_a_late_Renaissan_f9a04a47-4ac4-4fc7-9aa3-85bfc2d0062c_1fc843fcd9b4c0ef6.md.png" alt="酒馆女妖" class="additional-image">
<div class="location-section-description">
对诺莉娅而言，这里是她学习“成为人类”的课堂，也是逃避神格吞噬的避风港。在这里，她编织着与你相遇的缘分，也策划着对抗命运的最后挣扎。
</div>
</div></div>
</div><!– 替换原有的CG预览区域 –>
<div class="tab-pane" id="cg">
<div class="cg-gallery">
<!– 第一行 – 16:9图片 –>
<div class="cg-row cg-row-1">
<div class="cg-scroll">
<img src="https://origin.picgo.net/2025/11/05/1000235956fcff9cf09e36fe8b.md.gif" alt="CG1">
<img src="https://origin.picgo.net/2025/11/04/100023589639bbde473b75b6c3.md.png" alt="CG2">
<img src="https://origin.picgo.net/2025/11/04/1000235900d28374b191463031.md.png" alt="CG3">
<img src="https://origin.picgo.net/2025/11/04/10002359016ce0cafebba9dbeb.md.png" alt="CG4">
<!– 重复图片以实现无缝滚动 –>
<img src="https://origin.picgo.net/2025/11/05/1000235956fcff9cf09e36fe8b.md.gif" alt="CG1">
<img src="https://origin.picgo.net/2025/11/04/100023589639bbde473b75b6c3.md.png" alt="CG2">
<img src="https://origin.picgo.net/2025/11/04/1000235900d28374b191463031.md.png" alt="CG3">
<img src="https://origin.picgo.net/2025/11/04/10002359016ce0cafebba9dbeb.md.png" alt="CG4">
</div>
</div><!– 第二行 – 4:1图片，滚动方向相反 –>
<div class="cg-row cg-row-2">
<div class="cg-scroll cg-scroll-reverse">
<img src="https://origin.picgo.net/2025/11/03/lake8eefe1ace4b2f2c0.md.png" alt="CG5">
<img src="https://origin.picgo.net/2025/11/03/ravenfeather-watch1cf5da769a79e4f3.md.png" alt="CG7">
<img src="https://origin.picgo.net/2025/11/03/crystal-greenhouse84f0e8414a55089d.md.png" alt="CG9">
<img src="https://origin.picgo.net/2025/11/03/gallery-of-vanitiese49b8d33eb5653eb.md.png" alt="场景图">
<!– 重复图片以实现无缝滚动 –>
<img src="https://origin.picgo.net/2025/11/03/lake8eefe1ace4b2f2c0.md.png" alt="CG5">
<img src="https://origin.picgo.net/2025/11/03/ravenfeather-watch1cf5da769a79e4f3.md.png" alt="CG7">
<img src="https://origin.picgo.net/2025/11/03/crystal-greenhouse84f0e8414a55089d.md.png" alt="CG9">
<img src="https://origin.picgo.net/2025/11/03/gallery-of-vanitiese49b8d33eb5653eb.md.png" alt="场景图">
</div>
</div><!– 第三行 – 16:9图片 –>
<div class="cg-row cg-row-3">
<div class="cg-scroll">
<img src="https://origin.picgo.net/2025/11/03/10002358465d5c944501321e65.md.gif" alt="CG10">
<img src="https://origin.picgo.net/2025/11/02/10002356798161643cba0bbdb4.md.gif" alt="CG11">
<img src="https://origin.picgo.net/2025/11/03/10002358238415560c179024b2.md.gif" alt="CG12">
<img src="https://origin.picgo.net/2025/10/27/1000235388813fbe138e187536.md.gif" alt="CG13">
<!– 重复图片以实现无缝滚动 –>
<img src="https://origin.picgo.net/2025/11/03/10002358465d5c944501321e65.md.gif" alt="CG10">
<img src="https://origin.picgo.net/2025/11/02/10002356798161643cba0bbdb4.md.gif" alt="CG11">
<img src="https://origin.picgo.net/2025/11/03/10002358238415560c179024b2.md.gif" alt="CG12">
<img src="https://origin.picgo.net/2025/10/27/1000235388813fbe138e187536.md.gif" alt="CG13">
</div>
</div>
</div>
</div></div>
</div><script>
// 标签页切换功能
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', function() {
// 移除所有活动状态
document.querySelectorAll('.tab-button').forEach(btn => {
btn.classList.remove('active');
});
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('active');
});// 添加当前活动状态
this.classList.add('active');
const tabId = this.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});// 地图标记点击事件
document.querySelectorAll('.marker-label').forEach(marker => {
marker.addEventListener('click', function() {
const location = this.getAttribute('data-location');
document.getElementById(`${location}-modal`).style.display = 'block';
});
});// 关闭弹窗事件
document.querySelectorAll('.close-modal').forEach(button => {
button.addEventListener('click', function() {
this.closest('.modal').style.display = 'none';
});
});// 手风琴效果
document.querySelectorAll('.accordion-item').forEach(item => {
item.addEventListener('click', function() {
// 移除所有活动状态
this.closest('.accordion').querySelectorAll('.accordion-item').forEach(item => {
item.classList.remove('active');
});// 添加当前活动状态
this.classList.add('active');
});
});// 点击弹窗外部关闭弹窗
window.addEventListener('click', function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
});
</script>
</body>
</html>
“`