💬 开场白
“`html
<html>
<head>
<style>
@import url('https:fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');body {
font-family: 'Orbitron', sans-serif;
width: calc(90% + 80px);
max-width: 860px;
height: calc(480px + 100px);
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border-radius: 25px; /* 圆角 */
overflow: visible; /* 允许内容溢出显示 */
color: #00a8ff; /* 默认文本颜色（修改为蓝色） */
box-sizing: border-box; /* 确保边框和内边距不影响尺寸 */
}.outer-container {
position: relative;
width: calc(90% + 40px);
max-width: 840px;
height: calc(480px + 60px);
background: #000; /* 内部背景色 */
border-radius: 25px; /* 圆角 */
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 168, 255, 0.6), 0 0 40px rgba(0, 168, 255, 0.3); /* 外部发光效果 */
border: 2px solid rgba(0, 168, 255, 0.5); /* 边框颜色 */
overflow: hidden;
background-clip: padding-box; /* 保证边框和内容不重叠 */
animation: pulse-border 3s infinite ease-in-out; /* 添加动画 */
}/* 渐变边框动画 */
@keyframes pulse-border {
0%, 100% {
box-shadow: 0 0 20px rgba(0, 168, 255, 0.6), 0 0 40px rgba(0, 168, 255, 0.3);
border-color: rgba(0, 168, 255, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(0, 168, 255, 0.9), 0 0 60px rgba(0, 168, 255, 0.6);
border-color: rgba(0, 168, 255, 0.8);
}
}.container {
position: relative;
width: 90%;
max-width: 800px;
height: 480px;
padding: 30px;
background: linear-gradient(to top, rgba(93, 173, 226, 0.7), rgba(0, 0, 0, 0.2));
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(0,168,255,0.3);
box-shadow:
0 0 20px rgba(0,168,255,0.2),
inset 0 0 20px rgba(0,168,255,0.1);
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}.circuit-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;/* 原本的电路图案背景 */
background-image:
radial-gradient(circle at 100% 100%, rgba(0,168,255,0.1) 0%, transparent 50%),
linear-gradient(45deg, rgba(0,168,255,0.05) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,168,255,0.05) 25%, transparent 25%);
background-size: 100% 100%, 20px 20px, 20px 20px;
background-repeat: repeat, repeat, repeat;
background-position: 0 0, 0 0, 0 0;/* 动态背景流动动画 */
animation: patternMove 20s linear infinite;
pointer-events: none;
}/* 动态背景流动动画 */
@keyframes patternMove {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 0 0, 20px 20px, -20px -20px; }
}.content-wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}.title {
color: rgba(0,168,255,0.7);
font-size: 28px;
margin-bottom: 30px;
text-shadow: 0 0 10px rgba(0,168,255,0.5);}
.warning {
color: #ff3366;
margin: 20px 0;
font-size: 12px;
text-shadow: 0 0 5px rgba(255, 51, 102, 0.8), 0 0 10px rgba(255, 51, 102, 0.5);
animation: warningGlow 1.5s infinite alternate;
}@keyframes warningGlow {
0% {
text-shadow: 0 0 5px rgba(255, 51, 102, 0.8), 0 0 10px rgba(255, 51, 102, 0.5);
}
100% {
text-shadow: 0 0 10px rgba(255, 51, 102, 1), 0 0 20px rgba(255, 51, 102, 0.8);
}
}.version {
font-size: 10px;
color: rgba(0,168,255,0.7);
position: absolute; /* 使用绝对定位 */
bottom: 15px; /* 距离底部10px，可以根据需求调整 */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 修正水平居中的偏移 */
text-align: center;
width: 100%;
}.verify-btn {
display: inline-block;
padding: 12px 40px;
background: rgba(0,168,255,0.1);
border: 2px solid #00a8ff;
color: #00a8ff;
cursor: pointer;
border-radius: 8px;
font-family: 'Orbitron', sans-serif;
font-size: 16px;
transition: all 0.3s;
position: relative;
overflow: hidden;
}.verify-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(0,168,255,0.3),
transparent
);
transform: rotate(45deg);
animation: buttonFlow 3s linear infinite;
}.verify-btn:hover {
background: rgba(0,168,255,0.2);
box-shadow: 0 0 20px rgba(0,168,255,0.3);
transform: translateY(-2px);
}.verify-btn:active {
transform: scale(0.95);
}@keyframes buttonFlow {
0% { transform: rotate(45deg) translateX(-100%); }
100% { transform: rotate(45deg) translateX(100%); }
}.loading-text, .welcome-text {
display: none;
font-size: 16px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s;
}.char {
opacity: 0;
animation: fadeIn 0.1s forwards;
}@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}.dissolve {
animation: dissolveOut 1s forwards;
}@keyframes dissolveOut {
0% {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
100% {
opacity: 0;
filter: blur(10px);
transform: scale(1.2);
}
}.loading-spinner {
display: none;
width: 50px; /* 调整大小 */
height: 50px;
border: 4px solid transparent; /* 透明的基础边框 */
border-top: 4px solid #00a8ff; /* 上部分的主要颜色 */
border-right: 4px solid rgba(0,168,255,0.6); /* 右部分的渐变颜色 */
border-bottom: 4px solid transparent; /* 下部分透明 */
border-left: 4px solid rgba(0,168,255,0.3); /* 左部分的渐变颜色 */
border-radius: 50%; /* 圆形边框 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: spin 1s linear infinite; /* 旋转 */
}.loading-spinner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0,168,255,0.8); /* 发光效果 */
animation: pulse 2s ease-in-out infinite; /* 添加脉动效果 */
transform: translate(-50%, -50%);
pointer-events: none; /* 避免干扰交互 */
}@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}@keyframes pulse {
0%, 100% {
box-shadow: 0 0 10px rgba(0,168,255,0.5);
transform: scale(1);
}
50% {
box-shadow: 0 0 20px rgba(0,168,255,0.8);
transform: scale(1.1);
}
}.record-view {
display: none;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
text-align: left;
}.record-title {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
}.record-item {
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s;
}.record-item.locked {
color: rgba(0,168,255,0.5);
cursor: not-allowed;
}.record-header {
display: flex;
align-items: center;
padding: 10px;
background: rgba(0,168,255,0.1);
border-radius: 5px;
}.triangle {
width: 0;
height: 0;
border-left: 6px solid #00a8ff;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
margin-right: 10px;
transition: transform 0.3s;
}.expanded .triangle {
transform: rotate(90deg);
}.sub-items {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
margin-left: 20px;
}.sub-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
cursor: pointer;
}.sub-item:hover {
background: rgba(0,168,255,0.1);
}.sub-item-note {
font-size: 8px;
color: rgba(0,168,255,0.5);
margin-left: 10px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="container">
<div class="circuit-pattern"></div>
<div id="initial-content">
<div class="content-wrapper">
<div class="title">SOS修复系统<br>-S384-</div>
<button class="verify-btn" onclick="startVerification()">点击验证</button>
<div class="warning">
警告：<br>
此系统仅限授权用户使用<br>
非授权访问将触发自毁程序
</div>
</div>
<div class="version">
版本号：v1.0.000-alpha<br>
副本管理与交互核心程序<br>
作者：DC@kosyuku<br>
禁止二改或未经授权转载
</div>
</div>
<div id="loading-text" class="loading-text"></div>
<div id="welcome-text" class="welcome-text"></div>
<div class="loading-spinner"></div>
<div class="record-view" id="record-view">
<div class="record-title">副本记录</div>
<div class="record-item" onclick="toggleExpand(this)">
<div class="record-header">
<div class="triangle"></div>
3062号空间
</div>
<div class="sub-items">
<div class="sub-item" onclick="sendMessage('【开局A1】', event)">
log.zy_001
<span class="sub-item-note">初次相见就惨遭追杀？</span>
</div>
<div class="sub-item" onclick="sendMessage('【开局A2】', event)">
log.zy_002
<span class="sub-item-note">他的特殊状态竟是项圈play？</span>
</div>
<div class="sub-item" onclick="sendMessage('【开局A3】', event)">
log.zy_003
<span class="sub-item-note">他的肉棒和命都掌握在你手中…</span>
</div>
</div>
</div>
<div class="record-item locked">
<div class="record-header">
<div class="triangle"></div>
未解锁【右划选择开场】
</div>
</div>
</div>
</div>
</div><script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}async function typeText(text, element, delay = 100) {
element.style.opacity = '1';
const lines = text.split('n');
for(let line of lines) {
const lineDiv = document.createElement('div');
element.appendChild(lineDiv);
for(let i = 0; i < line.length; i++) {
const span = document.createElement('span');
span.textContent = line[i];
span.className = 'char';
lineDiv.appendChild(span);
await sleep(delay);
}
}
}async function startVerification() {
const initialContent = document.getElementById('initial-content');
initialContent.classList.add('dissolve');
await sleep(1000);
initialContent.style.display = 'none';const loadingText = document.getElementById('loading-text');
loadingText.style.display = 'block';
await typeText('系统已激活nS384已唤醒…', loadingText);
await sleep(2000);loadingText.style.opacity = '0';
await sleep(1000);
loadingText.style.display = 'none';const welcomeText = document.getElementById('welcome-text');
welcomeText.style.display = 'block';
await typeText('「管理员小姐」n「欢迎回到系统空间」', welcomeText);
await sleep(2000);welcomeText.style.opacity = '0';
await sleep(1000);
welcomeText.style.display = 'none';const spinner = document.querySelector('.loading-spinner');
spinner.style.display = 'block';
await sleep(2000);
spinner.style.display = 'none';document.getElementById('record-view').style.display = 'block';
}function toggleExpand(element) {
const wasExpanded = element.classList.contains('expanded');
element.classList.toggle('expanded');
const subItems = element.querySelector('.sub-items');
if (wasExpanded) {
subItems.style.maxHeight = '0';
} else {
subItems.style.maxHeight = subItems.scrollHeight + 'px';
}
}function sendMessage(message, event) {
//event.stopPropagation();
//console.log(`发送消息: ${message}`);
//triggerSlash(`/send ${message}`);
}</script>
</body>
</html>
“`