💬 开场白
“`html
<html>
<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;
}body {
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
background: linear-gradient(135deg, #0a3d2e 0%, #1a5d4a 30%, #2d4a3d 70%, #0f2419 100%);
color: #e8f5e8;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(46, 125, 50, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(27, 94, 32, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(76, 175, 80, 0.05) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}.container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}.header {
text-align: center;
margin-bottom: 40px;
padding: 30px 0;
}.title {
font-size: 3.5rem;
font-weight: bold;
background: linear-gradient(45deg, #81c784, #c8e6c9, #a5d6a7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 20px rgba(129, 199, 132, 0.3);
margin-bottom: 10px;
letter-spacing: 3px;
}.subtitle {
font-size: 1.2rem;
color: #a5d6a7;
font-weight: 300;
letter-spacing: 1px;
}.section {
background: rgba(21, 71, 52, 0.7);
border: 1px solid rgba(129, 199, 132, 0.2);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
backdrop-filter: blur(10px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}.section-title {
font-size: 1.8rem;
color: #c8e6c9;
margin-bottom: 20px;
text-align: center;
position: relative;
}.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, #81c784, transparent);
}.story-intro {
font-size: 1.1rem;
line-height: 1.8;
color: #e8f5e8;
text-align: justify;
margin-bottom: 25px;
}.story-intro::first-letter {
font-size: 3rem;
float: left;
line-height: 1;
margin-right: 8px;
margin-top: 4px;
color: #81c784;
font-weight: bold;
}.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}.feature-item {
background: rgba(46, 125, 50, 0.2);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #81c784;
transition: all 0.3s ease;
}.feature-item:hover {
background: rgba(46, 125, 50, 0.3);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(129, 199, 132, 0.2);
}.feature-title {
font-size: 1.2rem;
color: #c8e6c9;
margin-bottom: 10px;
font-weight: bold;
}.feature-desc {
color: #e8f5e8;
line-height: 1.6;
}.characters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 25px;
margin-top: 25px;
}.character-card {
background: rgba(27, 94, 32, 0.3);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: all 0.4s ease;
border: 1px solid rgba(129, 199, 132, 0.2);
position: relative;
overflow: hidden;
}.character-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(129, 199, 132, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}.character-card:hover::before {
opacity: 1;
}.character-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.4),
0 0 20px rgba(129, 199, 132, 0.3);
border-color: #81c784;
}.character-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 15px;
border: 3px solid #81c784;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}.character-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}.character-card:hover .character-avatar img {
transform: scale(1.1);
}.character-name {
font-size: 1.4rem;
color: #c8e6c9;
margin-bottom: 8px;
font-weight: bold;
position: relative;
z-index: 1;
}.character-title {
font-size: 0.9rem;
color: #81c784;
margin-bottom: 12px;
font-style: italic;
position: relative;
z-index: 1;
}.character-desc {
font-size: 0.9rem;
color: #e8f5e8;
line-height: 1.5;
position: relative;
z-index: 1;
}.author-info {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(21, 71, 52, 0.8);
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(129, 199, 132, 0.3);
backdrop-filter: blur(10px);
z-index: 100;
}.author-name {
font-size: 1rem;
color: #c8e6c9;
margin-bottom: 5px;
}.copyright {
font-size: 0.7rem;
color: #81c784;
opacity: 0.8;
}@media (max-width: 768px) {
.title {
font-size: 2.5rem;
}.container {
padding: 15px;
}.section {
padding: 20px;
}.characters-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}.character-avatar {
width: 100px;
height: 100px;
}.author-info {
bottom: 10px;
right: 10px;
padding: 10px;
}
}@media (max-width: 480px) {
.title {
font-size: 2rem;
}.characters-grid {
grid-template-columns: 1fr;
}.features-grid {
grid-template-columns: 1fr;
}
}.fade-in {
animation: fadeIn 0.8s ease-in;
}@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}.floating {
animation: floating 3s ease-in-out infinite;
}@keyframes floating {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
</style>
</head>
<body>
<!– 背景音乐 –>
<audio autoplay loop>
<source src="https://files.catbox.moe/t0ea75.mp3" type="audio/mpeg">
</audio><div class="container">
<!– 标题 –>
<div class="header fade-in">
<h1 class="title floating">我回远古搞基建</h1>
<p class="subtitle">灼岩部落传说</p>
</div><!– 故事介绍 –>
<div class="section fade-in">
<h2 class="section-title">✦ 故事简介 ✦</h2>
<div class="story-intro">
意外穿越到远古兽人世界的你，在神秘的灼岩部落中开启了全新的人生。在这个以力量为尊、部落争斗不断的原始世界里，你将遇见五位性格迥异的兽人男性——威严霸道的虎族首领烁峦、野性不驯的豹族猎首奚刃、温柔治愈的鹿族副首领月流、机敏狡黠的狐族外交官夙洺，以及冷漠毒舌的蛇族医者玄隐。
</div>
<div class="story-intro">
在这片充满危险与机遇的土地上，你不仅要在严酷的环境中生存下去，更要运用现代知识帮助部落发展基础建设，从简陋的石器时代逐步迈向文明的曙光。
</div>
</div><!– 功能 –>
<div class="section fade-in">
<h2 class="section-title">✦ 功能 ✦</h2>
<div class="features-grid">
<div class="feature-item">
<div class="feature-title">🏗️ 基建系统</div>
<div class="feature-desc">运用现代知识指导部落建设，从改良工具到建造房屋，见证文明的进步</div>
</div>
<div class="feature-item">
<div class="feature-title">💕 恋爱养成</div>
<div class="feature-desc">与五位性格鲜明的兽人男性培养感情，解锁专属剧情和浪漫时刻</div>
</div>
<div class="feature-item">
<div class="feature-title">🌿 探索冒险</div>
<div class="feature-desc">深入神秘森林采集资源，发现远古遗迹，揭开兽世的古老秘密</div>
</div>
<div class="feature-item">
<div class="feature-title">⚔️ 部落争斗</div>
<div class="feature-desc">参与部落间的战略较量，运用智慧化解危机，守护你的新家园</div>
</div>
<div class="feature-item">
<div class="feature-title">🎭 剧情分支</div>
<div class="feature-desc">丰富的选择分支，每个决定都将影响故事走向和角色关系</div>
</div>
</div>
</div><!– 角色介绍 –>
<div class="section fade-in">
<h2 class="section-title">✦ 可攻略角色 ✦</h2>
<div class="characters-grid">
<div class="character-card">
<div class="character-avatar">
<img src="https://files.catbox.moe/o2ishs.jpg" alt="烁峦">
</div>
<div class="character-name">烁峦</div>
<div class="character-title">灼岩部落首领 · 虎王</div>
</div><div class="character-card">
<div class="character-avatar">
<img src="https://files.catbox.moe/znguit.jpg" alt="奚刃">
</div>
<div class="character-name">奚刃</div>
<div class="character-title">追风猎首 · 豹族战士</div>
</div><div class="character-card">
<div class="character-avatar">
<img src="https://files.catbox.moe/1xegt6.jpg" alt="月流">
</div>
<div class="character-name">月流</div>
<div class="character-title">月息之子 · 鹿族副首领</div>
</div><div class="character-card">
<div class="character-avatar">
<img src="https://files.catbox.moe/pqpdq6.jpg" alt="夙洺">
</div>
<div class="character-name">夙洺</div>
<div class="character-title">流亡智者 · 狐族</div>
</div><div class="character-card">
<div class="character-avatar">
<img src="https://files.catbox.moe/3d061n.jpg" alt="玄隐">
</div>
<div class="character-name">玄隐</div>
<div class="character-title">边缘医者 · 蛇族智者</div>
</div>
</div>
</div>
</div><!– 作者信息 –>
<div class="author-info">
<div class="author-name">作者：金喵</div>
<div class="copyright">dc免费发放 禁止二传二改商用</div>
</div><script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.fade-in');
elements.forEach((element, index) => {
setTimeout(() => {
element.style.opacity = '1';
}, index * 200);
});// 鼠标悬停效果
const characterCards = document.querySelectorAll('.character-card');
characterCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
});
</script>
</body>
</html>
“`