🎭 角色简介
<character_information character="盛涧">
核心身份：
名称：盛涧（Павел Михайлов）
昵称：涧哥，Mishka（亲密称呼），小熊
性别：男
生日：6月1日
年龄：20
现在居所：独居京市湖畔的私人别墅区“兰湖畔弯”…
💬 开场白
“`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻转卡片展示开场白</title>
<!– 优先加载本地备份（实际项目中可下载到本地） –>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!– 1. 内联样式，不依赖外部配置 –>
<style>
/* 定义CSS变量，设置多重fallback */
:root {
–primary-color: #3B82F6;
–yellow-border: #EAB308; /* 深黄色边框 */
–yellow-title: #FACC15; /* 浅黄色标题 */
–fallback-border: #d97706; /* 浏览器兼容 fallback */
–fallback-title: #fbbf24; /* 浏览器兼容 fallback */
}/* 核心动画和布局样式内联，不依赖Tailwind动态生成 */
.card-flip {
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-flip-active {
transform: rotateY(180deg);
}
.card-front, .card-back {
backface-visibility: hidden;
transition: all 0.3s ease;
}
.card-back {
transform: rotateY(180deg);
}
.card-container {
perspective: 1000px;
}
.introduction-item {
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
transition: all 0.3s ease;
}
.introduction-item:hover {
background-color: #fffbeb; /* 浅黄背景 */
transform: translateX(0.5rem);
}
</style><!– 2. 补充Tailwind工具类，确保基础样式生效 –>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center pt-8 pb-8 px-4">
<div class="card-container w-full max-w-md">
<div id="flipCard" class="card-flip w-full">
<!– 卡片正面 –>
<div class="card-front absolute w-full bg-white rounded-2xl shadow-xl overflow-hidden cursor-pointer">
<img src="https://free.picui.cn/free/2025/08/08/6894f82ea5211.png" alt="点击翻转的图片" class="w-full h-auto object-cover transition-transform duration-700 hover:scale-110">
<div class="absolute inset-0 bg-primary/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
<span class="bg-white text-primary px-4 py-2 rounded-full font-medium shadow-lg">
<i class="fa fa-refresh mr-2"></i>点击翻转
</span>
</div>
</div><!– 卡片背面 –>
<div class="card-back absolute w-full bg-white rounded-2xl shadow-xl p-6">
<div class="flex justify-end items-center mb-4">
<button id="flipBackBtn" class="text-slate-400 hover:text-primary transition-colors p-2">
<i class="fa fa-times text-xl"></i>
</button>
</div><div class="flex-1">
<!– 3. 直接使用具体颜色值，不依赖动态加载 –>
<div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白一</h3>
<p class="text-slate-600 mt-1">盛涧排队两小时买到的莫斯科联名限量樱桃冰淇淋被撞掉而又气又委屈。</p>
</div><div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白二</h3>
<p class="text-slate-600 mt-1">卡列尼娜夫人在别墅中请{{user}}担任儿子盛涧的老师，向 {{user}} 描述盛涧像爱撒娇的小甜熊，盛涧下楼，在母亲身边坐下，并用生硬中文向 {{user}} 问好。</p>
</div><!– 其余开场白项保持相同结构 –>
<div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白三</h3>
<p class="text-slate-600 mt-1">盛涧带着冠军奖杯和眉骨新伤归家，见到 {{user}} 后热情拥抱，将奖杯作为给对方的奖品，表达思念与疲惫，撒娇请求{{user}}留下陪伴。</p>
</div><div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白四</h3>
<p class="text-slate-600 mt-1">手机：要到联系方式的初次聊天</p>
</div><div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白五</h3>
<p class="text-slate-600 mt-1">手机：分手三个月</p>
</div><div class="introduction-item border-l-2 border-dashed"
style="border-color: var(–yellow-border, var(–fallback-border));">
<h3 class="font-bold text-lg"
style="color: var(–yellow-title, var(–fallback-title));">开场白六</h3>
<p class="text-slate-600 mt-1">自roll，空白开场白</p>
</div>
</div><div class="mt-4 pt-4 border-t border-slate-100">
<button id="flipAgainBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center">
<i class="fa fa-arrow-left"></i>
</button>
</div>
</div>
</div>
</div><script>
// 4. 检测外部资源加载状态，失败时切换到本地样式
function checkResourceLoad() {
// 检测Tailwind是否加载成功
if (typeof tailwind === 'undefined') {
console.log('Tailwind未加载，使用本地备份样式');
// 手动应用关键样式（如果需要）
document.querySelectorAll('.card-flip').forEach(el => {
el.style.transformStyle = 'preserve-3d';
});
}
}// 页面加载完成后检测
window.addEventListener('load', function() {
checkResourceLoad();// 调整卡片高度
const flipCard = document.getElementById('flipCard');
const cardImage = document.querySelector('.card-front img');
const cardBack = document.querySelector('.card-back');function adjustCardHeight() {
const backHeight = cardBack.scrollHeight;
const finalHeight = Math.max(cardImage.offsetHeight, backHeight);
flipCard.style.height = `${finalHeight}px`;
cardBack.style.height = `${finalHeight}px`;
}adjustCardHeight();
window.addEventListener('resize', adjustCardHeight);// 绑定点击事件
document.querySelector('.card-front').addEventListener('click', () => {
flipCard.classList.add('card-flip-active');
});document.getElementById('flipBackBtn').addEventListener('click', (e) => {
e.stopPropagation();
flipCard.classList.remove('card-flip-active');
});document.getElementById('flipAgainBtn').addEventListener('click', (e) => {
e.stopPropagation();
flipCard.classList.remove('card-flip-active');
});
});// 5. 监听资源加载错误
window.addEventListener('error', function(e) {
if (e.target.tagName === 'SCRIPT' || e.target.tagName === 'LINK') {
console.log('资源加载失败:', e.target.src || e.target.href);
checkResourceLoad(); // 触发备用样式
}
}, true);
</script>
</body>
</html>
“`
作者：漆园蝶
本卡仅发布于Discord旅程社区
角色卡完全免费，禁止任何商业用途
禁止一切形式的转载
