202 lines
6.0 KiB
HTML
202 lines
6.0 KiB
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 href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<style>
|
|
/* --- 全局变量与基础样式 --- */
|
|
:root {
|
|
--primary-color: #ff4d4d; /* 边狱红 */
|
|
--secondary-color: #ffd700; /* 金色 */
|
|
--bg-color: #121212;
|
|
--text-color: #e0e0e0;
|
|
--panel-bg: #1e1e1e;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Noto Serif SC', serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
/* --- 主菜单容器 --- */
|
|
.menu-container {
|
|
text-align: center;
|
|
z-index: 10;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* --- 标题样式 --- */
|
|
.menu-title {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 3rem;
|
|
color: var(--secondary-color);
|
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 标题下方的装饰线 */
|
|
.menu-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
}
|
|
|
|
/* --- 按钮组样式 --- */
|
|
.menu-buttons {
|
|
display: flex;
|
|
gap: 3rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* --- 按钮样式 --- */
|
|
.menu-btn {
|
|
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
|
border: 2px solid var(--secondary-color);
|
|
color: var(--secondary-color);
|
|
padding: 1.2rem 3rem;
|
|
font-size: 1.3rem;
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-width: 250px;
|
|
/* 边狱公司风格的切角 */
|
|
clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* 按钮悬停效果 */
|
|
.menu-btn:hover {
|
|
background: var(--secondary-color);
|
|
color: #000;
|
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 按钮点击效果 */
|
|
.menu-btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* 按钮内的图标 */
|
|
.menu-btn i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 按钮光效动画 */
|
|
.menu-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.menu-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* --- 背景装饰 --- */
|
|
.bg-decoration {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 模拟背景中的光效 */
|
|
.bg-light {
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(255, 77, 77, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
animation: float 10s infinite ease-in-out;
|
|
}
|
|
|
|
.bg-light:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
|
|
.bg-light:nth-child(2) { bottom: 20%; right: 10%; animation-delay: 2s; background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 70%); }
|
|
.bg-light:nth-child(3) { top: 40%; left: 40%; animation-delay: 4s; width: 500px; height: 500px; opacity: 0.3; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
50% { transform: translate(20px, -20px); }
|
|
}
|
|
|
|
/* 响应式调整 */
|
|
@media (max-width: 768px) {
|
|
.menu-title {
|
|
font-size: 2.5rem;
|
|
}
|
|
.menu-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
.menu-btn {
|
|
width: 80%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="bg-decoration">
|
|
<div class="bg-light"></div>
|
|
<div class="bg-light"></div>
|
|
<div class="bg-light"></div>
|
|
</div>
|
|
|
|
<!-- 主菜单内容 -->
|
|
<div class="menu-container">
|
|
<h1 class="menu-title">边狱公司</h1>
|
|
<div class="menu-buttons">
|
|
<button class="menu-btn" onclick="window.location.href='matching-game.html'">
|
|
<i class="fas fa-link"></i> 罪人与原著
|
|
</button>
|
|
<button class="menu-btn" onclick="window.location.href='sinner-gallery.html'">
|
|
<i class="fas fa-sort-numeric-down"></i> 罪人立绘排列
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|