💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魔女的育儿日记</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400&display=swap');
/* 您的自定义字体链接 */
@import url("https://fontsapi.zeoseven.com/256/main/result.css");
@import url("https://fontsapi.zeoseven.com/441/main/result.css");:root {
–bg-color: #1a1820;
–scroll-bg: #fdf6e9;
–text-main: #5a4a3a;
–text-highlight: #8a6eae;
–text-tag: #b08d57;
–text-footer: rgba(90, 74, 58, 0.6);
}*, *::before, *::after {
box-sizing: border-box;
}body {
margin: 0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAALsbWiz3rG8ztVAFn5STsje8t_lql2oAAJLGAACPa2gVciEBut5JppiNgQ.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
font-family: "Huiwen-mincho", 'Noto Serif SC', serif;
overflow: hidden;
position: relative;
}#universe-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}.scroll-wrapper {
position: relative;
z-index: 1;
perspective: 1000px;
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
}#unroll-prompt {
color: #e0dce8;
text-align: center;
font-size: 1.2rem;
cursor: pointer;
padding: 1rem;
border: 1px dashed #a484c4;
border-radius: 8px;
transition: all 0.3s ease;
text-shadow: 0 0 10px #a484c4;
background: rgba(26, 24, 32, 0.6);
backdrop-filter: blur(5px);
}
#unroll-prompt:hover {
background: rgba(138, 110, 174, 0.2);
transform: scale(1.05);
}/* — 核心修改：应用 Padding-Top Hack — */
.scroll-aspect-ratio-box {
position: relative;
width: 100%;
height: 0;
padding-top: 150%; /* 150% = 3 / 2, 强制实现 2:3 的宽高比 */
transform-origin: top center;
transform: scaleY(0);
transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
visibility: hidden;
}
.scroll-aspect-ratio-box.unrolled {
transform: scaleY(1);
visibility: visible;
}.scroll-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, #fdf6e9, #f8f0e0);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border: 1px solid #dcd3c3;
border-radius: 5px;
padding: 1rem 2rem;
overflow-y: auto;
}.scroll-container::-webkit-scrollbar { width: 8px; }
.scroll-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
.scroll-container::-webkit-scrollbar-thumb { background-color: #c8b79e; border-radius: 4px; }/* — 文本样式（无改动） — */
.content-section {
margin-bottom: 1.5rem;
border-bottom: 1px dashed rgba(90, 74, 58, 0.2);
padding-bottom: 1.5rem;
}
.content-section:last-of-type { border-bottom: none; margin-bottom: 0; }
h2 {
font-family: 'JiangChengJieXingTi', 'Playfair Display', serif;
font-weight: 700;
font-style: normal;
font-size: clamp(1.4rem, 4vw, 1.8rem);
color: var(–text-main);
text-align: center;
margin-bottom: 1rem;
}
.intro-text p {
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
line-height: 1.8;
color: var(–text-main);
text-align: center;
margin: 0.3rem 0;
}
.intro-text p:last-of-type { font-weight: 700; color: var(–text-highlight); }
.tags {
text-align: center;
margin-top: 1rem;
color: var(–text-tag);
font-size: clamp(0.8rem, 2vw, 0.9rem);
}
ul { list-style: none; padding-left: 0; text-align: center; }
li {
font-size: clamp(0.85rem, 2.2vw, 1rem);
line-height: 1.7;
color: var(–text-main);
margin-bottom: 0.8rem;
}
strong {
color: var(–text-highlight);
font-family: "Huiwen-mincho", serif;
font-weight: 700;
display: block;
margin-bottom: 0.3rem;
}
.warning-text { font-family: "Huiwen-mincho", serif; font-weight: bold; color: #c0392b; }
.footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; }
.footer-text {
font-size: clamp(0.8rem, 2vw, 0.9rem);
color: var(–text-footer);
font-style: italic;
animation: breathe 4s infinite ease-in-out;
}
@keyframes breathe { 50% { opacity: 0.7; } }</style>
</head>
<body><canvas id="universe-canvas"></canvas>
<div class="scroll-wrapper">
<div id="unroll-prompt">~ 点击展开魔法卷轴 ~</div><!– 核心修改：用一个盒子来强制实现长宽比 –>
<div class="scroll-aspect-ratio-box" id="scroll-box">
<div class="scroll-container" id="scroll">
<div class="content-section intro-text">
<h2>引言</h2>
<p>她是掌控万物的魔女，却掌控不了一个小小的男孩。</p>
<p>捡到他之前，她的世界是魔法、星辰与永夜。</p>
<p>捡到他之后，她的世界是热牛奶、睡前故事和一声软糯的“妈妈”。</p>
<p>最强大的魔法，是守护。</p>
<div class="tags">#魔女的育儿日记 #奇幻养崽 #非血缘亲情</div>
</div><div class="content-section highlights">
<h2>亮点介绍</h2>
<ul>
<li><strong>亮点1</strong></li>
<li>孩子种族数量20种！看看能roll到什么样的孩子！</li>
<li style="margin-top: 1rem;"><strong>亮点2</strong></li>
<li>高自由度的魔女人设生成</li>
<li style="margin-top: 1rem;"><strong>亮点3</strong></li>
<li>想要当被领养的那个？扮演角色可互换！</li>
</ul>
</div><div class="content-section guide">
<h2>开场白（玩法）指引</h2>
<ul>
<li><strong>第一步</strong></li>
<li>来生成你的魔女形象吧。在开场白2完成生成后，将信息复制粘贴到世界书【user的魔女设定（自填）】中。然后新建聊天，并跳转至开场白3。</li>
<li style="margin-top: 1rem;"><strong>第二步</strong></li>
<li>正式开启你的捡娃娃之路！选择开场白3，根据提示选择你要的相遇场景，等待指令发送后，将会在指定环境中遇见一个随机的孩子。</li>
<li style="margin-top: 1rem;"><strong>第三步</strong></li>
<li>将回复的孩子信息复制粘贴到世界书【收养的孩子（自填）】后，建议把世界书条目【被遗落的孩子：随机生成器】关闭。</li>
<li><strong font="Huiwen-mincho">注意：严禁生成任何涉及未成年人的NSFW内容。请勿以任何形式创作、暗示或传播此类内容。违反此规定将自行承担全部责任。</strong></li>
<li>本故事纯属虚构，与任何现实人物、团体、事件等均无关联。</li>
</ul>
</div><div class="footer">
<p class="footer-text">成年后可继续生成补充信息！</p>
<p class="footer-text">具体操作指引详见世界书【成长的倒影：未来推演】</p>
</div>
</div>
</div>
</div><script>
// — 宇宙特效脚本 (无改动) —
"use strict";
const canvas = document.getElementById('universe-canvas');
if (canvas) {
const ctx = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
let stars = [], count = 0;
const maxStars = 1800;
const canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
canvas2.width = 100; canvas2.height = 100;
const half = 50, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#FFFFFF');
gradient2.addColorStop(0.1, 'rgba(100, 149, 237, 0.7)');
gradient2.addColorStop(0.25, 'rgba(70, 130, 180, 0.3)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath(); ctx2.arc(half, half, half, 0, Math.PI * 2); ctx2.fill();
function random(min, max) {
if (arguments.length < 2) { max = min; min = 0; }
if (min > max) { [min, max] = [max, min]; }
return Math.floor(Math.random() * (max – min + 1)) + min;
}
function maxOrbit(x, y) {
const max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
}
class Star {
constructor() {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 18;
this.orbitX = w / 2; this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 500000;
this.alpha = random(2, 10) / 10;
stars[++count] = this;
}
draw() {
const x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX;
const y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY;
const twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) { this.alpha -= 0.05; }
else if (twinkle === 2 && this.alpha < 1) { this.alpha += 0.05; }
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x – this.radius / 2, y – this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
}
function initStars() {
stars = []; count = 0;
for (let i = 0; i < maxStars; i++) { new Star(); }
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (let i = 1; i < stars.length; i++) { stars[i].draw(); }
window.requestAnimationFrame(animation);
}
window.addEventListener('resize', () => {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
initStars();
});
initStars();
animation();
}// — 卷轴展开脚本 —
const prompt = document.getElementById('unroll-prompt');
const scrollBox = document.getElementById('scroll-box'); // 修改为获取外层盒子if (prompt && scrollBox) {
prompt.addEventListener('click', () => {
prompt.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
prompt.style.opacity = '0';
prompt.style.transform = 'scale(0.8)';
setTimeout(() => {
prompt.style.display = 'none';
scrollBox.classList.add('unrolled'); // 对外层盒子应用 unrolled 类
}, 500);
});
}
</script></body>
</html>
“`
