🎭 角色简介
<Character_Setting>
uid: character_pc_shen-qingyan
trigger: 完整卷宗 – 沈清晏
content: |
basic_info:
character_name: "沈清晏"
character_id: "she…
💬 开场白
“`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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&display=swap" rel="stylesheet"><style>
/* CSS 变量定义 */
:root {
–bg-color: #3b2e2a; /* 一个稍微柔和的深棕色背景 */
–main-text-color: #e8d8c3; /* 主要文字颜色，如宣纸般温润 */
–title-color: #b22222; /* 标题的暗红色，即firebrick */
–hover-color: #fffaf0; /* 悬停时的亮色，类似floralwhite */
–note-color: #c9a87a; /* 注释文字颜色，带有古典感的赭石色 */
–bg-text-color: rgba(200, 180, 160, 0.2); /* 背景浮动文字颜色，更淡以融入背景 */
–border-color: #7a5c3c; /* 边框颜色，沉稳的棕褐色 */
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: var(–bg-color);
color: var(–main-text-color);
overflow-x: hidden; /* 防止水平滚动条 */
min-height: 100vh;
position: relative;
/* 使用修正后的渐变，并添加了细微的纸张纹理 */
background-image:
url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'),
linear-gradient(to bottom, #4a3a34, var(–bg-color), #2a1e1a);
}/* 背景的装饰性光晕 */
.decoration {
position: fixed;
z-index: 0;
pointer-events: none;
}.decoration.top-left {
top: -50px;
left: -50px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(178, 34, 34, 0.08) 0%, transparent 70%);
}.decoration.bottom-right {
bottom: -50px;
right: -50px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(178, 34, 34, 0.08) 0%, transparent 70%);
}/* 背景浮动文字的容器 */
.background-text-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}.background-text-container span {
position: absolute;
color: var(–bg-text-color);
font-size: 3.5vw;
white-space: nowrap;
font-family: 'Ma Shan Zheng', cursive;
animation: floatText 80s linear infinite;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
font-weight: 300;
}/* 浮动文字动画 */
@keyframes floatText {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100vw);
}
}/* 主要内容容器 */
.main-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
text-align: center;
}/* 标题样式 */
.title {
font-family: 'Ma Shan Zheng', cursive;
font-size: clamp(3.5rem, 10vw, 7rem);
color: var(–title-color);
margin-bottom: 60px;
animation: pulseGlow 2.5s infinite ease-in-out;
text-shadow: 0 0 5px rgba(139, 0, 0, 0.4),
0 0 15px rgba(255, 69, 0, 0.5), /* 橙红色光晕，增加层次感 */
0 0 30px rgba(255, 0, 0, 0.6);
position: relative;
padding: 20px 40px;
border: 2px solid var(–border-color);
border-radius: 10px;
background: rgba(0,0,0,0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0,0,0,0.3);
}/* 标题的角部装饰 */
.title::before, .title::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
border: 2px solid var(–border-color); /* 修正了 '2pxsolid' 的错误 */
}.title::before {
top: -10px;
left: -10px;
border-right: none;
border-bottom: none;
border-top-left-radius: 10px;
}.title::after {
bottom: -10px;
right: -10px;
border-left: none;
border-top: none;
border-bottom-right-radius: 10px;
}/* 标题脉动光晕动画 */
@keyframes pulseGlow {
0%, 100% {
text-shadow: 0 0 5px rgba(139, 0, 0, 0.4),
0 0 15px rgba(255, 69, 0, 0.5),
0 0 30px rgba(255, 0, 0, 0.6);
transform: scale(1);
}
50% {
text-shadow: 0 0 10px rgba(139, 0, 0, 0.6),
0 0 25px rgba(255, 69, 0, 0.7),
0 0 50px rgba(255, 0, 0, 0.8);
transform: scale(1.02);
}
}/* 菜单项容器 */
.menu-container {
display: flex;
flex-direction: column;
gap: 25px;
width: 100%;
max-width: 500px;
margin-top: 30px;
}.menu-item {
color: var(–main-text-color);
font-size: clamp(1.1rem, 4vw, 1.4rem);
font-family: "KaiTi", "STKaiti", "楷体", serif;
padding: 18px 25px;
border: 1px solid var(–border-color);
border-radius: 8px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}/* 悬停时的流光效果 */
.menu-item::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 cubic-bezier(0.25, 0.46, 0.45, 0.94);
}.menu-item:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(–hover-color);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
border-color: var(–note-color);
}.menu-item:hover::before {
left: 100%;
}/* 菜单项中的注释样式 */
.menu-item .note {
font-family: inherit;
color: var(–note-color);
font-size: 0.9em;
margin-left: 8px;
font-style: italic;
}/* 页面底部文字 */
.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-family: 'Zhi Mang Xing', cursive;
color: var(–note-color);
font-size: 1rem;
z-index: 2;
pointer-events: none;
}/* 响应式设计 */
@media (max-width: 768px) {
.title {
font-size: clamp(2.8rem, 15vw, 5rem);
padding: 15px 25px;
}.menu-item {
padding: 15px 20px;
}.background-text-container span {
font-size: 5.5vw;
animation-duration: 60s;
}
}
</style>
</head>
<body>
<!– 背景装饰元素 –>
<div class="decoration top-left"></div>
<div class="decoration bottom-right"></div><!– 背景浮动文字 –>
<div class="background-text-container" id="bg-text"></div><!– 主内容区域 –>
<div class="main-content">
<h1 class="title">以爱为笼</h1>
<div class="menu-container">
<div class="menu-item">开场白一：天牢重逢</div>
<div class="menu-item">开场白二：日常侍奉</div>
<div class="menu-item">开场白三：水浴做恨<span class="note">（开盖即食）</span></div>
<div class="menu-item">开场白四：醉酒真心</div>
<div class="menu-item">开场白五：苦病之劫</div>
<div class="menu-item">开场白六：传唤侍寝<span class="note">（开盖即食）</span></div>
</div>
</div><!– 底部装饰文字 –>
<div class="footer">
唯愿君心似我心，定不负相思意。
</div><script>
document.addEventListener('DOMContentLoaded', function() {
// 创建背景浮动文字
const container = document.getElementById('bg-text');
if (container) {
const phrases = [
"唯愿君心似我心",
"此恨绵绵无绝期",
"情不知所起",
"一往而深",
"山有木兮木有枝",
"心悦君兮君不知",
"玲珑骰子安红豆",
"入骨相思知不知",
"天涯地角有穷时",
"只有相思无尽处"
];
const numElements = 30; // 适当减少数量，避免过于杂乱for (let i = 0; i < numElements; i++) {
const span = document.createElement('span');
span.textContent = phrases[i % phrases.length];// 设置随机位置和动画
span.style.top = `${Math.random() * 100}vh`;
span.style.left = `${Math.random() * 100}vw`;
const duration = Math.random() * 40 + 60; // 动画时长60-100秒
const delay = Math.random() * -duration;span.style.animation = `floatText ${duration}s linear ${delay}s infinite`;
span.style.opacity = Math.random() * 0.3 + 0.15; // 透明度降低
span.style.fontSize = `${Math.random() * 2 + 2.5}vw`; // 调整字体大小范围container.appendChild(span);
}
}// 为菜单项添加点击时的视觉反馈效果
const menuItems = document.querySelectorAll('.menu-item');
if (menuItems.length) {
menuItems.forEach(item => {
item.addEventListener('click', function() {
// 添加一个短暂的“按下”效果
this.style.transform = 'translateY(-2px) scale(0.98)';
this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.6)';setTimeout(() => {
// 恢复原状
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.5)';
}, 150);
});
});
}
});
</script>
</body>
</html>
“`