🎭 角色简介
base_info:
name: 神谷澄空 (Kamiya Sora)
class: 2年A班
identity: 私立青岚高中二年级学生
部门内部绰号:猫奈清桃宝
age: 17
以前没有喜欢过的人，遇到{{user}}后喜欢上{{user}}也只会喜欢{…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>可爱笔记本</title>
<style>
body {
margin: 0;
padding: 40px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
background: transparent;
}.notebook {
background-color: rgba(255, 245, 238, 0.92);
padding: 50px 60px;
width: 800px;
position: relative;
border: 2px solid rgba(255, 182, 193, 0.3);
border-radius: 20px;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 25px, rgba(255, 182, 193, 0.1) 26px);
box-shadow:
0 4px 15px rgba(255, 182, 193, 0.2),
inset 0 0 60px rgba(255, 192, 203, 0.1);
}.notebook::before {
content: '';
position: absolute;
left: 45px;
top: 0;
bottom: 0;
width: 1px;
background-color: rgba(255, 182, 193, 0.3);
}.notebook::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px dashed rgba(255, 182, 193, 0.4);
border-radius: 25px;
pointer-events: none;
animation: borderRotate 10s linear infinite;
}.title {
font-family: "楷体", "KaiTi", serif;
font-size: 42px;
color: #ff69b4;
text-align: center;
margin-bottom: 50px;
letter-spacing: 4px;
position: relative;
line-height: 1.4;
text-shadow: 2px 2px 4px rgba(255, 182, 193, 0.3);
}.author-signature {
font-family: "楷体", "KaiTi", serif;
font-size: 14px;
color: #ff9ecd;
position: absolute;
right: 60px;
top: 80px;
transform: rotate(-5deg);
text-shadow: 1px 1px 2px rgba(255, 182, 193, 0.3);
animation: signatureFloat 3s ease-in-out infinite;
}.author-signature::after {
content: '🌸';
position: absolute;
bottom: -15px;
right: -15px;
font-size: 12px;
opacity: 0.8;
}@keyframes signatureFloat {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(-5deg) translateY(-3px); }
}.title::after {
content: '❀';
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
color: #ffb6c1;
font-size: 24px;
}.content-line {
font-family: "楷体", "KaiTi", serif;
margin: 26px 0;
font-size: 20px;
color: #db7093;
position: relative;
line-height: 1.8;
padding-left: 20px;
transition: all 0.3s ease;
}.content-line:hover {
transform: translateX(10px);
color: #ff1493;
}.content-line::before {
content: '♡';
position: absolute;
left: -5px;
color: #ffb6c1;
opacity: 0.6;
}.strikethrough {
text-decoration: line-through;
color: #dda0dd;
font-size: 18px;
opacity: 0.8;
}.blue-note {
color: #87ceeb;
font-size: 16px;
margin-left: 20px;
font-style: italic;
}.pink-note {
color: #ff69b4;
font-size: 16px;
margin-left: 20px;
font-style: italic;
}.sticker {
position: absolute;
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
box-shadow: 0 3px 8px rgba(255, 182, 193, 0.3);
border: 2px solid rgba(255, 182, 193, 0.3);
animation: float 3s ease-in-out infinite;
}.sticker-1 {
top: -25px;
left: -25px;
animation-delay: 0s;
}.sticker-2 {
bottom: -25px;
right: -25px;
animation-delay: 1.5s;
}.red-notes-container {
margin-top: 50px;
padding-top: 20px;
border-top: 2px dashed rgba(255, 182, 193, 0.5);
text-align: right;
}.red-note {
font-family: "楷体", "KaiTi", serif;
color: #ff69b4;
font-size: 18px;
display: inline-block;
margin: 8px 15px;
position: relative;
transform: rotate(-2deg);
transition: transform 0.3s ease;
}.red-note:hover {
transform: rotate(2deg) scale(1.05);
}.red-note::after {
content: '♥';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
color: #ffb6c1;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}.red-note:hover::after {
opacity: 1;
}.cloud {
position: absolute;
font-size: 24px;
color: rgba(255, 182, 193, 0.4);
animation: floatCloud 6s ease-in-out infinite;
}.rainbow {
position: absolute;
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background: linear-gradient(
to bottom,
rgba(255, 182, 193, 0.3),
rgba(255, 218, 185, 0.3),
rgba(255, 255, 224, 0.3)
);
opacity: 0.6;
}.decoration {
position: absolute;
font-size: 20px;
opacity: 0.6;
pointer-events: none;
animation: decorationFloat 4s ease-in-out infinite;
}.corner-decoration {
position: absolute;
width: 60px;
height: 60px;
pointer-events: none;
}.corner-decoration::before {
content: '🌸';
position: absolute;
font-size: 24px;
animation: rotate 6s linear infinite;
}.pattern {
position: absolute;
font-size: 16px;
color: rgba(255, 182, 193, 0.2);
pointer-events: none;
}.cursor-follower {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
z-index: 9999;
font-size: 20px;
transition: transform 0.1s ease;
}@keyframes float {
0%, 100% { transform: translateY(0) rotate(3deg); }
50% { transform: translateY(-10px) rotate(3deg); }
}@keyframes floatCloud {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -10px); }
}@keyframes borderRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}@keyframes decorationFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(5deg); }
}@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}.sound-toggle {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px;
border: none;
border-radius: 50%;
background: rgba(255, 182, 193, 0.2);
cursor: pointer;
transition: all 0.3s ease;
z-index: 9999;
font-size: 20px;
}.sound-toggle:hover {
transform: scale(1.1);
background: rgba(255, 182, 193, 0.3);
}
</style>
</head>
<body>
<!– 添加音频元素 –>
<audio id="clickSound" src="https://assets.mixkit.co/active_storage/sfx/2568/2568.wav" preload="auto"></audio>
<audio id="hoverSound" src="https://assets.mixkit.co/active_storage/sfx/2571/2571.wav" preload="auto"></audio>
<audio id="writeSound" src="https://assets.mixkit.co/active_storage/sfx/2574/2574.wav" preload="auto"></audio><div class="notebook">
<div class="cloud" style="top: -30px; left: 20%;">☁️</div>
<div class="cloud" style="bottom: -20px; right: 15%;">☁️</div><div class="rainbow" style="top: -40px; right: 20%;"></div>
<div class="corner-decoration" style="top: 0; left: 0;"></div>
<div class="corner-decoration" style="top: 0; right: 0;"></div>
<div class="corner-decoration" style="bottom: 0; left: 0;"></div>
<div class="corner-decoration" style="bottom: 0; right: 0;"></div><div class="pattern" style="top: 20%; left: 10%;">🌟</div>
<div class="pattern" style="top: 40%; right: 15%;">🎀</div>
<div class="pattern" style="bottom: 30%; left: 20%;">💕</div>
<div class="pattern" style="bottom: 20%; right: 25%;">✨</div><div class="sticker sticker-1">🍰</div>
<div class="sticker sticker-2">🍪</div><h1 class="title">欢迎各位大人的游玩！</h1>
<div class="author-signature">作者顾辞卿及猫奈清桃宝向您致意</div><div class="content-line strikethrough">
以下是开场白的食用
</div><div class="content-line">
p1是同班同学因捡到笔记被卷入超自然现象（初识？）
<span class="blue-note">才不算第一次见面</span>
</div><div class="content-line">
p2是经历第一次超自然界面有些熟悉但还不太熟时遇到的第二次超自然事件
</div><div class="content-line">
p3是日常甜甜小暧昧
</div><div class="content-line">
p4是保健室小暧昧+超自然事件
<span class="pink-note">想起来心脏还是会怦怦跳</span>
</div><div class="content-line">
p5是讨论建立怪谈研究部
</div><div class="content-line">
p6是确认恋人关系很久后的第一次亲密关系行为
</div><div class="red-notes-container">
<span class="red-note">神谷澄空在等你</span>
<span class="red-note">想见你了…</span>
<span class="red-note">今天也要好好相处哦</span>
</div><div class="cursor-follower">🌸</div>
</div><script>
// 音效控制
const sounds = {
click: document.getElementById('clickSound'),
hover: document.getElementById('hoverSound'),
write: document.getElementById('writeSound')
};// 设置音量
Object.values(sounds).forEach(sound => {
sound.volume = 0.3; // 设置为30%音量
});// 播放音效函数
function playSound(type) {
if (soundEnabled && sounds[type]) {
sounds[type].currentTime = 0;
sounds[type].play().catch(err => {
console.warn(`${type}音效播放失败`, err);
});
}
}// 音效开关控制
let soundEnabled = true;
const soundToggle = document.createElement('button');
soundToggle.className = 'sound-toggle';
soundToggle.innerHTML = '🔊';// 添加音效开关事件
soundToggle.addEventListener('click', () => {
soundEnabled = !soundEnabled;
soundToggle.innerHTML = soundEnabled ? '🔊' : '🔈';
soundToggle.style.background = soundEnabled ?
'rgba(255, 182, 193, 0.2)' :
'rgba(200, 200, 200, 0.2)';
playSound('click');
});document.body.appendChild(soundToggle);
// 为元素添加音效
document.querySelectorAll('.content-line').forEach(el => {
el.addEventListener('mouseenter', () => playSound('hover'));
el.addEventListener('click', () => playSound('write'));
});document.querySelectorAll('.red-note').forEach(el => {
el.addEventListener('mouseenter', () => playSound('hover'));
el.addEventListener('click', () => playSound('click'));
});// 鼠标跟随效果
document.addEventListener('mousemove', (e) => {
const follower = document.querySelector('.cursor-follower');
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
});// 装饰效果
function createFloatingDecoration() {
const decorations = ['🌸', '✨', '💖', '🎀', '⭐'];
const decoration = document.createElement('div');
decoration.className = 'decoration';
decoration.textContent = decorations[Math.floor(Math.random() * decorations.length)];
decoration.style.left = Math.random() * 100 + '%';
decoration.style.top = Math.random() * 100 + '%';
document.querySelector('.notebook').appendChild(decoration);setTimeout(() => {
decoration.remove();
}, 4000);
}setInterval(createFloatingDecoration, 2000);
</script>
</body>
</html>
“`
