🎭 角色简介
character:
name: 白青衍
gender: 男
age:
actual: 119
equivalent: 16-18 (人类标准)
race: 青丘狐族(母)与人类(父)混血半妖
height: 180cm
appearance:…
💬 开场白
“`html
<html>
<head>
<!– disable-default-loading –>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');:root {
–primary-color: #6a5acd; /* Slate Blue */
–secondary-color: #bfa8e3; /* A soft purple */
–text-color: #483d8b; /* Dark Slate Blue */
–bg-color: rgba(245, 248, 255, 0.9); /* Lighter Alice Blue with transparency */
–border-color: rgba(176, 196, 222, 0.6); /* Lighter Steel Blue border */
–star-color-1: #ffd700; /* Gold */
–star-color-2: #da70d6; /* Orchid */
–heart-color: #ff69b4; /* Hot Pink */
}body {
font-family: 'ZCOOL XiaoWei', serif;
margin: 0;
padding: 1rem;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
overflow: hidden;
}.card-container {
position: relative;
width: 95%; /* Increased width */
max-width: 700px; /* Increased max-width for a wider feel */
padding: 20px; /* Reduced padding for a tighter look */
background: var(–bg-color);
border-radius: 18px;
border: 1px solid var(–border-color);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(12px);
text-align: center;
}.title-group {
text-align: center;
margin-bottom: 15px; /* Reduced margin */
}.title {
font-size: 2rem; /* Slightly smaller title */
font-weight: 400;
color: var(–primary-color);
margin: 0 0 5px 0;
}.description {
font-size: 0.95rem;
color: var(–text-color);
margin: 0;
}.separator {
height: 1px;
background: linear-gradient(to right, transparent, var(–border-color), transparent);
margin: 20px 0; /* Adjusted margin */
}.openings-container {
display: grid; /* Changed to grid for better control */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid columns */
gap: 12px; /* Reduced gap */
}.opening-module {
padding: 12px; /* Reduced padding */
border: 1px dashed var(–border-color);
border-radius: 12px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease-in-out;
background: rgba(255, 255, 255, 0.6);
}.opening-module:hover {
border-style: solid;
border-color: var(–secondary-color);
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}.opening-module.shake {
animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0) translateY(-2px); }
20%, 80% { transform: translate3d(2px, 0, 0) translateY(-2px); }
30%, 50%, 70% { transform: translate3d(-3px, 0, 0) translateY(-2px); }
40%, 60% { transform: translate3d(3px, 0, 0) translateY(-2px); }
}.opening-title {
font-size: 1.05rem; /* Adjusted font size */
font-weight: bold;
color: var(–primary-color);
margin-bottom: 6px;
}.opening-content {
font-size: 0.85rem; /* Adjusted font size */
line-height: 1.5;
color: var(–text-color);
}.footer {
margin-top: 25px;
font-size: 0.75rem; /* Smaller footer font */
color: #aaa;
text-align: center;
}.footer span {
margin: 0 6px;
}/* Effects styling */
.particle {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
animation: fly-out 0.8s ease-out forwards;
z-index: 999;
}@keyframes fly-out {
0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
100% { transform: var(–transform-end); opacity: 0; scale: 1; }
}.star::before, .heart::before {
content: var(–content-char);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(–size);
color: var(–color);
}.star::before { –content-char: '★'; }
.heart::before { –content-char: '♥'; }</style>
</head>
<body><div class="card-container">
<div class="title-group">
<h1 class="title">白清衍</h1>
<p class="description">一只独自生活但身体不好的半妖小狐狸。</p>
</div><div class="separator"></div>
<div class="openings-container">
<div class="opening-module" data-id="1">
<div class="opening-title">【坠崖奇遇】</div>
<div class="opening-content">白清衍在坠星崖下的湖旁发现了重伤昏迷的你（身份自定）。</div>
</div>
<div class="opening-module" data-id="2">
<div class="opening-title">【仙途缘起】</div>
<div class="opening-content">心里十分害怕但还要装作乖顺的白清衍照顾受伤的你（修仙者线）。</div>
</div>
<div class="opening-module" data-id="3">
<div class="opening-title">【猎户竹马】</div>
<div class="opening-content">来给小狐狸送吃的啦！（竹马猎户线）</div>
</div>
</div><div class="footer">
<span>作者：星</span> |
<span>卡类型：BL</span> |
<span>🈲二改二传</span>
<p style="font-size: 0.75rem; color: #aaa; margin-top: 8px;">祝大家食用愉快～</p>
</div>
</div><script>
document.querySelectorAll('.opening-module').forEach(module => {
module.addEventListener('click', (e) => {
e.stopPropagation();module.classList.add('shake');
module.addEventListener('animationend', () => {
module.classList.remove('shake');
}, { once: true });createParticles(module);
});
});function createParticles(module) {
const particleCount = 20;
const rect = module.getBoundingClientRect();
const bodyRect = document.body.getBoundingClientRect();for (let i = 0; i < particleCount; i++) {
const isStar = Math.random() > 0.4;
const particle = document.createElement('div');particle.className = isStar ? 'particle star' : 'particle heart';
particle.style.setProperty('–color', isStar ? (Math.random() > 0.5 ? 'var(–star-color-1)' : 'var(–star-color-2)') : 'var(–heart-color)');const size = Math.random() * 14 + 7; // 7px to 21px
particle.style.setProperty('–size', `${size}px`);document.body.appendChild(particle);
const startX = rect.left – bodyRect.left + Math.random() * rect.width;
const startY = rect.top – bodyRect.top + Math.random() * rect.height;
particle.style.left = `${startX}px`;
particle.style.top = `${startY}px`;const angle = Math.random() * 2 * Math.PI;
const distance = Math.random() * 50 + 35; // 35 to 85px
const endX = Math.cos(angle) * distance;
const endY = Math.sin(angle) * distance;particle.style.setProperty('–transform-end', `translate(${endX}px, ${endY}px)`);
particle.addEventListener('animationend', () => {
particle.remove();
});
}
}
</script></body>
</html>
“`
