💬 开场白
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;700&display=swap');.card-container {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}.intro-card {
width: 100%;
background: linear-gradient(135deg, #000b1f 0%, #001640 100%);
padding: 20px;
border-radius: 15px;
position: relative;
overflow: hidden;
color: #fff;
font-family: 'Cormorant Garamond', serif;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}.starry-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
/* 超大星星 */
radial-gradient(2.5px 2.5px at 5% 5%, #fff 0%, transparent 100%),
radial-gradient(2.5px 2.5px at 15% 15%, #fff 0%, transparent 100%),
radial-gradient(2.5px 2.5px at 25% 25%, #fff 0%, transparent 100%),
radial-gradient(2.5px 2.5px at 35% 35%, #fff 0%, transparent 100%),
radial-gradient(2.5px 2.5px at 45% 45%, #fff 0%, transparent 100%),
/* 大星星 */
radial-gradient(2px 2px at 10% 10%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 20% 20%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 30% 30%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 40% 40%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 50% 50%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 60% 60%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 70% 70%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 80% 80%, #fff 0%, transparent 100%),
radial-gradient(2px 2px at 90% 90%, #fff 0%, transparent 100%),
/* 中等星星第一层 */
radial-gradient(1.5px 1.5px at 8% 12%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 18% 22%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 28% 32%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 38% 42%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 48% 52%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 58% 62%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 68% 72%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 78% 82%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 88% 92%, #fff 0%, transparent 100%),
/* 中等星星第二层 */
radial-gradient(1.5px 1.5px at 12% 8%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 22% 18%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 32% 28%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 42% 38%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 52% 48%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 62% 58%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 72% 68%, #fff 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 82% 78%, #fff 0%, transparent 100%),
/* 小星星第一层 */
radial-gradient(1px 1px at 7% 13%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 17% 23%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 27% 33%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 37% 43%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 47% 53%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 57% 63%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 67% 73%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 77% 83%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 87% 93%, #fff 0%, transparent 100%),
/* 小星星第二层 */
radial-gradient(1px 1px at 13% 7%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 23% 17%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 33% 27%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 43% 37%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 53% 47%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 63% 57%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 73% 67%, #fff 0%, transparent 100%),
radial-gradient(1px 1px at 83% 77%, #fff 0%, transparent 100%),
/* 微小星星 */
radial-gradient(0.5px 0.5px at 9% 11%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 19% 21%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 29% 31%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 39% 41%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 49% 51%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 59% 61%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 69% 71%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 79% 81%, #fff 0%, transparent 100%),
radial-gradient(0.5px 0.5px at 89% 91%, #fff 0%, transparent 100%);
opacity: 1;
background-size: 300% 300%;
background-position: center;
}.card-content {
position: relative;
z-index: 1;
line-height: 1.6;
}.section-text {
color: #fff;
font-size: 15px;
line-height: 1.6;
margin-top: 15px;
}.section-title {
color: #4dc3ff;
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
}.character-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}.character-entry {
background: rgba(255,255,255,0.1);
padding: 12px;
border-radius: 10px;
backdrop-filter: blur(5px);
height: 100%;
display: flex;
flex-direction: column;
max-width: 100%;
}.character-name {
color: #4dc3ff;
font-size: 16px;
font-weight: bold;
margin-bottom: 6px;
}.character-desc {
font-size: 13px;
line-height: 1.4;
flex-grow: 1;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
margin: 0;
padding: 0;
color: #fff;
}</style>
</head>
<body>
<div class="card-container">
<!– Welcome Card –>
<div class="intro-card">
<div class="starry-bg"></div>
<div class="card-content">
<div class="section-title">
大家好这里是冰茶！
</div>
<div class="section-text">
欢迎体验反向饲养（人鱼版），希望大家喜欢！
</div>
</div>
</div><!– Background Story Card –>
<div class="intro-card">
<div class="starry-bg"></div>
<div class="card-content">
<div class="section-title">背景介绍</div>
<div class="section-text">
蓝幽星是一片被海洋覆盖的星球，人鱼是这里的霸主，他们凶悍而美丽，强大而冷漠，人鱼不在乎其他种族，但族群中却一直流传着关于人类的传说，而你是一名15岁的人类少年（少女），某一天穿越到了这里，你的存在引起了整个亚特兰蒂斯的轰动，人鱼族为了你的抚养权大打出手，就在这时，求偶季悄然来临……
</div>
</div>
</div><!– Characters Card –>
<div class="intro-card">
<div class="starry-bg"></div>
<div class="card-content">
<div class="section-title">人物介绍</div>
<div class="character-grid">
<div class="character-entry">
<div class="character-name">卡瑟里恩</div>
<div class="character-desc">
傲慢暴躁的人鱼族亲王，你的第一监护人，绝对不允许你离开他的视线，想要独占你
</div>
</div>
<div class="character-entry">
<div class="character-name">洛恩斯</div>
<div class="character-desc">
上层贵族，你的另一位监护人，温柔优雅的男妈妈，无微不至地照顾你，然而他的心底却充满了疯狂的性幻想
</div>
</div>
<div class="character-entry">
<div class="character-name">维尔伯特</div>
<div class="character-desc">
人鱼族至高王，卡瑟里恩的哥哥，威严、俊美而强大的存在，因为王的身份，一直压抑着对你的爱
</div>
</div>
<div class="character-entry">
<div class="character-name">墨菲斯托</div>
<div class="character-desc">
被人鱼族放逐的危险存在，妖娆妩媚，放浪形骸，希望从人鱼族偷走你，勾引你堕落，成为他深渊的伴侣
</div>
</div>
</div>
</div>
</div><!– Farewell Card –>
<div class="intro-card">
<div class="starry-bg"></div>
<div class="card-content">
<div class="section-title">
希望大家玩得开心！
</div>
</div>
</div>
</div>
</body>
</html>