💬 开场白
“`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=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'ZCOOL XiaoWei', serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
color: #333;
min-height: 100vh;
overflow-x: hidden;
background-image:
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2390a4ae' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2390a4ae' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
position: relative;
}body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(120, 150, 200, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(200, 150, 120, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
position: relative;
z-index: 1;
}.clouds {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 0;
}.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
filter: blur(15px);
animation: float 30s infinite linear;
}.cloud:nth-child(1) {
width: 300px;
height: 100px;
top: 10%;
left: 5%;
animation-duration: 40s;
}.cloud:nth-child(2) {
width: 400px;
height: 120px;
top: 30%;
right: 10%;
animation-duration: 35s;
animation-delay: -10s;
}.cloud:nth-child(3) {
width: 250px;
height: 80px;
bottom: 20%;
left: 15%;
animation-duration: 45s;
animation-delay: -5s;
}@keyframes float {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(50px) translateY(-20px);
}
50% {
transform: translateX(100px) translateY(0);
}
75% {
transform: translateX(50px) translateY(20px);
}
100% {
transform: translateX(0) translateY(0);
}
}.header {
text-align: center;
margin-bottom: 3rem;
position: relative;
padding: 2rem 0;
}.header::before, .header::after {
content: '';
position: absolute;
height: 2px;
left: 20%;
right: 20%;
background: linear-gradient(90deg, transparent, #555, transparent);
}.header::before {
top: 0;
}.header::after {
bottom: 0;
}.title {
font-family: 'Ma Shan Zheng', cursive;
font-size: 4rem;
color: #222;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
letter-spacing: 5px;
position: relative;
display: inline-block;
}.title::before, .title::after {
content: '❖';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #777;
font-size: 2rem;
}.title::before {
left: -50px;
}.title::after {
right: -50px;
}.subtitle {
font-size: 1.5rem;
color: #555;
font-style: italic;
margin-top: 1rem;
}.content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}.card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(150, 150, 150, 0.3);
border-radius: 10px;
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(135deg, transparent 0%, rgba(150, 150, 150, 0.05) 100%);
z-index: -1;
}.card-title {
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size: 2rem;
color: #333;
margin-bottom: 1.5rem;
text-align: center;
position: relative;
padding-bottom: 0.5rem;
}.card-title::after {
content: '';
position: absolute;
bottom: 0;
left: 25%;
right: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #777, transparent);
}.card-content {
font-size: 1.2rem;
line-height: 1.6;
color: #444;
text-align: justify;
}.decoration {
position: absolute;
opacity: 0.1;
z-index: -1;
}.decoration-1 {
top: 10%;
right: 5%;
font-size: 8rem;
transform: rotate(15deg);
}.decoration-2 {
bottom: 10%;
left: 5%;
font-size: 6rem;
transform: rotate(-10deg);
}.mountain {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(transparent, #d0d8e0);
z-index: -1;
}.footer {
text-align: center;
margin-top: 4rem;
padding: 2rem 0;
color: #666;
font-size: 0.9rem;
border-top: 1px solid rgba(150, 150, 150, 0.2);
}@media (max-width: 768px) {
.title {
font-size: 2.5rem;
}.content {
grid-template-columns: 1fr;
}.card-title {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<div class="clouds">
<div class="cloud"></div>
<div class="cloud"></div>
<div class="cloud"></div>
</div><div class="container">
<header class="header">
<h1 class="title">欢迎来到九寰世界</h1>
<p class="subtitle">云海翻腾处，仙途启程时</p>
</header><div class="content">
<div class="card">
<h2 class="card-title">开场白一：初遇</h2>
<p class="card-content">
那日云海翻涌，霞光万丈，你我一见如故。在这浩瀚九寰之中，命运之线悄然交织。初遇之时，你眸中星辰闪烁，仿佛早已相识千年。仙途漫漫，自此并肩而行。
</p>
</div><div class="card">
<h2 class="card-title">开场白二：相伴</h2>
<p class="card-content">
历经千山万水，共度风雨沧桑。你我相伴，踏遍九寰山河，观尽世间繁华。剑指苍穹，心向大道，这一路有你相随，便是最美的仙途风景。
</p>
</div><div class="card">
<h2 class="card-title">开场白三：重逢</h2>
<p class="card-content">
轮回百转，岁月如歌。在时光的长河中，我们终将重逢。无论前世今生，那份羁绊永不磨灭。二百年分别，再续前缘，这一次，定不负相思意。
</p>
</div>
</div><div class="decoration decoration-1">☯</div>
<div class="decoration decoration-2">☯</div>
</div><div class="mountain"></div>
<footer class="footer">
<p>九寰世界 · 云海仙踪 · 版权所有</p>
</footer><script>
// 添加云朵动态效果
document.addEventListener('DOMContentLoaded', function() {
const cloudsContainer = document.querySelector('.clouds');// 创建更多云朵
for (let i = 0; i < 5; i++) {
const cloud = document.createElement('div');
cloud.classList.add('cloud');// 随机大小和位置
const width = Math.random() * 200 + 150;
const height = width * 0.4;
const top = Math.random() * 80;
const left = Math.random() * 90;cloud.style.width = `${width}px`;
cloud.style.height = `${height}px`;
cloud.style.top = `${top}%`;
cloud.style.left = `${left}%`;
cloud.style.animationDuration = `${Math.random() * 20 + 30}s`;
cloud.style.animationDelay = `${Math.random() * 20}s`;cloudsContainer.appendChild(cloud);
}// 卡片入场动画
const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(50px)';setTimeout(() => {
card.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 300 * index);
});
});
</script>
</body>
</html>
“`
